Skip to content

davehax/videojs-youtube

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Now fully support VideoJS 4.3.0!

Video.js - YouTube Source Support

Allows you to use YouTube URL as source with Video.js.

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:

Here is 3 examples:

  1. using autoplay/loop
  2. using YouTube controls
  3. using JavaScript events
<!DOCTYPE html>
<html>
  <head>
    <link href="video-js.min.css" rel="stylesheet" />
  </head>
  
  <body>
    <video id="vid1" src="" class="video-js vjs-default-skin" controls 
           preload="auto" autoplay="autoplay" loop="loop" width="640" height="360" 
           data-setup='{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }'>
    </video>
    <br />
    
    <video id="vid2" 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", "ytcontrols": true }'>
    </video>
    <br />
    
    <video id="vid3" src="" class="video-js vjs-default-skin" controls
           preload="auto" width="640" height="360">
    </video>
    
    <script src="video.min.js"></script>
    <script src="vjs.youtube.js"></script>
    <script>
    videojs('vid3', { "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }).ready(function() {
      // Cue a video using ended event
      this.one('ended', function() {
        this.src('http://www.youtube.com/watch?v=jofNR_WkoCE');
      });
    });
    </script>
  </body>
</html>

Additional Options

ytcontrols: Display the YouTube controls instead of Video.js.

Safari Glitch

If your video tag is empty (no space or new line before the closing tag), it will create a glitch with Safari. Instead of writing <video ...></video>, you should write <video ...> </video>.

##Special Thank You Thanks to John Hurliman for the original code on the old Video.js

About

Support YouTube source for Video.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.5%
  • CSS 8.5%