Play and Stop Video of Iframe API

Description

YouTube videos are embedded with the Iframe API. When the button is clicked the YouTube element can be found with the ID of the video and will be played in case of clicking the left button or stopped when selecting the right one.

<div class="controls">
&nbsp;
<div id="playBtn" class="vidBtn">PLAY</div>
&nbsp;
<div id="stopBtn" class="vidBtn">STOP</div>
&nbsp;
</div>

.vidBtn{
background:#0065AD;
width:180px;
height:180px;
border-radius:90px;
color:#ffffff;
display:flex;
justify-content:center;
align-items:center;
font-family:sans-serif;
margin: 30px;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
}
.controls{
display:flex;
}

function init(){
var btnPlay = document.getElementById('playBtn');
var btnStop = document.getElementById('stopBtn');
btnPlay.addEventListener('click', function(ev){
window.youtubeVideos['YouTube_Video_ID'].playVideo();
});
btnStop.addEventListener('click', function(ev){
window.youtubeVideos['YouTube_Video_ID'].pauseVideo();
});
}
init() ;

Close Menu
Close Panel