I’ve been seeing more and more use of video as a background on the web. Sometimes, the results are cheesy; sometimes the results are dramatic. Take a look at Design Kitchen’s portfolio, which is dominated by video. You can’t help but watch the show as a human hand reaches in and throws the page around. (Really, you can’t help it. I’ve seen the site a few times already and still paused when I ran over to double check their link.)
Meanwhile, all kinds of web services are opening up their APIs for anyone to take advantage of rich content like video, social media, maps, etc. I read a tutorial on working with the YouTube API and had to take a stab.
The result is a microsite for the Lowcountry Roller Hockey Association, a group of roller hockey players I am a part of. I took some video of us playing a pick-up game recently when my skate broke—my choices were to go home or grab my Zi8. I got behind the goal and filmed the scene. Naturally, I put the video up on YouTube so the guys could see. (Yeah, I like Vimeo, too, but YouTube is way more visible—it’s the #2 search engine in the world, after all!)
So with a little jQuery, plain ol’ JavaScript and some calls to the YT API, I was able to build a site that stuck a YouTube video behind some normal HTML content using basic CSS positioning and some rudimentary geometry.
Never forget proportions and cross-multiplication. You know, when x/y = a/b and you know x/y and one of a or b? Let’s say you’re solving for b. You multiply y * z and divide by x. Google it if you don’t follow. It should be a part of every web designer’s day.
Anyway, here’s the end result:
Check out the site. It’s not live yet but it will be at charlestonrolleryhockey.com one of these days.
I’m planning on turning this into a jQuery plugin that I’m quite sure would make a lot of people unhappy, if it became popular.