Question

为了允许响应全宽视频，我在页面加载后插入Vimeo embed-iframe代码。这允许我的脚本确定屏幕的宽度，调整Vimeo代码中的一些变量以适应屏幕的特定大小。

这是网站 - ＆gt; 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);
}

问题

播放视频时，没关系。但是当选择全屏选项时，这就是我在Chrome 31.0.1650.63 Mac上的体验：

视频无法全屏显示。粘性导航仍然可以在页面上方查看。退出全屏似乎完全打破了我的页面。我无法向上或向下滚动。

在Safari上，也发生了奇怪的事情。

任何人都会遇到这样的事情，有一个响应的Vimeo播放器全屏？感谢您提供的任何帮助。

Answer 1

事实证明，这是一个冲突的功能名称，引起了我所有的悲伤。卫生署！

Answer 2

我认为这里的主要问题是你在每次调整大小时都完全取代了iframe。我相信，当玩家全屏播放时，会触发调整大小事件，导致该玩家不再存在，这会导致奇怪的渲染问题。

仅更新iframe上的width和height属性而不是完全替换它会更高效。这也可以避免在视频的统计数据中显示大量的负载。

Answer 3

嗯，一年多以后，这个虫子又打了我一拳。但我终于解决了它。

我在'window.resize'上有一个事件，每次页面改变它的大小时都会触发iframe HTML。然而，'全屏API'也会触发'window.resize'事件，然后触发我的方法来替换iFrame代码....所以点击全屏幕就是擦除视频本身的HTML并尝试替换它。

我找到了更好的方法来更改响应式网站的iFrame维度。

响应的vimeo播放器 - 全屏错误

3 个答案: