enabling youtube playback with video.js wrapper

Question

Okay SO I am trying to wrap/skin, a youtube video with the video.js project to enable a similar look and feel to other video's on my site. Now according to the docs which you can see here So with that I have a header set up that properly plays and skins the video tag for the example_video_1 as in the getting started section However when trying to use a video with a youtube source I have a this html element:

 <video id="example_video_1" class="video-js vjs-default-skin"
   controls preload="auto" width="640" height="264"
  poster="http://ec2-54-227-116-247.compute-1.amazonaws.com/models/site-     templates/images/cover_img/ted_cover.jpg"
  data-setup='{"techOrder": ["youtube"]}'>
  <source src="http://www.youtube.com/watch?v=xYemnKEKx0c" type='video/youtube' />
  </video>

Now tMy cover image is displayed however no play button that shows. Am I missing something in the docs? Or have I misunderstood the docs and the youtube is just an example and I still need to actually write an API wrapper to make this work and they have just showed this as an example how-to ? any help or insight would be greatly appreciated!

This question has also been asked here 6 months ago prior to the release of video-js v4

Answer 1

You are probably generating errors in the javascript console, as videojs doesn't know how to play youtube videos by default.

That documentation looks incorrect to me. I don't see any actual code in the github repo (outside the docs) that knows how to play a youtube video.

It also sounds like the pull request referenced in the question you linked to got closed with the suggestion to do it as a plugin - which appears to have happened.

Using the plugin is pretty straight forward. In addition to including the video.js script, you'll also include the plugin script from https://github.com/eXon/videojs-youtube:

<script src="js/video.js"></script>
<script src="js/media.youtube.js"></script>

And the only change you have to make to your video tag is to include the src in the data-setup json:

<video id="example_video_1" class="video-js vjs-default-skin" controls 
       preload="auto" width="640" height="264"
       poster="http://ec2-54-227-116-247.compute-1.amazonaws.com/models/site-templates/images/cover_img/ted_cover.jpg" 
       data-setup='{"techOrder":["youtube"], "src":"http://www.youtube.com/watch?v=xYemnKEKx0c"}'>
</video>

Here's a working example. Note that this example references the rawgithub plugin js, so you'll want to download a local copy of course.

I also noticed that the poster doesn't load correctly. That's a bug in the plugin, but there's an immediate workaround if you're interested. See this example