Repository files navigation

YouTube Player API wrapper like HTML5 video API.

• YouTube Player API Reference for iframe Embeds - YouTube — Google Developers

Seeexamples/basic.html.

<divid="my-youtube-player"data-youtube-videoid="KFstP0C9sVk"></div>

varelPlayer=document.getElementById('my-youtube-player');youtube({el:elPlayer});

Seeexamples/player.html.

<divclass="js-player"></div><div><buttonclass="js-play"disabled>Play</button><buttonclass="js-pause"disabled>Pause</button></div>

(function(){varelPlayer=document.querySelector('.js-player');varelPlay=document.querySelector('.js-play');varelPause=document.querySelector('.js-pause');varvideoId='KFstP0C9sVk';varplayer=youtube({el:elPlayer,id:videoId}).on('ready',function(event){player.play();}).on('play',function(event){elPlay.disabled=true;elPause.disabled=false;}).on('pause',function(event){elPlay.disabled=false;elPause.disabled=true;}).on('ended',function(event){player.play();});elPlay.addEventListener('click',function(event){player.play();});elPause.addEventListener('click',function(event){player.pause();});})();

• options.el ... {Element} element that will be replaced with YouTube Player.
• options.id ... {String} video ID like"KFstP0C9sVk".

Additionally, every Youtube Player Parameters can be passed as options.Check the Youtube documentation for the full list

Those options accepts the values stated in the youtube documentation, but can also accept booleans in place of1 (true) and0 (false).Some player parameters exemples :

• options.autoplay ... {Boolean | 0 or 1} start playing automatically if true or 0. Optional. Default is0.
• options.controls ... {Boolean | 0 or 1} show controll UIs if true. Optional. Default is1.
• options.disabledkb ... {Boolean | 0 or 1} enable or disabled keyboard control. Optional. Default is0.
• options.start ... {Number} specify a start time for the video. Optional. Default isundefined.
• options.end ... {Number} specify a start time for the video. Optional. Default isundefined.
• options.showInfo ... {Boolean | 0 or 1} show video info (title, author...). Optional. Default is1.
• returns ... {Player}

varel=document.querySelector('#the-player');varvideoId='KFstP0C9sVk';varplayer=youtube({el:el,id:videoId});player.addEventListener('ready',function(event){this.play();});

Start playing a video.

Stop playing a video.

Set an event listener.

• type ... {string} event name.
• listener ... {Function} event listener.

Remove an event listener.

• type ... {string} event name.
• listener ... {Function} event listener.

Shortcut foraddEventListener(). This method is chainable.

• type ... {string} event name.
• listener ... {Function} event listener.
• returns ... {Player}

Shortcut forremoveEventListener(). This method is chainable.

• type ... {string} event name.
• listener ... {Function} event listener.
• returns ... {Player}

Remove player.

The target element is restored, event listeners are detached, player properties are cleared.

Original YouTube Player object.

• type ... YT.Player

How long time in seconds of the currently playing video.

• type ... Number

YouTube.com URL for the currently loaded/playing video.

• type ... String

True if playback is paused; false otherwise.

• type ... Boolean

True if playback has reached the end

• type ... Boolean

Properties are implemented as getter and setter functions.

varcurrentTime=player.currentTime;// getterplayer.currentTime=123;// setter

If you useyoutube.compat.js, these getter and setter are changed to just functions.

varcurrentTime=player.currentTime();// getterplayer.currentTime(123);// setter

• type ... Number

Returns the current playback position, in seconds, as a position between zero time and the current duration.

Can be set, to seek to the given time.

Updated with progress.

• type ... Number

Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest.

Can be set, to change the volume multiplier.

• type ... Boolean

Returns true if all audio is muted (regardless of other attributes either on the controller or on any media elements slaved to this controller), and false otherwise.

Can be set, to change whether the audio is muted or not.

• type ... Number

Returns the current rate of playback.

Can be set, to change the rate of playback.

This value is NOT available in compat mode. (Always1)

YouTube.com URL for the loaded/playing video.

Can be set, to change the video.

• type ... String

• ✔ = Compatible (or almost)
• △ = Similar (but not compatible)
• ✘ = Not supported
• ☆ = Original feature
• ? = Ah, let me see...

• IE 9+
• Modern PC Browsers

Use withyoutube.compat.js. Seeexamples/full-player.compat.html.

<scriptsrc="html5-youtube.js"></script><scriptsrc="html5-youtube.compat.js"></script><script>varplayer=youtube({ ...});</script>

Compatible mode forces some rules.

• options.autoplay is not available ininitializing.
• options.controls is not available ininitializing.
• Functional properties have another interfaces. Seeits section.

• 2015-10-04: v1.0.1
  • Update minified files (OMG)
  • Rename from "youtube.js" to "html5-youtube.js"
• 2015-09-29: v1.0.0
  • First Release

• MIT License

• by Ginpei
• GitHub:ginpei/html5-youtube.js
• Twitter:@ginpei_en 🇨🇦 or@ginpei_jp 🇯🇵