I have a View that shows various nodes and whatever YouTube videos they have associated with them. That works great. I have YouTube Preview images showing in a grid. What I'm trying to do in Views is have these YouTube preview images open in a Colorbox, with the YouTube Video ready to play.

I can add the colorbox-load class to my Views easy. But what I can't figure out is how to insert a Token with each YouTube video' URL.

I am using this: http://www.youtube.com/embed/[NEED TOKEN HERE]?rel=0&width=480&height=390&iframe=true"

Within Views, I need to insert that missing token- the unique ID that points to each YouTube Video. Is there a video_id token?

I hope that makes sense, I'm having trouble finding a solution.

Files: 
CommentFileSizeAuthor
#25 colorbox video.PNG198.21 KBbianchi

Comments

I guess another way of saying this: If I decide to use YouTube Preview Image, can I link that image to the original YouTube video? If so, how?

If I can figure this part out, I hopefully can figure out the rest.

Have you looked into theming the field template?

You can to this with colorbox trigger field.
Add the video field twice to your view and exclude both from display. for one set formatter to be preview image for the other an actual video.
Add a colorbox trigger field and set the preview field as your colorbox trigger and within the text area of the colorbox insert the token for actual Video field.

You will get an image which links to colorbox which displays the youtube video.

Here is my first crack at listing the instructions:

How To Use Colorbox With Media Youtube Module

These instructions assume you have installed the Media module, the Colorbox module, and the Youtube Media module.

  1. Create a view.
  2. Add a page view.
  3. Save your view.
  4. Edit the view you just saved.
  5. Under format, set your view to use fields.
  6. Add two video fields (usually called Content: Video). Set both fields to be excluded from the display.
  7. For the first of the video fields, set it to your preview settings. (This will be the thing the visitor clicks on.)
  8. For the second of the video fields, set it to how the video should look.
  9. Add your Colorbox trigger field.
  10. In the settings for the Colorbox trigger, set the trigger field to the preview field.
  11. In the pop up text area, set the token to the full video view (the second field you added).
  12. You will want to set the width and height settings of the video popup.
  13. Save your view and test.

Are these clear enough? I will want to add a few more details but I will need to review it later - I wanted to get this out of my head before I forgot it all. It is NOT perfect yet and I will add some screenshots as I tend to learn visually.

I suspect this will work for any field data in D7 as well.

Hi,
Thank you for the tutorial. Is it possible to create link that wil trigger colorbox to open video? I cannot get it working. Thank you very much.

It should be possible. You could re-write the field to use a text link rather than the thumbnail and use the excluded tokens to build your text link.

Thank you for following up on this. I had tried a solution like in #4, but without success, have you confirmed that this works?

What I ended up doing is make a field template, and extract just the unique ID from a YouTube URL, and then create my thumbnail image and make the Colorbox popup within the code. Something like this,

$output1 = '<a href="http://www.youtube.com/v/'.$output.'?fs=1&width=640&height=480&iframe=true" class="colorbox-load">
<img src="http://img.youtube.com/vi/'.$output.'/0.jpg" width="200" height="150"/></a>';
where my $output variable is originally the YouTube VID.

Just asking to see if I understand correctly:

With Emfield and Media Youtube in 6.x one could add an embedded video field in a content type, and have it display in a Colorbox if desired.

Now the recommended approach is the Media module and using the file field type, however display in a Colorbox is currently unavailable?

#4 for worked for me, thanks.

Except for one problem - the view still displays even when it's empty ( ??? ). I can't figure out how to fix this.

This solution can work fine if you modify the point 7 and 8.

7.For the first of the video fields, set it to your preview settings. (This will be the thing the visitor clicks on.)
8.For the second of the video fields, set it to how the video should look.

for this

7. For the first of the video fields, set it to how the video should look. (This will be the thing the visitor will see when clicks on the thumbnail).
8. For the second of the video fields, set it to your preview settings. (This will be the thing the visitor clicks on.).

and go to colorbox trigger in Popup field add this replacement token [field_video_youtube](this correspond to the point 7).

Also you need to setup Media » File types » Manage file display and select your preferred setting for each display.

I Hope it works for you, that work for me.

Sorry, gang, I missed the updates on this thread. Let me review and post an updated list. It may be worth it to include some links/quick tutorials about tokens and how the rewrite features work? I take this for granted since I do it all the time... thoughts?

A quick tutorial for rewrite features and light-box integration would be very useful. Thanks in advance.

This is a very useful thread - that step by step should be moved to documentation for this module, since it's basically the how-to use views integration.

One problem I'm having - a gallery of youtube videos from Media module. Displays Preview mode to begin with, and colorbox trigger makes those thumbnails into links to load the "original" version in a colorbox. So far so good.

But if I set the "original" size to autoplay the video, when I arrive at the page ALL of the videos start invisibly auto-playing at once. I'm still just looking at those Preview thumbnails, but I can hear the audio for all the videos in the View playing at once. I guess colorbox is loading all the iframes somewhere hidden? Anyone else have this trouble with colorbox-trigger?

You could try the Media Colorbox module. It doesn't preload the content for the Colorbox and can be used as a formatter for file entity fields (Media fields).

@Shane Birley The missing manual! Thank you for this!

Version:7.x-1.x-dev» 7.x-1.0-alpha2

@Shane Birley, your method worked like a charm, however:
I was having the same problem as @drupalchick.
The color box trigger field kept showing up even if youtube fields were empty.

My solution was to add a "Filter Criteria" for "YourYoutubeFildeName:delta" and set the criteria to: "Is Not Empty (NOT NULL)".
This made the view disappear when the node didn't contain any video.

How can I add the description under the picture with views? I have created an additional field for this purpose in my file types, but I can not figure out how to display this field.

Thank you!

Title:Getting Media, YouTube, Views and Colorbox working togetherAll the videos autoplay while they are hidden, before the colorbox loads
Priority:Normal» Major

Did you ever find a solution to this problem? I've been trying to solve this problem for 2 days now and can't figure it out. The one thing I noticed is that it does this in Chrome and Safari but not on Firefox.

The media colorbox fixes the autoplay issue BUT it ignores all the other tokens I put into the pop-up text area and only loads the video token. Additionally it does it at a irregular size completely changing the sizes and adjustments of the trigger.

Thought about it and realized that I can probably turn off the autoplay in files and use a javascript command to play the video when the trigger is clicked. The problems is that I did an extensive search on that and can't find nothing that explains how to do this in drupal 7 views. I've only seen explanation in typical html but nothing for drupal.

Title:All the videos autoplay while they are hidden, before the colorbox loadsGetting Media, YouTube, Views and Colorbox working together
Version:7.x-1.0-alpha2» 7.x-2.x-dev
Priority:Major» Normal

Setting the title back, since the autoplay issue is fixed. I would suggest that everyone update to 2.x-dev, which has removed a lot of js that can interfere with things like this, and try to find a solution from there.

I have created a view (a block) using the colorblox trigger and the 2 youtube video fields set to excluded. The preview image shows up in the final view, but it is not wrapped in the anchor tag created by the colorbox trigger. Any ideas?

I have tried #4 on Drupal 7, the link directly go to Youtube page, it's not directing into colorbox,
do you have idea why ?

#7, does the class="colorbox-load" work ?

StatusFileSize
new198.21 KB

I want to create just like in the picture,
I've done it on plain html and colorbox,

How can I integrate it with view,media and colorbox ???
It's not straigforward alike in html

I'm trying to get a text link to open in a shadowbox, but can't seem to find the token to get the video URL or the video unique ID in the view. The field is a Filefield with a Youtube video. Any ideas?

Thanks

Did you manage to get it working?

If so, can you mention your display settings?

Thanks

Edit: Got it working after all. Also got caption working in the Media Colorbox module.

#4 worked for me, or at least, it would have worked, but I have multiple values and i have to show them as a gallery. If i follow #4 step by step, it open the colorbox but, obviously, with all the videos. Is there a solution for this?

Hope this helps!

After much frustration I FINALLY have YouTube preview thumbnails linking to modal shadowbox. I am using Media and Media: YouTube widgets on a file field. For complete awesomeness:

(assumes Media and Media: YouTube modules are installed)
1. install or upgrade to shadowbox 7.x-4.xbeta4: http://drupal.org/project/shadowbox
2. enable "Shadowbox: File formatter" in your modules list
3. install this patch: http://drupal.org/node/1490082#comment-5753712

Now go to your filefield display settings and change the formatter to "shadowbox", choose settings, and enjoy.

:-)

Pff this is wierd...
if I use a global text link as trigger the link to colorbox works
But when I use the content video preview field there is no colorbox link on the video preview image..
When looking in the generated html I see that the href is opend and closed before the image?!....

Drupal 7.17
Colorbox plugin 1.3.19
Media: YouTube 7.x-2.0-rc1+11-dev

Any one got this to work ?

There is a simpler way to add a link that displays youtube videos in a pop up colorbox window.

Use the link field type. (http://drupal.org/project/link)

Install the colorbox module and the link module.

Once installed, add the link field to your content type.

Edit the link field/widget:
- add a static link title like 'watch video' or allow user to create her own title.
- Add 'colorbox-load' (without brackets) to the 'additional css class' field.
-create a default link that includes the necessary color box url paramaters. The default link should look like this: http://www.youtube.com/v/[PUT-VIDEO-ID-HERE]?autoplay=1&width=1000&heigh...
- Go back to the help text box at the top and explain that the [put-video-id-here] part of the url needs to be replaced with the unique you tube id.

That's it! Now you have a link called 'watch video' that plays your youtube video in a colorbox overlay / pop up. Works WITHOUT the media, embed media, or youtube media modules.

Nice solution Robbdavis, but i need thumbnails not text links :-)

How can I use the video thumbnail from the youtube video to link the video to display in a color box?
The idea is to have a view with a grid of youtube video's and when you click on one of the tumbnails that youtube video should play in a colorbox (with some extra content on the side like the title and a description etc)

OK @ #4 Shane
got colorbox(trigger) with youtube media with tumbnail to work,

Rewrite the video field where you generate the code for the thumbnail:
check "Strip html tags"
and "Preserve certain tags" <img> <h2>
(you need to add < h2 > otherwise it will show the title next to the image)

that's all :-)

Hey @debodebo I encountered the same issue as you - all videos playing simultaneously on loading the page in Chrome (not in Firefox). Did you find any solution / workaround to this problem?

@jorisx just to confirm that solution #4 will only work if combined with #33

@Shane Birley

I followed the steps faithfully and it works pretty much as is.
For the first video field in(that you mention in step 7). I have am using the link formatter rewritten like so:

<span class="vid-links">
<span class="vid-links-img"></span>
<span class="vid-links-txt">Video</span>
</span>

And I have some css in place to give it a background image (icon).

This all works well. Thanks
A YT video opening in a colorbox (from a view) -- Yay!

The Chrome autoplay bug issue is making this really difficult to implement. Based upon the comments it appears that nobody has been able to find a workaround yet.

From what I'm thinking, implementing a javascript to turn autoplay on upon click of the colorbox is the only solution that seems like it would work within this context.

For some reason very few of the other lightbox solutions including media colorbox appear to be working with media youtube and the video field. This colorbox trigger solution would work if Chrome didn't start autoplaying the youtubes.

I will share any progress I can make on this, just thought I'd also check and see if anyone else came up with a workaround or had any advice.

@robbt
I do not see this behavior
all videos playing simultaneously on loading the page in Chrome (not in Firefox)
in Chrome.

I have a page with a views block in the content area.
This view has half a dozen Youtube videos that show in a colorbox. They only start playing when the colorbox link is clicked.

I didn't have this problem on Chromium but I did on Chrome version 26.

Anyways we developed a work-around via an attachment javascript that detaches the youtube-file-field and reattachs it upon clicking on the thumbnail image. This worked fine except for it kept replaying the videos after close so I had to attach onto colorbox_inline.js a onClosed function that detaches the youtube-file-field again when the window is closed. This involved modifying the colorbox module code itself, so maybe there is a better way of doing this, but it worked and here's the code that me and mattcasey wrote (mostly him).

Put this into the theme in a js file. We used main.js

// Chrome fix for Colorbox autoplay video
$('.file-video-youtube').each(function(i, elm) {
var parent = $(this).parent();
var thumbnail = $(this).parents('.field-content').children('.colorbox-inline');
var video = $(this).detach();
thumbnail.click(function(){
parent.append(video);
});
});

And then I modified the module/colorbox/js/colorbox_inline.js
and added
onClosed:function(){ $('.file-video-youtube').detach(); },
to line 34 during the .colorbox-inline call. I can write a patch but since this isn't likely a piece of code for general use I don't think it would be applicable for most.

Hope this helps anyone else that runs into this issue. I also added some code to make the youtube in colorbox responsive but I'm not sure where to share that.

Thank you necromancerfinal , empty field problem fixed..

Status:Active» Fixed

If you're looking for an easy solution I'd suggest checking out the Nivo Lightbox module which can turn any image/file field or file into a lightbox and allows you to specify which file view modes are used to generate both the target and lightbox.

For YouTube videos, I'd suggest using a view mode which displays a preview of the file for the "target" and a view mode which displays the URL to the file as the "lightbox". The Nivo Lightbox library will do the rest!

Thanks Devin, this looks great.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Issue summary:View changes

Add detail

#4 and #33 worked for me. Had all of the tags stripped on the preview and then it would fit into the popup link.