如何在移動div上調整YouTube視頻的大小？

Question

我正在開發一個項目，並使用Bulma CSS frameworkBulma.io，目前它非常的甜美。

該項目是一個非常簡單的登陸頁面，需要在移動設備和其他方面看起來不錯。此着陸頁涉及自動啓動的YT視頻。

沒有設置特定尺寸，有沒有辦法將YT視頻自動縮放到手機？我對移動領域非常陌生。這裏的CSS指令是用於擴展移動設備的嗎？

Answer 1

使用FluidVids.js。 您需要像安裝其他每個JS文件一樣安裝它。
然後你撥打以下代碼，把這個放在你的正文下面fluidvids.js腳本中。

<script> 
    $(document).ready(function() { 
     fluidvids.init({ 
      selector: ['iframe', 'object'], 
      players: ['www.youtube.com', 'player.vimeo.com'] 
     }); 
    }); 
</script> 

這會自動調整iframe的大小，使用此配置，它會重新調整來自YouTube和Vimeo的iframe的大小。
如果你想讓iframe達到一定的尺寸，可以說90％的寬度居中。你可以用的iframe在div並添加css所以它是這樣的：

.YoutubeEmbedder{ 
    margin-left: 5%; 
    margin-right: 5%; 
} 

，並在html文件，你應該有這樣的事情：

<div class="YoutbeEmbedder"> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/HICEwPK8DNY" frameborder="0" allowfullscreen></iframe> 
</div> 
<script src="js/fluidvids.js"></script> 
<script> 
    $(document).ready(function() { 
     fluidvids.init({ 
      selector: ['iframe', 'object'], 
      players: ['www.youtube.com', 'player.vimeo.com'] 
     }); 
    }); 
</script>