pablocattaneo
4/25/2016 - 8:38 PM

Youtube custom controllers

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&amp;rel=0&amp;controls=0&amp;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>