JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div>
    <a href='#' class='linkTrigger' data-vid='S6WpvBHdk1c'>Summer Time</a><br/>
    <a href='#' class='linkTrigger' data-vid='rRuHk6Drj2U'>Men in Black</a><br/>
    
    <img src='http://media1.santabanta.com/full1/Nature/Birds/birds-72v.jpg' />
    <div id="watchpage-screen">
        <div class="playlist35-wrapper">
            <div class="header clearfix" title="Click to expand or collapse">
                <ul class="actionBtns">
                    <li class="actionBtn-toggler" title="Click"><i class='icon-chevron-up'></i></li>
                </ul>
                 <h3 class="title">Young Kato Mix</h3>

            </div>
            <div class="playlist35 playlistClose">
                <div class="vidBox"></div>
            </div>
            <div class="playlist35-background"></div>
        </div>
    </div>
</div>

CSS

#watchpage-screen .playlist35-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-family: ProximaNovaAltRegular, Arial, Helvetica, sans-serif;
    z-index: 111;
}
#watchpage-screen .playlist35-wrapper .header {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-top: solid 1px #000;
    cursor: pointer;
    cursor: hand;
    z-index: 2;
    position: relative;
}
#watchpage-screen .playlist35-wrapper .header .actionBtns {
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 35px;
    text-align: center;
    margin-right: 20px;
}
#watchpage-screen .playlist35-wrapper .header .actionBtns li {
    list-style: none;
    height: 45px;
    line-height: 40px;
}
#watchpage-screen .playlist35-wrapper .header .actionBtns i {
    background-image: url("http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png");
}
#watchpage-screen .playlist35-wrapper .header:hover .actionBtns i {
    background-image: url("http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings-white.png");
}
#watchpage-screen .playlist35-wrapper .playlist35 {
    width: 100%;
    display: block;
    position: relative;
    z-index: 2;
    -webkit-transition: height .2s ease-in-out;
    -moz-transition: height .2s ease-in-out;
    -ms-transition: height .2s ease-in-out;
    -o-transition: height .2s ease-in-out;
    transition: height .2s ease-in-out;
}
#watchpage-screen .playlist35-wrapper .playlistOpen {
    height:350px;
}
#watchpage-screen .playlist35-wrapper .playlistClose {
    height: 0;
}
#watchpage-screen .playlist35-wrapper .header h3.title {
    font-size: 18px;
    margin: 0;
    padding: 0;
    text-align: right;
    height: 45px;
    line-height: 44px;
    color:whitesmoke;
    font-family:'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif;
    font-weight: 500;
    color: #999;
}
#watchpage-screen .playlist35-wrapper .playlist35-background {
    position:...

JavaScript

$(".header").click(function () {
    mediaPlayerBox('normal');
});

$(".linkTrigger").click(function(){
    $(".vidBox").html("<iframe width='420' height='315' src='//www.youtube.com/embed/" + $(this).attr('data-vid') + "?autoplay=1' frameborder='0' allowfullscreen></iframe>");
    $("#watchpage-screen .playlist35-wrapper .header h3.title").text($(this).text());
    mediaPlayerBox('play');
});

function mediaPlayerBox(action){
    if(action == "normal"){
        if ($('.playlist35').hasClass('playlistClose')) {
            $('.playlist35').removeClass('playlistClose').addClass('playlistOpen');
            $('.actionBtn-toggler i').removeClass('icon-chevron-up').addClass('icon-chevron-down');
        } else {
            $('.playlist35').removeClass('playlistOpen').addClass('playlistClose');
            $('.actionBtn-toggler i').removeClass('icon-chevron-down').addClass('icon-chevron-up');
        }
        return true;
    }
    
    if(action == "play"){
        if ($('.playlist35').hasClass('playlistClose')) {
            $('.playlist35').removeClass('playlistClose').addClass('playlistOpen');
            $('.actionBtn-toggler i').removeClass('icon-chevron-up').addClass('icon-chevron-down');
        }
        return true;
        
    }
}