响应式 vimeo 播放器 - 全屏错误答案

【问题标题】：Responsive vimeo player - fullscreen bug响应式 vimeo 播放器 - 全屏错误
【发布时间】：2014-01-30 05:18:16
【问题描述】：

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

这里是网站 --> http://leadercastlondon.barkbuilder.com/ 。您会在屏幕下方大约 2/3 处看到视频。

这是我用来将视频插入页面并在调整页面大小时重新插入的 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 播放器全屏时遇到类似情况？感谢您提供的任何帮助。

【问题讨论】：

我点击了全屏按钮，它不起作用并且“无法向上或向下滚动”，但是当我再次点击全屏按钮后，这次它进入了全屏。
可能全屏功能与iframe不兼容，可以尝试其他方式如embed、html5、object来呈现视频。

标签： javascript jquery video responsive-design vimeo

【解决方案1】：

好吧，1 年多之后，这个虫子又给了我一拳。但我终于解决了。

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

我找到了一种更好的方法来更改响应式网站的 iFrame 尺寸。

【讨论】：

您能分享一下您如何在不影响全屏的情况下响应式更新播放器的宽度吗？现在有同样的问题：stackoverflow.com/questions/60921169/…

【解决方案2】：

事实证明，这是一个相互矛盾的函数名称，让我很伤心。呵呵！

【讨论】：

【解决方案3】：

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

只更新 iframe 上的 width 和 height 属性而不是完全替换它会更有效。这也将避免导致大量负载出现在视频的统计信息中。

【讨论】：