Отзывчивый игрок vimeo - полноэкранный баг

Чтобы обеспечить отзывчивое полноразмерное видео, я вставляю код Vimeo embed-iframe после загрузки страницы. Это позволяет моему сценарию определять ширину экрана, настраивать некоторые переменные в коде Vimeo для соответствия конкретному размеру экрана.Отзывчивый игрок vimeo - полноэкранный баг

Сайт:>http://leadercastlondon.barkbuilder.com/. Вы увидите видео о 2/3rds пути вниз по экрану.

Вот код JS, который я использую, чтобы вставить видео на страницу и повторно вставить, если страница изменена.

//on page load, insert the video 
$(function() { 
resizeVideo(); 
}); 

//put $(window) in variable 
var win = $(window); 

// when the page is re-sized 
win.resize(function(){ 

    resizeVideo(); 
}) 

function resizeVideo() { 
    //code for Vimeo in string 
var iFrameString = '<iframe src="//player.vimeo.com/video/74968408?title=0&amp;byline=0&amp;portrait=0&amp;color=ff0179" width="980" height="551" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'; 

    //calculate width of screen 
var siteWidth = $(window).width(); 

    //width:height ratio 
var rate = 1.77858439; 
//create string with new width 
    var siteWidthString = 'width="' + siteWidth + '"'; 

var videoHeight = siteWidth/rate; 
    //create string with new height 
var siteHeightString = 'height="' + videoHeight + '"'; 

    //regex to replace width within Vimeo iframe string 
    var newiFrameString = iFrameString.replace(/width="[0-9]{1,4}"/,siteWidthString); 

    //regex to replace height within Vimeo iframe string 
    var newiFrameString = newiFrameString.replace(/height="[0-9]{1,4}"/,siteHeightString) 

    //insert Vimeo HTML onto page 
    $('.row.video').html(newiFrameString); 
}

Проблема

Когда видео воспроизводится, это нормально. Но когда выбрана опция Fullscreen, это то, что я испытываю на Chrome 31.0.1650.63 Mac:

Видео не переходит в полноэкранный режим. Липкий навигатор остается видимым над столом. Выход из полноэкранного режима, похоже, полностью разбивает мою страницу. Я не могу прокручивать вверх или вниз.

В сафари тоже странные вещи.

Кто-нибудь сталкивается с чем-то подобным, когда отзывчивый игрок Vimeo выходит в полноэкранный режим? Спасибо за любую помощь, которую вы можете предоставить.

источник

2014-01-11 Mr. Loop

Я нажал кнопку полноэкранного режима, она не работает и «не может прокручиваться вверх или вниз», но после того, как я снова нажал кнопку полноэкранного просмотра, и на этот раз она появится в полноэкранном режиме. –

Возможно, полноэкранная функция не совместима с iframe, возможно, вы можете попробовать другой способ, такой как embed, html5, object, чтобы представить видео. –

Ну, более 1 года спустя, и эта ошибка снова ударила меня по лицу. Но я, наконец, решил.

У меня было событие в окне window.resize, которое стреляло, чтобы заменить iframe HTML каждый раз, когда страница изменила его размер. Тем не менее, «fullscreen API» также запускает событие «window.resize», которое затем запускает мой метод для замены кода iFrame .... поэтому нажатие на полноэкранном режиме вытирает HTML-видео и пытается его заменить.

Я нашел лучший способ изменить размеры iFrame для чувствительного сайта.

источник

2015-03-28 20:19:29

Оказывается, это противоречивое имя функции, которое вызвало всю мою печаль. Doh!

источник

2014-01-24 03:14:33

Я думаю, что основная проблема заключается в том, что вы полностью заменяете iframe при каждом изменении размера. Я считаю, что когда игрок выходит на экран в полноэкранном режиме, происходит событие изменения размера, в результате чего плеер больше не существует, что приводит к странным проблемам рендеринга.

Было бы намного более эффективно обновлять атрибуты width и height на iframe, а не полностью заменять его. Это также позволит избежать появления большого количества нагрузок в статистике видео.

источник

2014-03-18 17:38:15

Отзывчивый игрок vimeo - полноэкранный баг

ответ

Смежные вопросы