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.

 

HTML
 <div class=’controls’>

 <div class=’vidBtn’ id=’playBtn’>

PLAY

</div>

<div class=’vidBtn’ id=’stopBtn’>

STOP

</div>

</div>

 

CSS

.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;

}

JavaScript

function init(){

var btnPlay = document.getElementById(‘playBtn’);

var btnStop = document.getElementById(‘stopBtn’);

btnPlay.addEventListener(‘click’, function(ev){

window.youtubeVideos[‘L1bruVSY8LE’].playVideo();

});

btnStop.addEventListener(‘click’, function(ev){

window.youtubeVideos[‘L1bruVSY8LE’].pauseVideo();

});

}

init() ;

Close Menu
Close Panel