通过单击叠加图像播放 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，不带括号。

这不适用于手机和平板电脑。只能在台式机或笔记本电脑上工作。