Append src in iframe

Question

Ich habe ein vimeo Video geladen durch einen dynamisch erstellten iframe auf meiner Website. Für mobile Geräte muss ich aus der src ändern:

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

zu

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

Im Idealfall möchte ich dies geschehen kann, wie die Seite geladen ist.

danke

Answer 1

Verwenden Medienanfragen die iframe laden Sie auf dem Gerät abhängig sein sollen.

Etwas wie folgt aus: (zB wenn Sie mit Bootstrap)

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