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.

CommentFileSizeAuthor
#25 colorbox video.PNG198.21 KBbianchi
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

minneapolisdan’s picture

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.

Shane Birley’s picture

Have you looked into theming the field template?

Maciej Lukianski’s picture

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.

Shane Birley’s picture

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.

loparr’s picture

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.

Shane Birley’s picture

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.

minneapolisdan’s picture

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.

marktheshark’s picture

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?

megan_m’s picture

#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.

oscar_arnulfo’s picture

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.

Shane Birley’s picture

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?

marktheshark’s picture

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

ohthehugemanatee’s picture

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?

kmadel’s picture

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).

cfbauer’s picture

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

Ismail Cherri’s picture

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.

dvega’s picture

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!

debo7debo’s picture

Title: Getting Media, YouTube, Views and Colorbox working together » All 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.

debo7debo’s picture

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.

RobW’s picture

Title: All the videos autoplay while they are hidden, before the colorbox loads » Getting 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.

mgladding’s picture

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?

bianchi’s picture

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 ?

bianchi’s picture

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

bianchi’s picture

FileSize
198.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

marktheshark’s picture

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

marktheshark’s picture

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.

w.menga’s picture

#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?

LeviThomason’s picture

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.

:-)

jorisx’s picture

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 ?

robbdavis’s picture

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.

jorisx’s picture

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)

jorisx’s picture

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 :-)

Lionsharz’s picture

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?

spanac’s picture

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

dadderley’s picture

@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!

robbt’s picture

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.

dadderley’s picture

@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.

robbt’s picture

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.

wooody’s picture

Thank you necromancerfinal , empty field problem fixed..

Devin Carlson’s picture

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!

minneapolisdan’s picture

Thanks Devin, this looks great.

Status: Fixed » Closed (fixed)

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

Anonymous’s picture

Issue summary: View changes

Add detail

cjamesrun’s picture

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

Lionsharz’s picture

Issue summary: View changes

Hey @ jorisx

I've stipped out the HTML tags and preserved <img> <h2> But I am using Wistia Videos as well as Vimeo. Vimeo works fine but when I open the colorbox the Wistia videos will not display - its just blank with a loading icon.

Any ideas?

chucklima’s picture

Another acknowledgement that #4 & #33 work.

Thanks!

nicodv’s picture

In case you use Video Embed Field, and you want to do the trick:
1. Create the view
2. Include the video field of your content
3. Rewrite Results
3.1. Mark "Output this field as a link"
3.2. Enter this on the link path: [video-thumbnail_path]
3.3. Mark "Use absolute Path"

PS: enable the "Enable Colorbox load" feature on the colorbox config (admin/config/media/colorbox)

END

Again, this is only if you use the Video Embed Field and Colorbox... just in case someone... :)

ph7’s picture

None of the above worked for me. So, here's another method.

Requirements: colorbox (sic!;), media_colorbox, media, media_internet, media_youtube, media_vimeo
(this will probably also work for the video_embed_field module, but I haven't tested it.

Prepare two display formats:
1) The one that comes with the Media Colorbox module (admin/structure/file-types/manage/video/file-display/colorbox)
Now, enable the regular video display formats for the Colorbox display: Youtube/Vimeo video
2) I used the Teaser display for the video thumbnails. media_youtube/vimeo come with their own formats: Youtube/Vimeo Preview Image
Enable these for Teaser (admin/structure/file-types/manage/video/file-display/teaser)
Select an image preset for each display format. You might want to create a dedicated Video preview imagecache preset, otherwise use the Thumbnail preset.

My use case required me to work with Panels and Views but I guess this method will also work for regular content display. Haven't tested it though.
Create a view and add your video field to the view. Select 'Media Colorbox' as display formatter for the field.
This display formatter will present you with two additional formatters:
1) File display: select Teaser
2) Colorbox view mode: select Colorbox
Save your view. It turned my view into a Content Pane, but Page or Block views should also work.

That's basically it.

Your content will now show a preview image of the video. When you click on it the actual video opens up in an nice inline pop-up!

The above describes a barebone conifiguration setup. You might want to tweak the configuration to fit your needs.

ec-adam’s picture

Confirming that #4 and #33 work, but you might want a few extra steps depending on your setup.

I'm using Views 7.x-3.11, Colorbox 7.x-2.9, and Media 7.x-2.0-beta1+9-dev.

Using 2 instances of your video field and stripping img & h2 from your preview was the key.

Setup:
On Content Type:
field_video

On View:
field_video (set to Rendered File, View Mode: Whatever you are using for your YouTube video preview). Rewrite output and Strip HTML Tags except img & h2).
field_video_1 (set to Rendered File, View Mode: Whatever you are using to show the video.
colorbox: trigger (Set your trigger to field_video, in the popup content use the Replacement Token for field_video_1 and any other fields you want to show in the pop-up).

That works to display the video in a lightbox from a preview image.

I however am also using the Contextual Links module and the pesky Edit / Delete links are still shown even though the H2 Video title is not. Edit / Delete get added into the link that triggers the pop-up and the only way I found to remove them was to set a views_post_execute hooks:

/**
 * Remove Edit and Delete from video lightbox
 */
function my_custom_module_views_post_execute(&$view) {
if ($view->name == 'my_view_name') {
  foreach ($view->result as $result) {
  	//if there is a video, remove the contexual links
  	if(!empty($result->field_field_video_1)) {
        $result->field_field_video_1[0]['rendered']['#contextual_links'] = '';
      }
  }
  }
}

ericjenkins’s picture

#49 worked perfectly for me. Thank you, @ec-adam!

joginderpc’s picture

thanks a lot @shane-birley.

Elvin - Albania Drupal Developer’s picture

Thank you Shane Birley’s!!!
Comment #4 worked flawlessly!!!

andyanderso’s picture

Thank you @Shane Birley and @jorisx - I used your directions from #4 and #33 to get this working on my site.

I am also using Contextual Links on my site and ran into the same issue of seeing the edit/delete links like @ec-adam in #49. I found a simpler solution to get rid of them I think.

Under Rewrite esults->Strip HTML tags->Preserve certain tags, I added <img> <h2> <span> <div> <li> <ul>.

Those tags seem to get rid of the edit/delete links and preserve the colorbox functionality with videos.