Slim Media Framework
HTML
<div class="full-panel">
<div class="middle">
<div class="main-content">
<div class="top-padding"></div>
<div class="row">
<div class="full"><h1>Slim Media Framework</h1></div>
<div class="forty">
<div class="vid-link" vidUrl="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/DuMont.mp4">
<img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/video_thumb.jpg"/>
<div class="vid-overlay">
<div class="vid-table">
<div class="cell"><img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/play_btn.svg" /></div>
</div>
</div>
</div>
<div class="vid-cap">Movie Title</div>
</div>
<div class="sixty">
<h2>About the slim media framework</h2>
This is a slim framework with support for MP4 video, mp3 audio, and iframe. Each link dynamically loads the content into either and HTML5 video, audio, or iframe containers. It's also fully responsive with support for up to four columns. You can add more if you want but that would be stupid. I'm actually joking about that last part I'm just trying to take up more space with some copy. But seriously it would be stupid. This also uses a panel based container to center the content vertically inside the browser window. Remove the "panel" and "middle" divs and it will align to the top of the browser window. <a href="https://preview.codepad.co/playground/preview/HyKaEwji/1" target="_blank">View this outside codepad.co</a>
</div>
</div>
<div class="row">
<div class="sixty">
<h2>This is a youtube movie</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim.
</div>
<div class="forty">
<div class="tube-link" vidUrl="https://www.youtube.com/embed/bRDOrY97wkk">
<img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/overwatch_th.jpg"/>
<div class="vid-overlay">
<div class="vid-table">
<div class="cell"><img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/play_btn.svg" /></div>
</div>
</div>
</div>
<div class="vid-cap">Movie Title</div>
</div>
</div>
<div class="row">
<div class="third">
<h2>Column One</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="third">
<h2>Column Two With Audio</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="play-audio" audioUrl="https://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audio.mp3">Play Audio <i class="fa fa-volume-up" aria-hidden="true"></i></div>
</div>
<div class="third">
<h2>Column Three</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="footer-padding"></div>
</div>
</div>
</div>
<div class="main-content">
<div class="row">
<div class="full"><h1>Slim Media Framework</h1></div>
<div class="forty">
<div class="vid-link" vidUrl="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/DuMont.mp4">
<img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/video_thumb.jpg"/>
<div class="vid-overlay">
<div class="vid-table">
<div class="cell"><img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/play_btn.svg" /></div>
</div>
</div>
</div>
<div class="vid-cap">Movie Title</div>
</div>
<div class="sixty">
<h2>About the slim media framework</h2>
This is a slim framework with support for MP4 video, mp3 audio, and iframe. Each link dynamically loads the content into either and HTML5 video, audio, or iframe containers. It's also fully responsive with support for up to four columns. You can add more if you want but that would be stupid. <a href="https://preview.codepad.co/playground/preview/zpmKlQSV/1" target="_blank">View this outside codepad.co</a>
</div>
</div>
<div class="row">
<div class="sixty">
<h2>This is a youtube movie</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim.
</div>
<div class="forty">
<div class="tube-link" vidUrl="https://www.youtube.com/embed/IBIwGKDwnWY">
<img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/overwatch_th.jpg"/>
<div class="vid-overlay">
<div class="vid-table">
<div class="cell"><img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/play_btn.svg" /></div>
</div>
</div>
</div>
<div class="vid-cap">Movie Title</div>
</div>
</div>
<div class="row">
<div class="third">
<h2>Column One</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="third">
<h2>Column Two With Audio</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="play-audio" audioUrl="https://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audio.mp3">Play Audio <i class="fa fa-volume-up" aria-hidden="true"></i></div>
</div>
<div class="third">
<h2>Column Three</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur ipsum eget porta dapibus. Nunc lorem lacus, vulputate nec cursus et, interdum quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="footer-padding"></div>
</div>
<div class="audio-slider">
<div class="close-audio"><img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/white_close.svg"></div>
<div class="audio-controller">
<audio class="myAudio thisAudio" id="myAudio" src="http://www.dieselpunkindustries.com/radio_shows/Casablanca/43-04-26_028_Lady_Ester_Screen_Guild_Players_Casablanca.mp3" controls="controls"></audio>
</div>
<div class="audio-toggle audio-min"><i class="fa fa-volume-up" aria-hidden="true"></i></div>
</div>
<div class="media-overlay"></div>
<video class="myVideo" id="myVideo" controls src=""></video>
<div class="tube-frame">
<iframe class="youTube" src="" frameborder="0" allowfullscreen=""></iframe>
</div>
<div class="close-btn" vidUrl="#"><img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/close_btn.svg"/></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//use.fontawesome.com/cbc5f6a98e.js"></script>
<script src="http://www.dieselpunkindustries.com/libs/audioplayer/js/audioplayer.min.js"></script>
<script>
$( function()
{
$( '.myAudio' ).audioPlayer();
});
</script>
CSS
@import url('//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Oswald:300,400,700');
body{
margin: 0;
padding: 0;
background-color: #000;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
background-color: #e3e3e3; color: #333;
font-size:14px;
line-height:1.5em;
}
a{color:#666;}
h1{
margin:0px;
font-size: calc(115% + 1vw) !important;
}
h1, h2{
font-family: 'Oswald', sans-serif;
font-weight: 400;
letter-spacing: 0.125em;
text-transform: uppercase;
}
h2{
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.25em;
font-size: 18px;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #333;
font-size: calc(70% + 0.5vw) !important;
}
img{
max-width: 100% !important;
height: auto;
}
.dark{background-color: #212121; color: #efefef;}
.light{background-color: #e3e3e3; color: #333;}
.full-panel{
display: table;
position: relative;
min-height: 100vh;
height: auto;
margin: 0 auto;
width: calc(100% - 60px);
padding: 0;
}
.main-content{
display: block;
position: relative;
margin: 0 auto;
max-width: 1200px;
margin: 0 auto;
width: calc(100% - 60px);
padding: 0;
}
.full-panel .main-content{
width: calc(100%);
}
.middle{
display: table-cell;
position: relative;
vertical-align: middle;
}
.full{
display: block;
position: relative;
width: calc(100% - 30px);
clear: both;
}
.row{
display: block;
position: relative;
clear: both;
margin: 0 0 20px 0;
float: left;
width: calc(100% - 30px);
height: auto;
}
.half{
display: block;
float: left;
width: calc(50% - 30px);
}
.sixty{
display: block;
float: left;
width: calc(60% - 30px);
}
.forty{
display: block;
float: left;
width: calc(40% - 30px);
}
.third{
display: block;
float: left;
width: calc(33.3% - 30px);
}
.quarter{
display: block;
float: left;
width: calc(25% - 30px);
}
.three-quarters{
display: block;
float: left;
width: calc(75% - 30px);
}
.full, .half, .third, .quarter, .three-quarters, .sixty, .forty{
padding: 10px 15px 10px 15px;
transition: all 0.5s;
text-align: left;
}
.full p, .half p, .third p, .quarter p, .three-quarters p{
font-weight: 400;
color: #fff;
line-height: 1.5em;
font-size: 16px;
margin: 0 0 1.25em 0;
}
.half p img{
width: 100% ;
max-width: 100% !important;
height: auto;
display: block;
position: relative;
margin: 20px 0 20px 0 !important;
}
.no-shadow{
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.vid-link, .tube-link{
display: block;
position: relative;
margin: 20px 0 20px 0;
width: calc(100%);
background-color: #000;
height: auto;
-webkit-box-shadow: 0 0 10px 0 #000000;;
box-shadow: 0 0 10px 0 #000000;;
}
.vid-link img, .tube-link img, {
position: relative;
display: block;
position: relative;
width: 100%;
height: auto;
}
.vid-overlay{
display: block;
position: absolute;
width: 100%;
top:0px;
left: 0px;
height: 100%;
color: #fff;
}
.vid-table{
display: table;
position: relative;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transition: all 0.5s;
cursor: pointer;
}
.vid-table:hover{
background-color: rgba(0, 0, 0, 0.0);
}
.vid-table .cell{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vid-table .cell img{
max-width: 100px;
height: 100px;
}
.vid-cap{
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 14px;
margin: 0 0 0 0;
}
.vid-link img:hover{
opacity: 1;
}
.media-overlay{
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
}
.media-close{
position: absolute;
top:20px;
right:20px;
width:30px;
height:30px;
z-index:9999;
display:none;
cursor: pointer;
opacity: 0.3;
transition: all 0.5s;
}
.media-close:hover{
opacity: 0.6;
}
.main-vid-box{
position: fixed;
width: 100%;
height:100vh;
display:none;
top:0px;
left:0px;
z-index: 9999;
}
.videoWrapper {
position: relative;
z-index:9999;
background-color:#000;
width:100%;
height: 100%;
margin:0 auto;
}
.videoWrapper video {
position: relative;
top: 0;
left: 0;
z-index: 9999;
width: 100% !important;
height: 100% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-width: 40px;
border-style: solid;
border-color: transparent;
}
@media (max-width: 960px) {
.quarter, .three-quarters, .sixty, .forty {
width: calc(50% - 30px);
float: left;
}
.third{
width: 100%;
}
.lower-copy .content div p img{
width: 100%;
max-width: 100%;
display: block;
position: relative;
margin: 20px 0 20px 0 !important;
float: none !important;
}
}
@media (max-width: 760px) {
.quarter, .half, .three-quarters, .sixty, .forty {
width: 100%;
}
}
.media-overlay{
display: none;
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1;
top:0px;
left: 0px;
}
video{
display: none;
position: fixed;
width: calc(100% - 60px);
height: calc(100% - 60px);
margin: 30px 0 0 30px;
background-color: transparent;
z-index: 999;
top:0px;
left: 0px;
}
.close-btn{
position: fixed;
top: 10px;
right: 10px;
cursor: pointer;
z-index: 999;
display: none;
}
.close-btn img{
width: 30px;
height: 30px;
}
.play-audio{
display: block;
position: relative;
display: block;
clear: both;
max-width: 400px;
width: calc(100% - 32px);
border-width: 1px;
border-style:solid;
border-color: #999;
padding: 8px;
text-align: center;
background-color:rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 10px 0 #000000;;
box-shadow: 0 0 10px 0 #000000;;
color: #efefef;
letter-spacing: 0.5em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 14px;
margin: 30px auto 0 auto;
cursor: pointer;
}
.audio-slider{
display: none;
position: fixed;
bottom:30px;
max-width: 500px;
width: calc(100% - 45px);
height: 42px;
right: 0px;
background-color:rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 10px 0 #000000;;
box-shadow: 0 0 10px 0 #000000;
border-style: solid;
border-width: 1px 0px 1px 1px;
border-color: #999;
transition: all 1s;
z-index: 999;
}
.close-audio{
display: block;
position: absolute;
top:-45px;
right:45px;
width: 20px;
height: 20px;
background-color: rgba(0, 0, 0, 0.6);
padding: 12px;
border-style: solid;
border-width: 1px 1px 0px 1px;
border-color: #999;
background-color:rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 10px 0 #000000;
cursor: pointer;
}
.audio-slider.open{
max-width: 500px;
width: calc(100% - 45px);
}
.audio-slider.min{
max-width: 50px;
width: calc(100% - 45px);
}
.audio-slider .audio-toggle{
display: block;
position: absolute;
top:0px;
left: 0px;
color: #fff;
font-size: 28px;
border-style: solid;
border-width: 0 1px 0 0;
border-color: #999;
height: 100%;
width: 50px;
color: #999;
}
.audio-slider .audio-toggle .fa{
left: 12px;
top: 7px;
display: block;
position: relative;
}
.audio-controller{
display: block;
position: relative;
width: calc(100% - 50px);
left: 51px;
opacity:0;
transition: all 0.5s
}
.audio-controller.show{
opacity: 1;
}
.top-padding{
display: block;
position: relative;
width: 100%;
height: 30px;
float: left;
}
.footer-padding{
display: block;
position: relative;
width: 100%;
height: 80px;
float: left;
}
.tube-frame{
position: fixed;
top:0px;
left: 0px;
display: block;
width: calc(100% - 60px);
height: calc(100% - 60px);
margin: 30px 0 0 30px;
background-color: #000;
display: none;
z-index: 999;
}
.tube-frame iframe{
display: block;
position: relative;
width: 100%;
height: 100%;
}
JAVASCRIPT
$( document ).ready(function() {
$(".vid-link").on('click',function(){
$('.myVideo').attr("src", $(this).attr("vidUrl"));
document.getElementById('myAudio').pause();
$(".audio-slider").addClass( "min" );
$(".audio-slider").removeClass( "open" );
$(".audio-controller").removeClass('show');
$(".audio-toggle").removeClass( "audio-min" );
$(".audio-toggle").addClass( "audio-max" );
$(".audio-slider").removeClass('open');
$(".audio-slider").hide();
$('.media-overlay, video, .close-btn').fadeIn(500, function(){
document.getElementById('myVideo').play();
});
});
$(".tube-link").on('click',function(){
document.getElementById('myAudio').pause();
$(".audio-slider").addClass( "min" );
$(".audio-slider").removeClass( "open" );
$(".audio-controller").removeClass('show');
$(".audio-toggle").removeClass( "audio-min" );
$(".audio-toggle").addClass( "audio-max" );
$(".audio-slider").removeClass('open');
$(".audio-slider").hide();
$('.media-overlay, .close-btn, .tube-frame').fadeIn(500);
$('.youTube').attr("src", $(this).attr("vidUrl"));
});
$(".play-audio").on('click',function(){
$('#myAudio').attr("src", $(this).attr("audioUrl"));
$(".audio-slider").addClass( "open" );
$(".audio-slider").removeClass( "min" );
$(".audio-controller").addClass('show');
$(".audio-toggle").addClass( "audio-min" );
$(".audio-toggle").removeClass( "audio-max" );
$(".audio-slider").show();
$(".close-audio").delay(500).fadeIn(500);
document.getElementById('myAudio').play();
});
$('body').on('click', '.audio-min', function(){
$(".audio-slider").addClass( "min" );
$(".audio-slider").removeClass( "open" );
$(".audio-controller").removeClass('show');
$(".audio-toggle").removeClass( "audio-min" );
$(".audio-toggle").addClass( "audio-max" );
$(".close-audio").fadeOut(500);
});
$('body').on('click', '.close-audio', function(){
document.getElementById('myAudio').pause();
$(".audio-slider").stop().fadeOut(500);
});
$('body').on('click', '.audio-max', function(){
$(".audio-slider").addClass( "open" );
$(".audio-slider").removeClass( "min" );
$(".audio-toggle").addClass( "audio-min" );
$(".audio-toggle").removeClass( "audio-max" );
$(".audio-slider").addClass( "open" );
$(".audio-controller").addClass('show');
$(".close-audio").fadeIn(500);
});
$(".close-btn").on('click',function(){
$('.youTube').attr("src", $(this).attr("vidUrl"));
$('.media-overlay, video, .close-btn, .tube-frame').fadeOut(500);
document.getElementById('myVideo').pause();
});
});
