Изображение обложки отображается только на последнем элементе dom

У меня есть требование для рендеринга различных видео в другом контейнере с конвейеризацией, используя jquery.mb.YTPlayer. Ниже мой HTML-код.

Но каваримадж (видео фоновое изображение) добавлен только в последнюю локализацию.

<div id="wrapper">
<a href='https://pupunzi.com/#mb.components/components.html' style='position:absolute;top:0;z-index:1000'><img id='logo' border='0' src='https://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>

<div id="container-1" class="video" data-property="{videoURL:'UJQmV8aPNao',containment:'self',autoPlay:true, mute:true, startAt:0, opacity:1}"></div>
<div class="gap"></div>
<div id="container-2" class="video" data-property="{videoURL:'3ovA7zeviRo',containment:'self',autoPlay:true, mute:true, startAt:5, opacity:1}"></div>
<div class="gap"></div>
<div id="container-3" class="video" data-property="{videoURL:'u9k1FaMIYTs',containment:'self',autoPlay:true, mute:true, startAt:5, opacity:1}"></div>
<a style="position: fixed;bottom:40px;right: 30px;" href="http://pupunzi.open-lab.com/consider-a-donation/" target="_blank">
    <img border="0" alt="PayPal" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG_global.gif" class="alignright">
</a>
<div id="wp" onclick="self.location.href='https://pupunzi.com/wpPlus/go-plus.php?plugin_prefix=YTPL'">
    <img src="https://pupunzi.com/wpPlus/images/YTPL.svg" style="float: left">
    <span>Get the <br><b>Wordpress</b> Plug-in!</span>
</div>

Ниже в javascript я инициализировал YT Player

<script>
    var myPlayer;
    $(function () {
        myPlayer = $('.video').YTPlayer();
    });
</script>

Но выветривание (видео фоновое изображение) отображается только в последнем контейнере. В моем приведенном выше случае, он показывает только "контейнер-3" для одного только div.

0 ответов

Другие вопросы по тегам