Question

我正在使用此视频脚本 - http://zerosixthree.se/create-a-responsive-header-video-with-graceful-degradation/ - 我在同一个html页面中运行多个视频时遇到问题，每个部分都有一个。它们都是在同一时间开始的，它始终从第一个链接运行相同的视频。

<section id="section-1">
<div class="header-video">
<img src=""
            class="header-video__media"
            data-video-URL="https://www.youtube.com/embed/yNHyTk2jYNA"
            data-teaser="video/teaser-video"
            data-video-width="560"
            data-video-height="315">
            <a href="https://www.youtube.com/embed/yNHyTk2jYNA" class="header-video__play-trigger" id="header-video__play-trigger">View Trailer</a>
            <button type="button" class="header-video__close-trigger" id="header-video__close-trigger">Close</button>
        </div>
</section>

<section id="section-2">
<div class="header-video">
<img src=""
            class="header-video__media"
            data-video-URL="https://www.youtube.com/embed/NX7QNWEGcNI"
            data-teaser="video/teaser-video"
            data-video-width="560"
            data-video-height="315">
            <a href="https://www.youtube.com/embed/NX7QNWEGcNI" class="header-video__play-trigger" id="header-video__play-trigger">View Trailer</a>
            <button type="button" class="header-video__close-trigger" id="header-video__close-trigger">Close</button>
        </div>
</section>

<script>
$('.header-video').each(function(i, elem) {
    headerVideo = new HeaderVideo({
    element: elem,
    media: '.header-video__media',
    playTrigger: '.header-video__play-trigger',
    closeTrigger: '.header-video__close-trigger'
    });
});
</script>

我想在每次播放时使用正确的YouTube链接。

有什么想法？感谢。

Answer 1

虽然您正在循环浏览index.php元素并传递正确的.header-video，但您并未说明要使用哪个elem，请尝试：

.header-video_media

多个iframe视频当时运行一个

1 个答案: