响应式Vimeo播放器-全屏错误

Question

To allow for a responsive full-width video, I insert the Vimeo embed-iframe code after the page has loaded. This allows my script to determine the width of the screen, adjust some variables within the Vimeo code to accommodate the specific size of the screen.

Here is the site --> http://leadercastlondon.barkbuilder.com/ . You'll see the video about 2/3rds of the way down the screen.

Here is the JS code I am using to insert the video onto the page and re-insert if the page is resized.

//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);
}

Problem

When the video is played, it's fine. But when the Fullscreen option is selected, this is what i experience on Chrome 31.0.1650.63 Mac:

The video does not go to fullscreen. The sticky nav remains viewable overtop of the page. Exiting the fullscreen seems to completely break my page. I can't scroll up or down.

On Safari, weird things happening too.

Anyone run into something like this with a responsive Vimeo player going to fullscreen? Thanks for any help you can provide.

Answer 1

Turns out, it was a conflicting function name that caused all my sorrow. Doh!

Answer 2

I think the main issue here is that you are fully replacing the iframe on every resize. I believe that when the player goes full screen, a resize event is fired causing that player to not exist anymore, which leads to weird rendering issues.

It would be a lot more efficient to just update the width and height attributes on the iframe instead of completely replacing it. That will also avoid causing lots of loads to show up in the video's stats.

Answer 3

Well, over 1 year later, and this bug punched me the in the face again. But I finally resolved it.

I had an event on the 'window.resize' which was firing to replace the iframe HTML every time the page changed it's size. However, the 'fullscreen API' also fires the 'window.resize' event, which was then firing my method to replace the iFrame code....so clicking full screen was wiping out the HTML the video itself and trying to replace it.

I've found a better way change the iFrame dimensions for a responsive site.