jQuery Featured Media Tabs

[email protected]

by Ryan Brackett

HTML

<h2>jQuery Featured Media Tabs</h2>
This is a custom jQuery plugin to display and load youtube videos. This plugin was built from a previous plugin that I built <a href="http://jsfiddle.net/RyanBrackett/7ZJtC/">here</a>. This plugin is completely fluid responsive. You can specify which tab/video will be active on load. When the page loads, only the specified video iframe will load. The other video iframes use an alternate custom attribute that holds the iframe source without loading it, making this great for mobile. The thumbnails are pulled from YouTube via video ID and are styled to remove black borders. When you click on a thumbnail, the corresponding video begins to play. When you click another thumbnail, the previous video stops.
<br/>
<br/>
<!-- start FEATURED MEDIA TABS -->
<div class="featured-media">
    <div id="page-tabs">
        <div class="loader"></div>
        <ul id="panels">
            <!-- start PANEL -->
            <li>
                <div class="media-wrapper">
                    <iframe src-original="//www.youtube.com/embed/YfG2_Gy2p0w?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </li>
            <!-- end PANEL -->
            <!-- start PANEL -->
            <li>
                <div class="media-wrapper">
                    <iframe src-original="//www.youtube.com/embed/XonxivqZCdE?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </li>
            <!-- end PANEL -->
            <!-- start PANEL -->
            <li>
                <div class="media-wrapper">
                    <iframe src-original="//www.youtube.com/embed/r5AbvBn-q-o?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </li>
            <!-- end PANEL -->
            <!-- start PANEL -->
            <li>
                <div class="media-wrapper">
                    <iframe...

CSS

body {
    font-family: Arial;
    font-size: 13px;
    line-height: 20px;
}
/* start FEATURED MEDIA TABS */
 .featured-media {
    width: 70%;
    margin: auto;
}
.featured-media #page-tabs {
    position: relative;
}
.featured-media .loader {
    background-image: url(http://creative.fullmedia.com/clients/blue-south/images/loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6.25%;
    width: 100%;
    height: 100%;
    opacity: .5;
    position: absolute;
}
.featured-media #page-tabs, .featured-media #page-tabs > ul {
    margin: 0;
    padding: 0;
}
.featured-media ul#panels {
    clear: both;
    margin-bottom: 4%;
}
.featured-media #panels .media-wrapper {
    width: 100%;
    font-size: 12px;
    height: 0px;
    padding-bottom: 56.2%;
    position: relative;
}
.featured-media #panels iframe {
    width: 100%;
    height: 100%;
    position: absolute;
}
.featured-media #panels > li {
    display: none;
}
.featured-media #panels > li.xactive {
    display: block;
}
.featured-media #tabs {
    width: 100%;
    clear: both;
}
.featured-media #tabs > li {
    float: left;
    list-style: none;
    display: block;
    width: 31%;
    margin-right: 3.5%;
    font-size: 14px;
    color: black;
    cursor: pointer;
    text-align: center;
    opacity: 0.7;
    position: absolute;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    height: 0px;
    padding-top: 17.1%;
    position: relative;
    overflow: hidden;
    margin-bottom: 4%;
}
.featured-media #tabs > li span.thumb-icon {
    height: 0px;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background-image: url(http://creative.fullmedia.com/clients/blue-south/images/icon-play-001.png);
    background-position: center;
    background-size: 30%;
   ...

JavaScript

//* start FEATURED MEDIA TABS

// jQuery Page Tabs // By Ryan Brackett & Jeremy Clements

var selectedTab = 0; //Set which video you want active on load
var activePanel = selectedTab + 1; // This corrects the numerology from a 0 being the start to 1

// Add classes and ids to tabs and panels for unique styling
$("#tabs").children().each(function (i) {
    i = i + 1;
    $(this).attr('id', "tab-" + i).addClass("tab");
});
$("#panels").children().each(function (i) {
    i = i + 1;
    $(this).attr('id', "panel-" + i).addClass("panel");
});

$('#tabs li:nth-child(3n)').addClass('third');

$('#tabs > li')
    .eq(0).addClass('first').end()
    .eq(-1).addClass('last').end();

// Activate first tab/panel group on load
$("#tabs").children().eq(selectedTab).addClass("xactive");
$("#panels").children().eq(selectedTab).addClass("xactive");

// Activate & deactivate tab/panel groups on click
$("#tabs > li").click(function () {
    $("#tabs > li, #panels > li").removeClass("xactive");
    $(this).toggleClass('xactive');
    $("#panels > li").eq($(this).index()).toggleClass('xactive');

    // LOADING VIDEOS & STOP PREVIOUS VIDEO
    $("#panels > li").find('iframe').attr('src', "").fadeToggle();
    $(".loader").fadeTo("slow", 0);
    var active_vid = $("#panels > li").eq($(this).index()).find('iframe'),
        src_orig = $(active_vid).attr('src-original')
        $(active_vid).hide().attr('src', src_orig + '&autoplay=1').fadeToggle();
    $(".loader").fadeTo("slow", .5);
});

// This shows the desired load video as specified at the top
var src_orig = $("#panel-" + activePanel).find('iframe').attr('src-original');
$("#panel-" + activePanel).find('iframe').attr('src', src_orig);


//* end FEATURED MEDIA TABS