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>

在iframe中附加src

1 个答案: