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 http://3rff.com/films 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.
Typically this is the youtube embed code(swap out your own and follow along):
< iframe width="560" height="315" src="http://www.youtube.com/embed/INjtK_S13Dk" 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:
Now we will change “src” to “href” and we will add the attribute rel=”shadowbox”:
<a href="http://www.youtube.com/embed/INjtK_S13Dk?rel=0" 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="http://www.youtube.com/embed/INjtK_S13Dk?rel=0" 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 http://pitt.edu/~zdm9/labiv/testVideo
-Zac David M
~ by zacdavidm on October 22, 2012.