HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Slim Framework</title>
<link rel="stylesheet" type="text/css" href="http://dieselpunkindustries.com/libs/audioplayer/css/audioplayer.css">
</head>
<body class="light">
<div class="full-panel">
<div class="middle">
<div class="main-content">
<div class="row">
<div class="full"><h1>Page Title</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>This is a 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>
<div class="row">
<div class="half">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="half">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>
<div class="row">
<div class="sixty">
<h2>This is another 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 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="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>
<div class="row">
<div class="forty">
<div class="tube-link" vidUrl="https://www.youtube.com/embed/IBIwGKDwnWY">
<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>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>
<div class="row">
<div class="third">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 class="play-audio" audioUrl="http://www.dieselpunkindustries.com/radio_shows/AdventuresofLeonidasWitherall/leonidas_witherall-44-06-04-01-square-nazi-jackboot.mp3">Play Audio <i class="fa fa-volume-up" aria-hidden="true"></i></div>
</div>
<div class="third">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="third">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>
<div class="row">
<div class="quarter">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="quarter">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="quarter">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="quarter">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>
</div>
</div>
</div>
<div class="main-content">
<div class="row">
<div class="full"><h1>Page Title</h1></div>
<div class="half">
<h2>Left Column</h2>
<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="half">Right Column</div>
</div>
<div class="row">
<div class="half">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="half">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>
<div class="row">
<div class="third">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="third">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="third">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>
<div class="row">
<div class="quarter">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="quarter">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="quarter">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="quarter">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>
</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>
<div class="footer-padding"></div>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<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="js/actions.js"></script>
<script src="http://www.dieselpunkindustries.com/libs/audioplayer/js/audioplayer.min.js"></script>
<script>
$( function()
{
$( '.myAudio' ).audioPlayer();
});
</script>
</body>
</html>
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;
line-height:1.5em;
font-size:16px;
}
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:#efefef;
}
.light h2{
border-color: #333;
}
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: 375px;
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;
}
.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();
});
});
