Style Your Remotely Hosted Video

Have you decided to embed your video on your site using another host like youtube?

This can save space and give you playing and sharing options without the hassle, but maybe you don’t want your video to have the generic youtube embedded look.

I will walk you through how to set up shadowbox and turn your videos into thumbnails that open the dynamic theater your videos deserve. You can click on the yellow trailer button at to see an example of shadowbox with video.

You can walk through the download process for shadowbox yourself and host it off your pitt account, but i have done you the favor of downloading the full shadowbox and hosting it off my account.

<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script type="text/javascript">

You can put that code in your head. A brief overview of what is happening. The first link tag is to the css to create the styles for shadowbox. The second link tag is to pull in the javascript for shadowbox. Javascript is needed to add shadowbox to elements of your page. The script between the head tags initializes shadowbox when the page loads.

Typically this is the youtube embed code(swap out your own and follow along):

 < iframe width="560" height="315" src="" 
frameborder="0" allowfullscreen>

What we will do is modify this iframe into an anchor tag and add the shadowbox reference.

First change “iframe” to “a” in the opening and closing tags and delete the width, height, frameborder and the allowfullscreen attributes:

<a src=""></a>

Now we will change “src” to “href” and we will add the attribute rel=”shadowbox”:

<a href="" rel="shadowbox"></a>

Now whatever you put inside these anchor tags will become a shadowbox for this video. Let’s put a thumbnail (a small image) inbetween the “a” tags.

<a href="" rel="shadowbox">
<img src="movie1_thumbnail.jpg" alt="image 1 thumbnail" /></a>

(the same concept works for vimeo as it does youtube.

there you go!. now your page is working. You can see a test at

-Zac David M

~ by zacdavidm on October 22, 2012.

%d bloggers like this: