在iframe中追加src

我在我的网站上通过动态创建的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

类似这样的内容：（例如，如果您正在使用引导）

---

这是一个好主意，但在这种情况下，URL是在网站加载时生成的，因此我想我需要阅读URL，然后通过php或jquery进行更改

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

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