Как начать играть встроенный IFrame видео на щелчке изображения

Question

я нашел большой код кнопки наложения игры на YouTube миниатюре , и я хочу, чтобы появиться мое встроенное видео после OnClick этой кнопки

Вот код пожалуйста покажите мне, где я поставил IFrame

.unstarted-mode:not(.playing-mode) .ytp-cued-thumbnail-overlay:not([aria-hidden=true]), .ended-mode .ytp-cued-thumbnail-overlay:not([aria-hidden=true]) { 
 
    cursor: pointer; 
 
} 
 
.ytp-thumbnail-overlay { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 12; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    -moz-transition: opacity .5s cubic-bezier(0.0,0.0,0.2,1); 
 
    -webkit-transition: opacity .5s cubic-bezier(0.0,0.0,0.2,1); 
 
    transition: opacity .5s cubic-bezier(0.0,0.0,0.2,1); 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
    -webkit-background-size: cover; 
 
} 
 

 
.ytp-button:not([aria-disabled=true]):not([disabled]):not([aria-hidden=true]) { 
 
    cursor: pointer; 
 
} 
 
.ytp-small-mode .ytp-large-play-button { 
 
    width: 42px; 
 
    height: 30px; 
 
    margin-left: -21px; 
 
    margin-top: -15px; 
 
} 
 
.ytp-large-play-button { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 68px; 
 
    height: 48px; 
 
    margin-left: -34px; 
 
    margin-top: -24px; 
 
    -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); 
 
    -webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); 
 
    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); 
 
} 
 
.ytp-button { 
 
    border: none; 
 
    background-color: transparent; 
 
    padding: 0; 
 
    color: inherit; 
 
    text-align: inherit; 
 
    font-size: 100%; 
 
    font-family: inherit; 
 
    cursor: default; 
 
    line-height: inherit; 
 
} 
 

 
.html5-video-player svg { 
 
    pointer-events: none; 
 
} 
 
.ytp-large-play-button-bg { 
 
    -moz-transition: fill .1s cubic-bezier(0.4,0.0,1,1),fill-opacity .1s cubic-bezier(0.4,0.0,1,1); 
 
    -webkit-transition: fill .1s cubic-bezier(0.4,0.0,1,1),fill-opacity .1s cubic-bezier(0.4,0.0,1,1); 
 
    transition: fill .1s cubic-bezier(0.4,0.0,1,1),fill-opacity .1s cubic-bezier(0.4,0.0,1,1); 
 
    fill: #1f1f1f; 
 
    fill-opacity: .81; 
 
} 
 
.ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg, .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg { 
 
    -moz-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1); 
 
    -webkit-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1); 
 
    transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1); 
 
    fill: #cc181e; 
 
    fill-opacity: 1; 
 
}

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"> 
 
<div class="ytp-thumbnail-overlay ytp-cued-thumbnail-overlay" data-layer="4" style="background-image: url(&quot;https://i.ytimg.com/vi/FKWwdQu6_ok/hqdefault.jpg&quot;);"><button class="ytp-large-play-button ytp-button" aria-label="İzle: Hillbilly Hip Hop"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.81"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg></button></div>

Answer 1

Если я правильно понял ваш вопрос, вы хотите играть Youtube видео на изображения нажмите и изображение должно быть поверх видео. Вот пример того, как вы можете это сделать - Play Video

HTML

<div id="youtube-video"> 
    <a id="play-video" href="#" style="background-image: url('http://devfloat.com/wp-content/uploads/2014/01/beawesome-wallpaper.jpg');"></a> 
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/zKIMNgYrzoE" frameborder="0" allowfullscreen></iframe> 
</div> 

CSS

#youtube-video { 
    position: relative; 
    display: inline-block; 
} 
#play-video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

JQuery

$('#play-video').on('click', function(ev) { 
    $(this).hide(); 
    $("#video")[0].src += "?rel=0&autoplay=1"; 
});