nakome
11/30/2015 - 3:02 PM

Expand Videos

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>