多个 iframe 视频同时运行一个

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

虽然您正在循环您的 .header-video 元素并传递正确的 elem，但您并没有说要使用哪个 .header-video_media，请尝试：

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