オーバーレイ画像をクリックして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の必要になります知っているが、私は働いて、それを取得する方法については考えていますか？

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

HTML：：あなたは次の操作を行うことができます

Answer 1

<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を追加します。

携帯電話とタブレットでは動作しません。デスクトップまたはラップトップでのみ動作します。