Useful Stuff About:

Image Thumbnail that Expands to Show Video

Click on the video thumbnail below to see the demo.

Play

This is an example of using jQuery for an expanding and collapsing embedded YouTube video. There's a div with "Play" text and a transparent background on top of the initial small video. When the viewer click on the "Play" div, the video expands itself to a desired larger size and the "Play" div becomes a "Close video" bar above the expanded video.

You can set your own custom parameters such as

Maximum width of video
Time of expansion and collapsing
Type of easing for expansion and collapsing
Background color for bar above expanded video
Text to display in bar above expanded video
Height of bar above expanded video

When page is viewed on a mobile device, the "Play" div is removed and the embedded video spans across the device screen basically as a button because the video doesn't play on the page for mobile devices. Tapping the video launches the YouTube player.

Scripts needed

Paste this in the head of HTML


  
<script>
	var maxVidW,  vidExpandTime, easing, bgColor, closeText, videoClickSmallH;
	maxVidW = 853;//Maximum width of expanded video
	vidExpandTime = 1000;//Time of expansion and collapsing
	easing = "easeInOutExpo";//Type of easing for expansion and collapsing
	bgColor = "rgba(0,0,0,0.5)";//Background color for bar above expanded video
	closeText = "Close video";//Text to display in bar above expanded video
	videoClickSmallH = "30px";//Height of bar above expanded video
</script>


/*Paste this into your script file*/
var vidPlayer, currentVideoHolder, vidFrame, maxVidH, minVidW, minVidH, initialFontSize,  initialText, windowW;
		windowW = $(window).width();
		maxVidH = parseInt(maxVidW *(9/16));
		if (windowW <= 667){
			var vidH = parseInt(windowW *(9/16))
			$(".videoHolder, .ytVid").css({
				"height":vidH
			});
		}
		$(".videoClick").toggle(function(){//actions for when you click on a button
			currentVideoHolder = $(this).parent();
			vidPlayer = currentVideoHolder.find(".ytVid");
			minVidW = vidPlayer.width();
			minVidH = vidPlayer.height();
			initialFontSize = $(this).css("font-size");
			initialText = $(this).text();
			$(this).stop().transition({
				"width":"100%",
				"height":videoClickSmallH,
				"background-color": "rgba(0,0,0,1)",
				fontSize:"1em"
			}, vidExpandTime, function(){
				$(this).text(closeText);
				vidFrame = $(this).parent().find(".ytVid")[0].contentWindow;
				vidFrame.postMessage('{"event":"command","func":"'+'playVideo'+   '","args":""}', '*');
			});
			currentVideoHolder.stop().transition({
				"width": maxVidW,
				"height": maxVidH,
				"margin-bottom": videoClickSmallH
			},vidExpandTime, easing);
			vidPlayer.stop().transition({
				"width": maxVidW,
				"height": maxVidH,
				"top": videoClickSmallH
			},vidExpandTime, easing);
		}, function(){
			vidFrame = vidPlayer[0].contentWindow;
			vidFrame.postMessage('{"event":"command","func":"'+'pauseVideo'+   '","args":""}', '*');
			currentVideoHolder.stop().transition({
				"width": minVidW,
				"height": minVidH,
				"margin-bottom": "10px"
			},vidExpandTime, easing);
			vidPlayer.stop().transition({
				"width": minVidW,
				"height": minVidH,
				"top": "0px"
			},vidExpandTime, easing);
			$(this).stop().transition({
				"height":"100%",
				"background-color": bgColor,
				fontSize:initialFontSize
			}, vidExpandTime, function(){
				$(this).text(initialText);
			});
		});

Here's the html code - paste in for as many videos as you want


  
<div class="videoHolder">
	<div class="videoClick">Play</div>
	<iframe class="ytVid" width="200" height="113" src="https://www.youtube.com/embed/UNIQUECODE?rel=0&enablejsapi=1" frameborder="0" gesture="media" allowfullscreen></iframe>
</div>
<p>Text that wraps around thumbnail</p>

Here's the CSS


    
.videoHolder {
	width: 200px;
	height: 113px;
	float: left;
	margin: 0px 10px 10px 0px;
	z-index: 1;
}
.videoClick {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	color: #fff;
	font-size: 2em;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ytVid {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}
@media screen and (max-width:768px){
	.videoClick {
		display: none;
	}
	.videoHolder, .ytVid {
		width: 100%;
		float: none;
	}
}