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!