Solved: How to embed Youtube videos [#1368274]

There are a bunch of threads around embedding youtube videos, I've finally figured out the specifics of the problem and what we can do to resolve it for good.

The problem

A person visits this (http://www.youtube.com/watch?v=hYVGKdop63Y) youtube page and they want to embed a link that opens in a colorbox window. So they use the following code.

<a class="colorbox-load" href="http://www.youtube.com/watch?v=hYVGKdop63Y?fs=1&amp;width=640&amp;height=480&amp;hl=en_US1&amp;iframe=true&amp;rel=0">Kendra Grittani on stage at Koerner Hall (broken)</a>

This gives less than desirable results.
Colorbox

The solution

The solution is all about the "href". You need to change "youtube.com/watch?v=hYVGKdop63Y" to "youtube.com/v/hYVGKdop63Y"

This would be the resulting code that actually works.

<a class="colorbox-load" href="http://www.youtube.com/v/hYVGKdop63Y?fs=1&amp;width=640&amp;height=480&amp;hl=en_US1&amp;iframe=true&amp;rel=0">Kendra Grittani on stage at Koerner Hall (working)</a>

A proposed workaround!

To fix this we could write a bit of js that looks for a.colorbox-load and replace any occurance of youtube.com/watch?v= with youtube.com/v/ in the href tag.

I'm no JS guru. If someone is able to whip up some better code to share, please do.

(function ($) {
	
	$('a.colorbox-load').each(function(){
	  var newUrl = $(this).attr('href').replace('youtube.com/watch?v=', 'youtube.com/v/');
	  $(this).attr('href', newUrl);
	});

})(jQuery);

Notes

For this to work you have to have the "Enable Colorbox load" setting enabled here "admin/config/media/colorbox"
Colorbox settings

You also have to make sure, if you're using certain filtering modules, that your text format allows the following classes to be assigned "colorbox-load, init-colorbox-load-processed-processed, cboxElement".

If you want your video to autoplay just add ";autoplay=1" to the end of the URL.
Ex. "http://www.youtube.com/v/hYVGKdop63Y?fs=1&width=640&height=480&hl=en_US1...".

Comment	File	Size	Author
#2	qBZqRr.jpg	45.05 KB	bryancasler
#3	colorbox-title.png	101.23 KB	bryancasler
	colorbox-settings.png	10.14 KB	bryancasler
	colorbox.png	12.65 KB	bryancasler

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #0.0

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 08:44

Issue summary:

View changes

Formatting cleanup

Comment #0.1

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 08:45

Issue summary:

View changes

Adding info

Comment #0.2

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 08:45

Issue summary:

View changes

Cleanup

Comment #0.3

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 08:46

Issue summary:

View changes

Cleanup

Comment #0.4

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 09:22

Issue summary:

View changes

Cleanup

Comment #0.5

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 09:27

Issue summary:

View changes

Added info about autoplay

Comment #0.6

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 10:24

Issue summary:

View changes

Cleanup

Comment #1

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 10:26

I enlisted support from stack exchange around the JS question and this is what they suggested.

(function ($) {
	
	$('a.colorbox-load').each(function(){
	  var newUrl = $(this).attr('href').replace('youtube.com/watch?v=', 'youtube.com/v/');
	  $(this).attr('href', newUrl);
	});

})(jQuery);

Comment #2

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 21:24

File	Size
qBZqRr.jpg	45.05 KB

Another problem is that now a colorboxed youtube video will not stack properly when other youtube videos are embedded in the page. The result is just nasty looking.

Example
Overlay Problem

There are some people already trying to tackle this. For example this code seems to work well enough.

$("iframe").each(function(){
  var ifr_source = $(this).attr('src');
  var wmode = "wmode=transparent";
  if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
  else $(this).attr('src',ifr_source+'?'+wmode);
});

We should also account account for other embedded flash objects

//http://stackoverflow.com/questions/2704485/how-to-add-wmode-transparent-for-every-flash-object-ebmed-tag
$("object").append('<param name="wMode" value="transparent"/>');

Comment #3

bryancasler CreditAttribution: bryancasler commented 12 December 2011 at 11:26

File	Size
colorbox-title.png	101.23 KB

The last problem I see is that there is no title in the colorbox modal, but we should be able to grab that from the youtube video. This is the one thing I have no clue on how to do so feedback is REALLY needed. The other option would be to somehow specify the title in the URL we craft. I also have no idea how to approach that method.
Colorbox Title

Comment #4

MarkEdwards91 CreditAttribution: MarkEdwards91 commented 10 January 2012 at 00:34

Great tutorial, but I'm a little confused as to where exactly that javascript needs to go in order to change the youtube href. Can you please clarify this for us noobs?

Comment #5

bryancasler CreditAttribution: bryancasler commented 10 January 2012 at 02:58

@MarkEdwards91 Here is the JS file I'm using, just add scripts[] = colorbox-youtube-cleanup.js to your theme's .info file.

Title: colorbox-youtube-cleanup.js

(function ($) {
	
	//Correct youtube URL's to one's that work with colorbox
	//http://drupal.org/node/1368274#comment-5353436
	$('a.colorbox-load').each(function(){
	  var newUrl = $(this).attr('href').replace('youtube.com/watch?v=', 'youtube.com/v/');
	  $(this).attr('href', newUrl);
	});
	
	//Force youtube's iframe embed to use wmode="transparent"
	//http://drupal.org/node/1368274#comment-5353632
	//http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/
	$("iframe").each(function(){
      var ifr_source = $(this).attr('src');
      var wmode = "wmode=transparent";
      if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
      else $(this).attr('src',ifr_source+'?'+wmode);
	});
	
	//Force all embedded videos to use wmode="transparent"
	//http://stackoverflow.com/questions/2704485/how-to-add-wmode-transparent-for-every-flash-object-ebmed-tag
	$("object").append('<param name="wMode" value="transparent"/>');

})(jQuery);

Comment #6

kricklin CreditAttribution: kricklin commented 14 January 2012 at 18:48

Issue tags:

+youtube, +colorbox

This is a great post/thread and I'm glad I came upon it as I'm experimenting with Colorbox again and found a great overview of the YouTube players and parameters at Google Code - YouTube Embedded Player Parmaters that helped me get a better understanding of what the YouTube player parameters are and how I can use them with Colorbox.

Here is an example of a Colorbox URL that I've set up in a block that protects the user's privacy (no cookies):

<a href="http://www.youtube-nocookie.com/embed/hYVGKdop63Y?width=853&height=480&iframe=true&autoplay=1" class="colorbox-load"><img src="/sites/default/files/media/images/sidebar/video_image.png" alt="General Video 2011" width="240" height="132"></a>

When the user clicks on the image (video_image.png) a Colorbox window opens and automatically plays the video at 853 wide x 480 high. YouTube controls are available including full-screen.

A nice benefit is the href tag doesn't utilize the "v" option to play the video.

Comment #7

jpournelle CreditAttribution: jpournelle commented 14 January 2012 at 22:36

Hey #6 thanks. Just replaced your URL variables with mine & it worked like a charm. Awesome!

Comment #8

kricklin CreditAttribution: kricklin commented 16 January 2012 at 01:51

Hi JPournelle -

Thanks so much. I'm glad you found the snippet helpful and I appreciate your feedback. The link in #6 really helped me make progress with using Colorbox effectively (at least with YouTube video).

Comment #9

joecanti CreditAttribution: joecanti commented 3 February 2012 at 13:08

Top man kricklin in post #6 - works great.

Comment #10

criscom

Graz, Austria

CreditAttribution: criscom commented 6 February 2012 at 10:40

Just use YouTube's embed link: http://www.youtube.com/embed/KtahCCZywOI
No need to use JavaScript here. See here too: http://drupal.org/node/1417302#comment-5564002

Comment #11

bryancasler CreditAttribution: bryancasler commented 6 February 2012 at 17:20

criscom: This is not something I can expect my users to do. They are going to copy and paste the youtube URL and I need to support that.

Comment #12

criscom

Graz, Austria

CreditAttribution: criscom commented 23 February 2012 at 18:22

@animelion: Yes, I can see that and agree. Did you get it to work with the "normal" youtube URL?

Comment #13

bryancasler CreditAttribution: bryancasler commented 29 February 2012 at 23:07

I was able to get it working well enough using my steps above, but on newer projects I've switched to using this module http://drupal.org/project/media_colorbox

Comment #14

lsolesen CreditAttribution: lsolesen commented 25 June 2012 at 07:50

Status:

Active

» Closed (fixed)

Comment #15

oystercrackher CreditAttribution: oystercrackher commented 27 November 2012 at 19:12

@animelion

Can you please advise how you were able to get videos working with colorbox using media_colorbox? I have spent several hours and cannot get them to display in colorbox.

Please advise.

Thanks