Expand Videos
body {
padding: 1em;
}
/* Expand
_______________________*/
.video-full-container {
position: fixed;
z-index: 999997;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 5px;
text-align: center;
display: none;
cursor: pointer;
}
.video-full-container video {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
z-index: 999998;
}
.video-full-container .close {
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
text-align: right;
color: #fff;
font-size: 12px;
background-color: #1B1818;
padding: 0.5em;
width: 100%;
z-index: 99999999;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
/**
* Required jquery
* Html <a class="expand_video" href="video.mp4">
*/
(function($) {
var full = $('.video-full-container');
$.each($('.expand_video'), function(i, obj) {
$(obj).on('click', function(e) {
e.preventDefault();
var link = $(obj).attr('href');
full.fadeIn();
full.find('video')
.attr('src', link)
.attr('autoplay', 'autoplay');
});
});
// close preview
full.on('click', function(e) {
full.fadeOut().find('video').attr('src', '');
var wait = setTimeout(function() {
full.css('display', 'none');
}, 1000);
});
})(jQuery);
<p><a class="expand_video" href="http://mazwai.com/system/posts/videos/000/000/205/preview_mp4/goomalling-storm.mp4?1446983738">
Expand this video link
</a></p>
<p><a class="expand_video" href="http://mazwai.com/system/posts/videos/000/000/204/preview_mp4_2/finlandia.mp4?1446982919">
Expand this video link
</a></p>
<p><a class="expand_video" href="http://mazwai.com/system/posts/videos/000/000/203/preview_mp4_3/marseme.mp4?1446407520">
Expand this video link
</a></p>
<div class="video-full-container">
<video src=""></video>
<div class="close">Click To Close</div>
</div>