在iframe中添加src

Question

我在我的網站上通過動態創建的iframe加載了vimeo視頻。對於移動設備，我需要到src從改變：

<iframe src="https://player.vimeo.com/video/220535146?controls=0&hd=1&autoplay=1&player_id=banneroneVid&api=1" width="640" height="360" frameborder="0" title="reebok_short_loop" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" id="banneroneVid" ></iframe> 

到

<iframe src="https://player.vimeo.com/video/220535146?background=1" width="640" height="360" frameborder="0" title="reebok_short_loop" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" id="banneroneVid" ></iframe> 

我非常希望這樣的事情發生在頁面加載。

謝謝

Answer 1

使用媒體查詢根據設備加載所需的iframe。

事情是這樣的：（例如，如果你使用的自舉）

<!-- bigger screens --> 
<div class="hidden-xs col-sm-12 col-md-12 col-lg-12"> 
    <iframe src="https://player.vimeo.com/video/220535146?controls=0&hd=1&autoplay=1&player_id=banneroneVid&api=1" width="640" height="360" frameborder="0" title="reebok_short_loop" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" id="banneroneVid" ></iframe> 
</div> 

<!-- mobile devices with max-width: 768px --> 
<div class="col-xs-12 hidden-sm hidden-md hidden-lg"> 
    <iframe src="https://player.vimeo.com/video/220535146?background=1" width="640" height="360" frameborder="0" title="reebok_short_loop" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" id="banneroneVid" ></iframe> 
</div>