嵌入Youtube视频自动播放-在图像幻灯片的中间

Embedded Youtube Video Autoplay - In the middle of an image sildeshow

本文关键字：图像 幻灯片 中间 Youtube 视频 自动播放 嵌入      更新时间：2023-09-26

寻找一些帮助，以获得从youtube工作作为项目编号4在图像的幻灯片视频嵌入。最终的结果应该是播放前3张图片，一旦它到达第4个项目是视频，它应该自动播放它，一旦视频结束，它应该移动到幻灯片中的下一张图片的顶部。

我的网址是www.serenitygardenrooms.com

不工作的代码片段是:

<section id="home-slider" class="flexslider fullbg"
 style="background-image:url(img/slide/home/1_1_.jpg); height:600px; padding:0px;">

花茎。范围。风格。上下文。

        <p class="home-slide-content bounceIn animated" data-wow-delay="0.5s" data-wow-duration="10s">
            We <span class="highlight">build</span> it
        </p>
    </div>
</li>
<li class="home-slide">
    <div class="flex-caption transparent light-font center flexslider fullbg" style="background-image:url(img/slide/home/2.jpg); height:600px; width:100%; padding:0px; margin-top:0px;">
        <p class="home-slide-content bounceInLeft animated" data-wow-delay="0.5s" data-wow-duration="10s" style="margin-top:150px;">
            Scape. <span class="highlight">Scope.</span> Style.<span class="highlight"> Context.</span>
        </p>
        <p class="home-slide-content bounceIn animated" data-wow-delay="0.5s" data-wow-duration="10s">
            We <span class="highlight">build</span> it
        </p>
    </div>
</li>
<li class="home-slide">
    <div class="flex-caption transparent light-font center flexslider fullbg" style="background-image:url(img/slide/home/3.jpg); height:600px; width:100%; padding:0px; margin-top:0px;">
        <p class="home-slide-content bounceInLeft animated" data-wow-delay="0.5s" data-wow-duration="10s" style="margin-top:150px;">
            Scape. <span class="highlight">Scope.</span> Style.<span class="highlight"> Context.</span>
        </p>
        <p class="home-slide-content bounceIn animated" data-wow-delay="0.5s" data-wow-duration="10s">
            We <span class="highlight">build</span> it
        </p>
    </div>
</li>
<li class="home-slide">
    <div class="flex-caption transparent light-font center flexslider fullbg" style="background-image:url(img/slide/home/4.jpg); height:600px; width:100%; padding:0px; margin-top:0px;">
        <iframe src="https://www.youtube.com/watch?v=WyjK8mjhjb4?autoplay=1" width="100%" height="600px" frameborder="0" allowfullscreen></iframe>
    </div>
</li>

你需要一个事件来捕捉结束的事件，就像在HTML5视频的。还有一个类似的问题:

youtube视频结束时的事件

相关文章：