Youtube custom controllers
<div class="col-xs-12 wrapperVideoWrapper">
<div class="videoWrapper">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/Lrld70lqLn0?enablejsapi=1&rel=0&controls=0&showinfo=0'" frameborder="0" allowfullscreen></iframe>
<div id="pause_button" class="pause_btn"></div>
</div>
<div id="play_button" class="play_btn"></div>
</div> <!-- wrapperVideoWrapper -->
<script type="text/javascript">
//Script fo Play Button
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
//PLAY
jQuery('#play_button').on("click", function() {
player.playVideo();
jQuery(this).fadeOut();
jQuery('#pause_button').fadeIn();
});
//PAUSE
jQuery('#pause_button').on("click", function() {
player.pauseVideo();
jQuery(this).fadeOut();
jQuery('#play_button').fadeIn();
});
}
//fin Play Button
</script>