Pretty embedded YouTube videos

The other day I was struggling with the ugliness of an embedded YouTube video on a website. HIDEOUS! I thought up a very simple solution to this problem, all you need are two images and a dash of jQuery. I’m not claiming to be the first to think of this solution, by any means, but I hope somebody out there finds it helpful.

So, YouTube takes three screenshots from your uploaded video around the quarter, half, and three-quarter marks then you get to choose which of those three shots is displayed behind the play button on your embedded video. Whether it is the static image you want or not, its going to look bad. But YouTube is SO convenient, and easy, and FAST! You don’t want to quit using it, right? Of course not. This tutorial is for you.

We’re about to turn this:

into this:

Okay, let’s get right down to it. HTML first, then CSS and jQuery.

HTML:

All we do is set up an empty div with an id so we can easily target it.


<div id="example-video"></div>

CSS:

Give your div the exact height and width of your video, make the cursor a pointer, and set the background with an image of the same height and width. If you’d like your video to have a hover state like mine, just switch the background image on hover.


div#example-video {
    width:694px;
    height:390px;
    cursor: pointer;
    background: url(example-vid-inactive.jpg);
}
div#example-video:hover {
    background: url(example-vid-active.jpg);
}

jQuery:

Now we’re getting to the good stuff.

1. Be sure you link to jQuery, whether it be your own copy or from a CDN like Google (which is what I did below).

2.Wrap your script in the $(document).ready anonymous function so that the entire page loads before your script runs.

3. If you chose to have a hover state for your video, preload the active image so there isn’t any lag time to when your video is hovered over.

4. Target your empty div then add a click action to it.

5. Use .replaceWith() to remove your div from the DOM and replace it with your video! Be sure your video is set to start automatically or your visitor will have to press TWO play buttons and that’s just awkward.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" 
type="text/javascript" charset="utf-8"></script>

$(document).ready(function(){

    var image = $('<img />').attr('src', 'example-vid-active.jpg');

    $('div#example-video').click(function(){
        $(this).replaceWith("<embed style='border:1px solid black;'
        width='694' height='390' src='http://www.youtube.com/
        v/5udKHkwb8rc?version=3&hl=en_US&HD=1;rel=0;showinfo=0;
        controls=0;autoplay=1' type='application/x-shockwave-flash'
        allowscriptaccess='always'allowfullscreen='true' />");
    });

});

You’re thinking: “I don’t know what that URL stuff means.” Well, you can actually control A LOT about your embedded YouTube video by manipulating its URL. Take the example below, which is the URL used in my video example above:

http://www.youtube.com/v/5udKHkwb8rc?version=3&hl=en_US&HD=1;rel=0;showinfo=0;controls=0;autoplay=1

The grey part of the URL is what comes straight out of the box with your embed. How do we come by this?

1. Navigate to your video’s YouTube page. Click the “Share” button underneath the video.

2. Click the “Embed” button.

3. Check “Use old embed code” then copy and paste the code. Voila!

The next part of the URL and the first thing you will need to add is an ampersand (&). Now you can start adding code to revamp your YouTube video.

Adding HD=1; to the end of your URL will play the HD version of your video if it is available. If there isn’t an HD version, no harm no foul. I like to add it to the end of all videos just in case.

Adding rel=0; will keep that annoying screen of related videos from popping up once your video has finished playing. Don’t mind the related videos? Just leave this off the URL or set it to rel=1; instead.

Adding showinfo=0; will keep information such as the title and description of the video OFF of the video. Want to leave that info? Then leave this off your URL.

Adding controls=0; will keep the video controls from appearing on the video. It has its pros and cons. You wouldn’t want this for a long video, as the user wouldn’t be able to rewind or fast forward. The only controls available when adding controls=0; to your URL will be play and pause, by clicking directly on the video.

Last but not least (especially for this tutorial), adding autoplay=1; to your URL will auto-start your video. Auto-start means the user won’t need to click any play button for the video to start. In our case, we created a fake play button for the user to click.

There are a lot more things you can add to your URL to control the way your YouTube video is presented. Check out the full lot of them HERE. Did you notice that there was a semi-colon (;) after each of the snippets we added to the URL? That’s how YouTube knows to separate them from each other. Anyway, drop that very last semi-colon from the URL, you won’t be needing it.

And that’s all folks! Happy Internetting!

What else? FOOD!

If there is one thing my boyfriend DJ knows how to do and to do well, it is throwing a meal together! Last Friday we were both tired and didn’t want to go out to eat or bring in takeout because we’d already had takeout twice that week. So he whipped up a meal from things around the house and it turned out FANTASTIC! We had cheeseburgers on toast, jalapeno black eyed peas from a can, and fried green beans.

Then last night, Sunday, he got a hankering to make something and ended up roasting a whole chicken! It turned out incredibly scrumptious and juicy. I’ll be eating chicken sandwiches every day this week. Look at the butter on that chicken’s back! That’s the goooood stuff right there.

Also yesterday, we bought a Christmas tree for our apartment! A little premature, you might be thinking. So, I won’t show the tree yet, just this adorable image of Bruce underneath it.

Jack-o-lanterns

This year before Halloween, DJ and I went over to my best friend Renee’s house and carved pumpkins with her and her family! Mine is the polka-dot one :]

Spotify

I’ve been a huge fan of Grooveshark ever since my brother Phil first showed it to me around Christmas of 2008. But its reign is coming to an end. Spotify has hit the shores of America! I first heard about it on Kidd Kradick in the morning, a guilty pleasure that stretches back to 6th grade. I’m only human, so naturally I have major love for Kellie Rasberry. I thought spotify sounded neat, but not much different from Grooveshark. And truth be told, its not. But the little bit that is different, is awesome.

First of all, it has a desktop client. Actually, in order to use it you have to download the desktop client. Now, Grooveshark did have (does have?) a desktop client, and I used it for awhile, but it was not reliable. And Spotify’s desktop client is straight up slick. Yeah, I started using that word recently. People seem to like using it in regards to web designs and applications, and since I’m a ‘web developtress’ (as I like to say), I’d better get caught up on all the lingo. JUST LOOK AT IT!

Anyway, let’s just get this over with and run through a few pros and cons of each:

The best thing about Grooveshark is easily the widgets. I’ve posted playlists with the help of both Grooveshark and 8Tracks, but believe you me, Grooveshark’s are better. But even the widgets aren’t very reliable. You may create one, post it on your blog, then 3 days later you go back to see that only one song is left on the list. This has happened to me with a Cyndi Lauper playlist repeatedly. Makes me wonder if it is only a circumstance of certain songs or artists? Because I’ve got a couple Grooveshark playlist widgets over a year old that are still holding tight. Grooveshark also has an immense collection of music available, and I mean immense. Within just a few days of using Spotify I was disappointed to discover a handful of precious songs that had racked up dozens and dozens of listens on my Grooveshark account weren’t even available on Spotify, but they are adding more every day so here’s hoping!

So Spotify may be missing a few tracks here and there which I’d love to be added, but it is greatly superior in MANY other ways. First of all, the social aspect of Spotify is fantastic. Download the desktop client, link the account with your facebook account and suddenly you have a list of your “people” at the ready. Go fumble through their playlists; IT IS GREAT FUN! If you have your Spotify account linked up with your facebook account, then any of your facebook friends who have done the same will automatically be added to your “people” list. SO CONVENIENT! You can “subscribe” to other people’s playlists. When you subscribe, that playlist shows up in YOUR sidebar and you can keep up with what updates are made to it.

One of the crucial differences between Grooveshark and Spotify and what makes Spotify officially superior to Grooveshark, is that you can integrate your itunes library into your spotify desktop client… to create playlists from ALL of your music. This is one of the things that I always thought would have made Grooveshark better, but never in a million years did I think I’d someday be able to do it. This is what convinced my boyfriend DJ to get Spotify. Its an incredible feature!

PLAYLISTS! Playlists are the steroid juice of Spotify. Let me demonstrate the glorious way in which your Spotify desktop client and the world wide web work together to bring you juicy playlists. For instance, let’s say I want to send you loyal readers a playlist I’ve made. In fact, I do. I’ve worked very hard on my 70’s Music playlist and I want other people to enjoy it as much as I do.

First, I simply post a link to my playlist. I’m not trying to give you Spotify 101 here, so you can figure out for yourself how to generate links for your playlists.

http://open.spotify.com/user/rach_inabox/playlist/13bAxkNH1kKqOj9aauD152

I’m guessing most of you don’t have Spotify yet. Now would be a good time to get it so that you can listen to my 70’s playlist. So for those of you that don’t have it, I’m going to lay this out for you with screencaps.

Click the link and you’ll end up at this page:

You’ll either be prompted immediately with the pop-up below or you’ll have to click the giant play button on the screen above.

Open it up with Spotify and there you have it! My 12 hour long playlist is ready to juice up your ears. And check it out, my playlist has two subscribers! I feel so popular.

Alright. Now that you know how easy it is to add playlists from the web to your Spotify account, how do you find and/or generate those playlists? Lucky for you I’ve found a few wonderful ways:

Topsify ~ http://topsify.com/

Are you the top 40 type? I’ll admit that listening to some pop music in the morning on my way to work can help get me pumped. Cause you gotta get pumped to sit at a desk on your computer all day. You gotta!

Spotibot ~ http://spotibot.com/

A play list generator. If you have a last.fm account, you can generate a playlist based on your last.fm stats. Sweet right? You can also type in any artist or band and get a playlist back. Just place your browser next to Spotify and drag the playlist over. OUILA! Click on the “more options” button to choose the length of your playlist. I always go for the maximum (50).

Spotiseek ~ http://www.spotiseek.com/

Another playlist generator. Again, type in any artist and you’ll get back a playlist! And again, you get to just drag it over into Spotify. Simple as pie. 50 not enough tracks for you? Just keep clicking “more artists” and watch your playlist grow.

Share My Playlists ~ http://sharemyplaylists.com/

Search through playlists created by users. Join and add your own! Choose one, click play, listen and/or subscribe. They also have their own playlist generator that is so kind as to ask whether you’d prefer popular or obscure tracks. For hipsters, by hipsters?

Well, hopefully I’ve convinced you to check out Spotify! And send me your username :] I’m rach_inabox. Happy internet-ing, friends!