Open YouTube Videos In Colorbox

This gpEasy tutorial will show you how to link to a YouTube video and have it open and play within Colorbox in gpEasy CMS. This is a nice way to have YouTube videos play for users without them leaving your site or having to embed the video into your page.

In the embed YouTube videos tutorial I showed you how to embed YouTube videos in gpEasy pages, now we are just going to link to the video and when the link is clicked it will open in Colorbox as opposed to going the YouTube web site for the video.

Step 1 Get the YouTube Video Link
Of course the first step is to get the link to the YouTube video you want to play. That's easy and you should know how to do that from the previous tutorial. Get the link from the <embed> on the YouTube video and use the iframe option.

Step 2 Add the Colorbox Code
The next thing we need to do is link the YouTube video to Colorbox.

Here's the example code:

<a class="example6" href="http://www.youtube.com/embed/KWRB-maTVyM" title="Xampp Installation">
Xampp Installation Video on YouTube</a>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
});
//]]>
</script>

The above code result in this link: Xampp Installation Video on YouTube

Things to notice about the code. . .

Notice the class="example6" and on the sixth line (".example6")? This is the code telling Colorbox that this link is to be opened in Colorbox. You can rename those class settings to anything you like.

Also notice that I used the "embed" video link. This opens the player in Colorbox with the ability to still have full screen mode. I got this link from clicking the <embed> button on the YouTube video I wanted and then selecting the iframe option.

The innerWidth & innerHeight can be changed to whatever you like however, this is the size Colorbox will display the video at initially thus you don't want it too big or it won't fit inside of your visitors' screens.

Enable Colorbox

If you haven't read the enable Colorbox tutorial then you will have problems. Colorbox has to be enabled for the page you want the video to be displayed in Colorbox on or it will just open the link to the YouTube video site.

For this page I just used a theme that I've enabled Colorbox in and added it to my layouts so I can just apply it on a per page basis whenever I need Colorbox turned on.

That's it! The simple tutorials are the best. You can see an example of this tutorial in action on the xampp lite installation tutorial. Just go down below the pictorial tutorial and you will bee the paragraph about the video for xampp installation.

 

gpEasy B2sq Theme by CS @True Acupuncture