<div class="embed-responsive embed-responsive-16by9">
<div id="player" class="embed-responsive-item"></div>
<div class="pause-click"></div>
<div class="play-click active"></div>
</div>
<script>
var tag = document.createElement('script');
tag.src = "
https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: {
'controls': 2,
'fs': 0,
'showinfo': 0,
'rel': 0,
'autoplay': 0,
'modestbranding':1
},
videoId: 'rD0U6MX8x_c',
events: {
//'onStateChange': onPlayerStateChange,
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
$('.play-click').click(function() {
player.playVideo();
$(this).removeClass('active');
$('.pause-click').addClass('active');
});
$('.pause-click').click(function() {
player.pauseVideo();
$(this).removeClass('active');
$('.play-click').addClass('active');
});
}
</script>
<style>
.play-click,
.pause-click {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 60%;
z-index: 10;
cursor: pointer;
}
.play-click.active,
.pause-click.active {
z-index: 15;
}
</style>