I just spent a few hours integrating YouTube support for Video.js. It does have support for YouTube per https://github.com/videojs/video.js/wiki/Plugins.

You'll find the js plugin here https://github.com/eXon/videojs-youtube (<< you'll need to download this)

You have to load the js in with drupal_add_js at some point in the page rendering. I'll post my sample code below.

I integrated the ability within the formatter to pass a string to the data-setup attribute of the video tag. WARNING! Because this is typically an admin specific access point and you're pretty much passing a small chunk of javascript in there is nothing filtering it. Check_plain isn't what we would want. Maybe filter_xss to prevent full scripts? I couldn't think of a good solution for security at the time. It may be a non issue since having access to set formatter settings is pretty much an admin thing. :)

So here's the steps.

1. Apply the attached patch. It was created on 3.x-dev at commit 6bd2beb6dd26d62bc3dd42e133c82a80c912ef09
2. Paste the following into the formatter at Manage Display settings for the given field. Yes, it does work with media_youtube module.

"techOrder": ["youtube"], "src": "$url"

3. Make sure you're loading vjs.youtube.js when needed. Here's my code. I only load the js file on nodes of type 'youtube'.

function mymodule_preprocess_page(&$vars) {
  // Adding vjs.youtube.js plugin for video.js
  if ($vars['node']->type == 'youtube') {
    $videojs_youtube = 'sites/all/libraries/vjs.youtube.js';
    if (!file_exists($videojs_youtube) && $vars['is_admin'] ) {
      drupal_set_message(t("Uh oh! VideoJS can't play YouTube! Missing vjs.youtube.js"), 'error');
      return;
    }
    // Chrome has an issue with playing YouTube via VideoJS
    // htt ps://code.google.com/p/chromium/issues/detail?id=17325
    drupal_add_js($videojs_youtube, 'file');
  }
}

Note above that I stuck vjs.youtube.js within sites/all/libraries/

Also note, that Chrome seems to have an issue with playing YouTube videos - see code comment (had to put a space in the url because of the text format converting urls)

Enjoy testing!

Jorrit, if you want me to push my modified branch up to my github repo so you can pull from it (if desired), just let me know.

CommentFileSizeAuthor
videojs-youtube.patch4.33 KBmattman
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Jorrit’s picture

What do users need to enter in the data setup field to get YouTube to work?
How would a user display a YouTube video with this patch?

chertzog’s picture

Status: Needs review » Reviewed & tested by the community

Works great! Also works in chrome (at least on mac).

fortis’s picture

// SFME
I created a small module that provides a formatter for the link field
https://github.com/imacoda/videojs_youtube

It requires videojs-youtube/vjs.youtube.js in libraries (you'll need to download it from https://github.com/eXon/videojs-youtube)

Status: Reviewed & tested by the community » Needs work

The last submitted patch, videojs-youtube.patch, failed testing.

alexander.sibert’s picture

I have Media, Media YouTube, Media Vimeo installed and want to use local uploaded, embed YouTube and Vimeo Videos with Video.js Player to have the same look. For YouTube, Vimeo etc. exist Plugins for Video.js.

The module output the type video/youtube and video/vimeo but i missing data-setup='{ "techOrder": ["youtube"] }'

https://github.com/eXon/videojs-youtube/blob/master/examples/autoplay.html
https://github.com/eXon/videojs-vimeo

ranavaibhav’s picture

Status: Needs work » Needs review

videojs-youtube.patch queued for re-testing.

Status: Needs review » Needs work

The last submitted patch, videojs-youtube.patch, failed testing.

VanD’s picture

Any updates on this?

Status: Needs work » Needs review

Amstercad queued videojs-youtube.patch for re-testing.

Status: Needs review » Needs work

The last submitted patch, videojs-youtube.patch, failed testing.

fortis’s picture

VanD, I will provide new patches soon

shevgeny’s picture

Still support module www.drupal.org/project/youtube ... :)