Facebook Style Video Previews

by Ryan Brackett

HTML

<div class="video-container">
    <div class="id">cEGcfu54XiE</div>
    <div class="preview">
        <img class="thumb">
        <img class="play" src="https://s-static.ak.fbcdn.net/rsrc.php/v2/yG/r/Gj2ad6O09TZ.png">
    </div>
    <div class="details">
        <div class="info"></div>
        <div class="info-small">www.youtube.com</div>
    </div>
    <div style="clear: both;"></div>
</div>

CSS

body {
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 10pt;
}
.video-container {
    background-color: #F7F7F7;
    border: 1px solid rgba(0, 0, 0, .05);
    padding: 3px;
}
.preview {
    position: relative;
    cursor: pointer;
    float: left;
    padding-right: 5px;
}
.play {
    position: absolute;
    left: 10px;
    bottom: 10px;
}
.info-small {
    text-size: 8pt;
    color: gray;
}
a {
    color: #3B5998;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

JavaScript

var youtube_video_id = $(".id").html();
var video_url = "http://youtube.com/watch?v=" + youtube_video_id;
var thumbnail_url = "http://img.youtube.com/vi/" + youtube_video_id + "/1.jpg";
var iframe_url = "http://www.youtube.com/embed/" + youtube_video_id + "?autoplay=1&rel=0&showinfo=0&iv_load_policy=3&autohide=1&wmode=transparent&enablejsapi=1";
var api_url = "https://gdata.youtube.com/feeds/api/videos/" + youtube_video_id + "?v=2&alt=json-in-script&callback=?";

$(function () {
    // Get video information and set the title.
    $.getJSON(api_url, function (data) {
        $(".info").html("<b><a href='" + video_url + "' target='_blank'>" + data.entry.title.$t + "</a></b>");
    });

    // Set the thumbnail image for the video.
    $(".preview img.thumb").attr("src", thumbnail_url);

    // Switch to the iframe when the image is clicked.
    $(".preview").click(function () {
        $(this).html("<iframe width='100%' height='500px' src='" + iframe_url + "' frameborder='0' allowfullscreen></iframe>");
        $(this).css("float", "none");
    });
    $(".id").remove();
});