Skip to content

devinchen/videojs-youtube

 
 

Repository files navigation

YouTube Playback Technology
for Video.js Build Status

Selenium Test Status

YouTube playback technology for the Video.js player.

Install

You can use bower (bower install videojs-youtube), npm (npm install videojs-youtube) or the source and build it using grunt. Then, the only file you need is dist/vjs.youtube.js.

Example

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="https://vjs.zencdn.net/4.12/video-js.css" />
  <script src="https://vjs.zencdn.net/4.12/video.js"></script>
  <script src="vjs.youtube.js"></script>
</head>
<body>
  <video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup='{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }'>
  </video>
</body>
</html>

See the examples folder for more

How does it work?

Including the script vjs.youtube.js will add the YouTube as a tech. You just have to add it to your techOrder option. Then, you add the option src with your YouTube URL.

It supports:

Additional Options

This plugin exposes the following additional player options:

  • ytcontrols (Boolean): Display the YouTube player controls instead of the Video.js player controls. (default false)
  • ytFullScreenControls (Boolean): Show the fullscreen controls on the default youtube player controls. Also enables double click to fullscreen. (default true)
  • quality (String): Set the default video quality. Should be one of 1080p, 720p, 480p, 360p, 240p, 144p.
  • playsInline (Boolean): Sets the playsinline YouTube player parameter to enable inline playback on iOS
  • forceHTML5 (Boolean): Forces loading the YouTube HTML5 player (default true)

##Special Thank You Thanks to Steve Heffernan for the amazing Video.js and to John Hurliman for the original version of the YouTube tech

About

YouTube playback technology for Video.js

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.3%
  • HTML 2.7%