JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<div class="bottom">
    <div class="display_song_container_head col-md-8 col-md-offset-2">
        <div class="row">
            <div class="col-xs-12 player-toggler hidden-min toggled-box">mini player</div>
            <div class="col-xs-12 hidden-min toggled-box">progress bar</div>
            <div class="col-xs-4 player-box">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="player" class="embed-responsive-item" frameborder="0" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/kAp51wT4qhg"></iframe>
                </div>
            </div>
            <div class="col-xs-4 hidden-min toggled-box preview-box">
                <img src="http://i1.ytimg.com/vi/dNr_eIgP0tI/hqdefault.jpg" class="" />
            </div>
            <div class="col-xs-5"> <span class="player-toggler hidden-max toggled-box">watch</span>
 <span>song info</span>

            </div>
            <div class="col-xs-3">conrtollers</div>
            <div class="col-xs-3 hidden-min toggled-box hidden">volume</div>
        </div>
    </div>

CSS

iframe {
    max-height:300px;
}
.bottom {
    position:absolute;
    bottom:0;
    top:auto;
    left:0;
    right:0;
    padding:5px;
    height:120px;
    color: #888;
    background: #020202;
    -moz-box-shadow: 0 1px 0 #000 inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
    -webkit-box-shadow: 0 1px 0 #000 inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
    box-shadow: 0 1px 0 #000 inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset;
    background: -webkit-gradient(linear, 0% 0, 0% 100%, from(#1F2222), color-stop(0.5, #171818), to(#020202));
    background: -moz-linear-gradient(0% 0 270deg, #1F2222, #171818 50%, #020202);
    background: -ms-linear-gradient(top, #171818, #020202);
    background: linear-gradient(0% 0 270deg, #171818, #020202);
    -webkit-transition: height 100ms;
    -moz-transition: height 100ms;
    -ms-transition: height 100ms;
    -o-transition: height 100ms;
    transition: height 100ms;
}
.bottom.expanded {
    height:460px;
}
.display_song_container_head {
    background: #202020;
    -webkit-box-shadow: 0 0 0 1px #1B1B1B inset;
}
.player-toggler {
    background-color:red;
    display: block;
    text-align: center;
}
.hidden-min {
    display:none;
}
.hidden-min.min-show {
    display:block;
}
.hidden-max {
    display:block;
}
.hidden-max.min-show {
    display:none;
}
.player-box.col-xs-4, .preview-box.col-xs-4 {
    width:200px;
    padding:0;
}
.preview-box.col-xs-4 img{
    width:100%;
    height:112px;
}
.player-box.col-xs-12 .embed-responsive {
    padding:150px 0;
}

JavaScript

$(".player-toggler").click(function () {
    //expand or shrink the bottom box
    if ($(".bottom").hasClass('expanded')) $(".bottom").removeClass('expanded');
    else $(".bottom").addClass('expanded');

    // show/hide elements with class toggled-box
    $(".toggled-box").each(function () {
        if ($(this).hasClass('min-show')) $(this).removeClass('min-show');
        else $(this).addClass('min-show');
    });

    //toggle the player-box
    if ($(".player-box").hasClass("col-xs-4")) {
        $(".player-box").removeClass("col-xs-4").addClass("col-xs-12");
    } else {
        $(".player-box").removeClass("col-xs-12").addClass("col-xs-4");
    }
});