在发布这个问题之前我确实搜索了该网站,但我正在寻找一个非常具体的答案。
我正在创建一个带有全宽滑块的网站。第一张幻灯片是 1 分钟的嵌入 Youtube 视频。我需要视频在用户到达网站时自动播放,但我需要视频在用户向下滚动页面或幻灯片更改时自动停止。
滑块.html
<!-- start slider -->
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<!-- Slide image -->
<iframe src='https://www.youtube.com/embed/pTBjHjRhx_Y' frameborder='0' allowfullscreen></iframe>
<!-- /Slide image -->
<!-- Texts container -->
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h1 class="title">Run Over<br>Everything</h1>
<!-- /Text title -->
<div class="button"><a href="#">See Details</a></div>
</div>
</div>
<!-- /Texts container -->
</div>
<!-- /Duplicate to create more slides -->
<div class="slide">
<img src="images/slider2.jpg" class="img-responsive" alt=""/>
<div class="slide_content">
<div class="slide_content_wrap">
<h1 class="title">Run Over<br>Everything</h1>
<div class="button"><a href="#">See Details</a></div>
</div>
</div>
</div>
<!--/slide -->
</div>
<div class="timers"></div>
<!-- Nav Controls -->
<div class="slidePrev"><span></span></div>
<div class="slideNext"><span></span></div></div>
<!--/slider -->
</div>
只需将
?autoplay=1
添加到您的 iframe src 中,如下所示,即可完成工作
<iframe src='https://www.youtube.com/embed/pTBjHjRhx_Y?autoplay=1' frameborder='0' allowfullscreen></iframe>
您还应该添加值为“1”的“静音”参数:?autoplay=1&mute=1。