media player larger

by Felis Catus

HTML

<div class="mediaplayer inactive">
    <div id="controlbar">
        <div class="control button">
            <svg height="50px" width="50px" viewBox="0 0 50 50">
                <path d="M19.3,16.1l12.3,8.1c0.5,0.3,0.5,1.1,0,1.4l-12.3,8.1c-0.6,0.4-1.3,0-1.3-0.7V16.9  C18,16.2,18.8,15.8,19.3,16.1z" />
            </svg>
        </div>
        <div class="control progressbar">
        </div>
        <div class="control button">
            <svg height="50px" width="50px" viewBox="0 0 50 50">
               <path d="m 9.6423069,20.336529 c -0.019834,1.0937 0.2228292,2.1122 0.7279901,3.0554 0.505158,0.9433 1.391812,1.9687 2.659966,3.0765 0.99165,0.8598 1.682307,1.6111 2.071974,2.2539 0.389655,0.6429 0.576319,1.3102 0.559993,2.002 -0.0053,0.6918 -0.148755,1.1842 -0.430495,1.477 -0.281753,0.2928 -0.670247,0.4352 -1.165485,0.427 -0.495249,0.01 -0.883744,-0.1342 -1.165486,-0.427 -0.281751,-0.2928 -0.425248,-0.7852 -0.430494,-1.477 l 0,-1.4 -2.911962,0 0,1.204 c 0.00233,1.5773 0.3896601,2.7907 1.161984,3.64 0.772321,0.8493 1.915638,1.2786 3.429957,1.288 1.514307,-0.01 2.657624,-0.4387 3.429956,-1.288 0.772313,-0.8493 1.159642,-2.0627 1.161985,-3.64 0.01982,-1.0937 -0.22284,-2.1122 -0.727991,-3.0554 -0.505169,-0.9433 -1.391823,-1.9688 -2.659965,-3.0765 -0.99166,-0.8598 -1.682318,-1.6111 -2.071975,-2.254 -0.389665,-0.6428 -0.576329,-1.3101 -0.559992,-2.0019 0.0029,-0.693 0.137077,-1.19 0.402494,-1.491 0.265409,-0.301 0.64457,-0.448 1.137487,-0.441 0.492904,-0.01 0.872065,0.14 1.137484,0.441 0.265407,0.301 0.399572,0.798 0.402496,1.491 l 0,0.8119 2.911962,0 0,-0.6159 c -0.0018,-1.5773 -0.383254,-2.7907 -1.144485,-3.64 -0.761248,-0.8493 -1.891732,-1.2786 -3.391456,-1.288 -1.499736,0.01 -2.63022,0.4387 -3.391458,1.288 -0.761241,0.8493 -1.1427349,2.0627 -1.1444841,3.64 z" /> 
                <path d="m 20.339616,15.632529 0,14.9238 c 0.0023,1.5773 0.38966,2.7907 1.161985,3.64 0.77232,0.8493 1.915638,1.2786 3.429956,1.288 1.514307,-0.01 2.657624,-0.4387 3.429956,-1.288...

CSS

body{
    background:url("http://www.traipse.com/penrose_tiles/penrose_tiles.gif");
}
.mediaplayer{
    transition:top 200ms ease, left 200ms ease, width 200ms ease, height 200ms ease;
    z-index:10;
    position:fixed;
    display:block;
    box-shadow:0 0 10px -2px rgba(0,0,0,0.5);
}
.mediaplayer.inactive{
    top:50px;
    left:50px;
    border-radius:3px;
    width: 162px;
    height: 122px;
    background-color:#555;
    background-image:url("http://d2tq98mqfjyz2l.cloudfront.net/image_cache/135363781844712.jpg");
    background-size:contain;
    background-repeat:no-repeat;
}
.mediaplayer.active{
    top:10px;
    left:10px;
    border-radius:5px;
    width: 750px;
    height: 420px;
    background-color:#555;
    background-image:url("http://d2tq98mqfjyz2l.cloudfront.net/image_cache/135363781844712.jpg");
    background-size:contain;
    background-repeat:no-repeat;
}
.mediaplayer:not(.active)>#controlbar{
    pointer-events:none;
}
.mediaplayer>#controlbar{
    display:table;
    position:absolute;
    left:0px;
    right:0px;
    width:100%;
    bottom:-60px;
    height:60px;
    background:none;
}
#controlbar>.control{
    height:50px;
    display:table-cell;
    position:relative;
}
#controlbar>.control:before{
    display:block;
    border-radius:5px;
    position:absolute;
    top:5px;
    bottom:5px;
    background:#000;
    opacity:0.5;
    z-index:15;
    content:" ";
}
#controlbar>.control.button:first-child:before{
    left:0px;
    right:5px;
}
#controlbar>.control.button:before{
    left:5px;
    right:0px;
}
#controlbar>.control.progressbar:before{
    left:0px;
    right:0px;
}
#controlbar>.button{
    width:55px;
}
/* magic transition */
.mediaplayer.inactive>#controlbar>.control:before{
    transform:scale(0) !important;
    transition:transform 2ms linear;
}
.mediaplayer.active>#controlbar>.control:before{
    transform:scale(1) !important;
    transition:transform 200ms...

JavaScript

(function setEvents(){
    var mediaplayer=document.getElementsByClassName("mediaplayer")[0];
    var mediaActive=0;
    mediaplayer.onclick=function(){
        mediaActive=(1-mediaActive);
        if(mediaActive){
            mediaplayer.classList.remove("inactive");
            mediaplayer.classList.add("active"); 
        }else{
            mediaplayer.classList.remove("active");
            mediaplayer.classList.add("inactive");
        }
    }
})();