响应式iframe中的YouTube视频未显示在Firefox中

我正在构建一个响应式网站，其上嵌入了YouTube视频。该视频采用响应式iframe，并且在除Firefox以外的所有浏览器中都可以很好地工作。它只是不显示。响应式iframe中的YouTube视频未显示在Firefox中

我试过savemode，将html5添加到链接中，评论所有js和js查询。如果我在px中添加宽度和高度，它会显示并正常工作，但不会响应。

我可以通过将容器的高度更改为百分比或vw值来显示它。无论我添加什么样的人物，它总能渲染视频的双倍高度并切割左右两侧的大部分。当视口缩小时，它也会切掉更多的宽度。将容器值更改为0以外的值时，所有其他浏览器都会发生同样的情况。

尝试过Firebug，但是甚至没有看到iframe。

下面是代码：

.embed-container { 
 
\t position: relative; 
 
\t padding-bottom: 56.25%; 
 
\t height: 0; 
 
\t overflow: hidden; 
 
\t max-width: 100%; 
 
\t margin-bottom: 4vw; 
 
} 
 
\t 
 
.embed-container iframe, .embed-container object, .embed-container embed { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<div class="embed-container"> 
 
    <iframe src='https://www.youtube.com/embed//EyhQN24InWg?html5=1' frameborder='0' allowfullscreen></iframe> 
 
</div>

网网址： https://www.marjanderksen.com

来源

2017-04-02 Josien Vos

您是否尝试过使用FitVids.js？

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.fitvids.js"></script> 
<script> 
    $(document).ready(function(){ 
     $(".embed-container").fitVids(); 
    }); 
</script>

链接下载插件：https://github.com/davatron5000/FitVids.js

来源

2018-01-11 14:47:44

响应式iframe中的YouTube视频未显示在Firefox中

回答

相关问题