Skip to content

Instantly share code, notes, and snippets.

@bryanrsebastian
Created September 22, 2017 08:18
Show Gist options
  • Save bryanrsebastian/f3d23ab239661949561d1d830fc4128f to your computer and use it in GitHub Desktop.
Save bryanrsebastian/f3d23ab239661949561d1d830fc4128f to your computer and use it in GitHub Desktop.
Play youtube by clicking the custom icon.
/* YouTube API */
var tag = document.createElement( 'script' );
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName( 'script' )[0];
firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );
var player;
onYouTubeIframeAPIReady = function () {
player = new YT.Player( 'player', {
height: '375',
videoId: $( '#video' ).data( 'videoid' ), // youtube video id
playerVars: {
'autoplay': 0,
'rel': 0,
'showinfo': 0
},
events: {
'onStateChange': onPlayerStateChange
}
} );
}
onPlayerStateChange = function (event) {
if ( event.data == YT.PlayerState.ENDED ) {
$( '#start-video' ).fadeIn( 'normal' );
}
}
$( document ).on('click', '#start-video', function (e) {
e.preventDefault();
$( this ).fadeOut( 'normal' );
player.playVideo();
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment