How to Create a Dynamic Video Gallery

The Description

This guide goes over how to create a Dynamic Video Slider using jQuery to change the src (source) attribute in a single iframe element.

When it comes to displaying multiple videos on a page in a clean and simple way, creating a dynamic video gallery can be the best solution. This solution consists of creating two main elements: the video player and the video thumbnails. In this example, the thumbnails are just simply text but any image can be used by replacing the text with an instead.

These thumbnails will operate as jQuery functions to change the src=”” in our #iframe-shell element to the desired video. Let’s get started with the HTML.

The HTML

Copy

<div class="video-player" style="width: 560px;height:315px;">
	<div class="video-overlay"></div>
	<iframe id="iframe-shell" width="560" height="315" src="http://youtube.com/embed/2nq26EVjTRg?rel=0&controls=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video-thumbnails">
	<div class="vt-item"><a id="play-video-1" href="#">Play Video 1</a></div>
	<div class="vt-item"><a id="play-video-2" href="#">Play Video 2</a></div>
	<div class="vt-item"><a id="play-video-3" href="#">Play Video 3</a></div>
	<div class="vt-item"><a id="play-video-4" href="#">Play Video 4</a></div>
</div>

The jQuery

Copy

<script>
$(document).ready(function() {
	$('.video-overlay').on('click', function(ev) {
		$('.video-overlay').addClass('remove-overlay');
		$("#iframe-shell")[0].src += '&autoplay=1';	
		ev.preventDefault();
	});  
	$('#play-video-1').on('click', function(ev) { 
		$("#iframe-shell").first().attr('src','http://youtube.com/embed/2nq26EVjTRg?rel=0&controls=1&showinfo=0&autoplay=1');
		$('.video-overlay').addClass('remove-overlay');
		ev.preventDefault();
	});
	
	$('#play-video-2').on('click', function(ev) {
		$("#iframe-shell").first().attr('src','http://youtube.com/embed/P4piSNs1YfE?rel=0&controls=1&showinfo=0&autoplay=1');
		$('.video-overlay').addClass('remove-overlay');
		ev.preventDefault(); 
	});

	$('#play-video-3').on('click', function(ev) { 
		$("#iframe-shell").first().attr('src','http://youtube.com/embed/3DIxoxr0GDg?rel=0&controls=1&showinfo=0&autoplay=1');
		$('.video-overlay').addClass('remove-overlay');
		ev.preventDefault();
 	});

	$('#play-video-4').on('click', function(ev) { 
		$("#iframe-shell").first().attr('src','http://youtube.com/embed/8Xd8Af2wAFI?rel=0&controls=1&showinfo=0&autoplay=1');
		$('.video-overlay').addClass('remove-overlay');
		ev.preventDefault(); 
	});
});
</script>

The CSS

Copy

	.video-overlay {
		width: 560px;
		height: 315px;
		background: url('http://www.marbleoftheworld.com/skin/frontend/motw/default/images/basis-of-design-background.jpg');
		background-size: 100%;
		position: absolute;
		z-index: 100;
		opacity: 1;
		transition: all 1.2s ease-in-out 1.2s;
		cursor: pointer;
	}

	.video-overlay.remove-overlay {opacity: 0;z-index: -1;}