響應式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中

回答

相關問題