iframeにsrcを追加します。

Question

私は自分のサイトで動的に作成されたiframeを通してvimeoビデオを読み込んでいます。理想的には私は、ページがロードされると、これは起こるしたい

<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> 

に

<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> 

：モバイルデバイスのIからSRCを変更する必要があります。

ありがとう

Answer 1

メディアクエリを使用して、デバイスに応じて必要なiframeを読み込みます。

このような何か：良いアイデアのthats（例えばブートストラップを使用している場合）

<!-- 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>