how to play videos in color box

same question. I tried the following based off the demo on the colorbox website

<a class="example6 cboxElement" href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0" title="The Knife: We Share Our Mother's Health">Watch Now</a> 

But it did not work.

Thanks chaloum, I just tried all three of the following but I couldn't get any of them to work

<a class="example6 cboxElement" href="http://www.youtube.com/watch?v=617ANIA5Rqs" title=" We Share Our Mother's Health">Watch Now</a>

<a class="colorbox-inline" href="http://www.youtube.com/watch?v=617ANIA5Rqs" title=" We Share Our Mother's Health">Watch Now</a>

<a class="colorbox-load" href="http://www.youtube.com/watch?v=617ANIA5Rqs" title=" We Share Our Mother's Health">Watch Now</a>

The first one blacks out the whole screen and the second and third give me this error.
http://awesomescreenshot.com/063bddjbe

If you are manually just inserting html into a body field of a node, try just class="colorbox-inline". Works for me, though, I can't seem to set the title correctly in the overlay.

Thanks for the reply thund3rbox, but if I use

<a class="colorbox-inline" href="http://www.youtube.com/watch?v=617ANIA5Rqs" title=" We Share Our Mother's Health">Watch Now</a>

The output is

<a class="colorbox-inline init-colorbox-inline-processed-processed cboxElement" href="http://www.youtube.com/watch?v=617ANIA5Rqs" title=" We Share Our Mother's Health">Watch Now</a>

and I still end up with the same "Request unsuccessful:" error.
http://awesomescreenshot.com/063bddjbe

Found a work around for now.

Add the following JS to your theme

jQuery(document).ready(function($){
	//Examples of how to assign the ColorBox event to elements
	$(".colorbox-youtube").colorbox({iframe:true, innerWidth:480, innerHeight:390});
});

Add the ".colorbox-youtube" class to your links.

ex.

<a class="colorbox-youtube" href="http://www.youtube.com/watch?v=617ANIA5Rqs" title=" We Share Our Mother's Health">Watch Now</a>

The following works for me.

<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"><img border="2" src="/sites/default/files/imagepicker/1/Kendra_Yapa_video.jpg" /></a>

example page is at http://kendragrittani.com/video

you also need to make sure you go into the Colorbox module configuration page and check the extra settings boxes "Enable Colorbox load" and "Enable Colorbox Inline".

Strange, that works for me.

<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">Colorbox Link</a>

How did you generate that code, or did you have to construct it manually?

I'm interested too, I tried the #7 link and it works.
Trying to manipulate it with my links stops it from working.
How can you build it?

I have made a patch for 7.x Video module which allows you to use Flowplayer with colorbox. It doesn't do any other player at the moment, but I hope someone with more time than I have could adapt the patch to accept other videos - most of the work is done, I think.

The patch for the Video module can be found here:
http://drupal.org/node/1155628

Checkout my recent post regarding embedding youtube videos. Feedback welcome.
#1368274: Solved: How to embed Youtube videos

Thanks ! It worked for me ! ;)

Seems to be resolved.

I have been able to play local video files by embedding the flowplayer by the following way:

<p><a class="colorbox-inline" href="?width=500&height=500&inline=true#popup-content-id">Link to click</a></p>
<div style="display:none;">
<?php
$config = array(
            'clip' => array(
                'url' => file_create_url('public://videos/test-vid1.flv'),
                'autoPlay' => TRUE,
            ),
            'onLoad' => 'flowplayerAdminInit',
        );
        $video = theme('flowplayer', array('config' => $config, 'id' => 'popup-content-id', 'attributes' => array('style' => 'width:500px;height:500px;')));
        print $video;
?>
</div>

Hope this helps someone.

Freebug, I'm having a hard time getting this to work for me. Can you provide more details? How/where did you load that code?

I'm trying to load/run locally hosted mp4 videos from a hyperlink. Not Youtube video.

I'm using this little piece of javascript to grab the id of the video and create an iframe in colorbox

jQuery(function ($) {
    jQuery('.video_youtube').click(function(event) {

        var loc = jQuery(this).attr('href');
        // looking for the first param to be 'v='
        var id = loc.split("?")[1].split("&")[0].split("=")[1];

        event.preventDefault();
        jQuery.colorbox({html:'<iframe id="vid_frame" width="640" height="360" src="http://www.youtube.com/embed/' + id +'?enablejsapi=1&autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>'});
    });
});

Then just add a link in this format

<a href="http://www.youtube.com/watch?v=iCkYw3cRwLo&amp;feature=youtu.be" class="video_youtube">Click to be cool</a>

I guess that can be optimized with a drupal behaviour

I am using the method mentioned at #7 but find that this approach does not work on iPad or Android.

Any ideas out there?

@MrPaulDriver same issue for me. Did you find out what was causing it?

@Wellsy Sorry no.

I couldn't figure it out and ended up using a workaround based on the Media module in conjunction the Media Gallery module. The site in question was already making extensive use of these so I was able to get sorted without carrying any additional overhead.

See www.redlobstermedia.com (home page)

@MrPaulDriver - OK, thanks.

I ended up hard coding it as a quick fix to use inline iframes which worked - www.livewellderby.co.uk

#31 works form mi on iPad

thanks

If you'd like to combine this with views, it's worth considering to use a link field for this purpose (how-to). This approach isn't limited to just one particular video platform (like YouTube).