/videojs-youtube

YouTube playback technology for Video.js

Primary LanguageJavaScript

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.5.1/video-js.css" />
  <script src="https://vjs.zencdn.net/4.5.1/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)
  • 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)
  • forceSSL (Boolean): Forces loading the YouTube API over https (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