jquery - 通过单击叠加图像播放youtube视频

Question

我希望有一个重叠图像显示在YouTube视频上，我想要的是单击该重叠图像，然后将其删除并开始播放视频。

这是我的html:

<div class="video-panel">
    <div class="overlay"></div>
    <div class="video"><?php echo $video; ?></div>
</div>

这是我的CSS:

.video-panel {
 @include span(12 of 12 no-gutters);
 position: relative;
 background-color: #ccc;
 padding: 0;

.overlay {
 @include explode-width;
 content:"";
 position:absolute;
 top: 0;
 bottom: 0;
 height: 100%;
 background-color: #000;
 opacity: .8;
 z-index: 1;
}
}

我知道将需要jquery，但是我不知道如何使其工作？

Answer 1

您可以执行以下操作:

// video gallery play on click
    $('div.videoWrapper').click(function(){
    video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
    $(this).html(video);
});

HTML:

<div class="videoWrapper videoOnClick t-hidden m-hidden" data-video="https://www.youtube.com/embed/Jy6rdnYSh74?list={your-video-id}?&amp;autoplay=1">
  <span class="play-icon"></span>
  <img class="video-overlay" src="images/video-overlay.png">
</div>

添加您的视频ID(不带方括号)。

这不适用于手机和平板电脑。仅适用于台式机或笔记本电脑。