Useful Stuff About:

Image Thumbnail that Expands to Show Video

Version 1 | Version 2 | Version 3 | Version 4 | Version 5

Click on the video thumbnail below to see the demo.

This example uses any image of any reasonable size for the thumbnail. When the <figure id="vidThumbnail"></figure> gets clicked, the script executes to resize the figure tag and the img inside the figure tag to the custom target width and height of the video. When the correct dimensions have been reached, the img gets removed and the video is then display. The script recognizes when the video is completed, then the video is replaced with the original image and then reduced down to its original thumbnail dimension. Watch the video till the end to see the effect.

This script is targeted only for YouTube videos (rather than HTML5 videos served up from your own webserver) of any custom size.

Optional: Create the thumbnail with "Play Video" or the play symbol in the image and you don't need any text inside the figcaption tag.

Scripts needed (copy and paste inside <head>)


  
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script><!--ONLY ONE OF THESE IN THE HEAD!!!!!-->
<script src="https://www.freestyleacademy.rocks/jquery/transit.js"></script><!--ONLY ONE OF THESE IN THE HEAD!!!!!!-->
<script>
//Set variables specific to your target YouTube Video where 
//vidExpandTime is the target time to change from thumbnail to video
//vidPlayerEasing options through https://jqueryui.com/resources/demos/effect/easing.html

	var vidExpandTime = 1000, vidID = "0Bmhjf0rKe8", vidPlayerEasing = "easeInOutCirc";

</script>
<script src="https://www.freestyleacademy.rocks/jquery/Expanding_Video_Thumbnail.js"></script><!--ONLY ONE OF THESE IN THE HEAD!!!!!!--->
<script src="https://www.youtube.com/player_api"></script><!--REQUIRED!!!!!!-->

Here's the html code


  
<!--This block below must be INSIDE the centeringDiv-->
<p>
  <figure id="vidThumbnail">
  	<img src="pathToYour/videoThumbnail.jpg"/>
    <div id="vidPlayer"></div>
    <figcaption>
    	Play Video<!--OPTIONAL-->
    </figcaption>
  </figure>
  This is the text content that would wrap around the video thumbnail. 
</p>

Here's the CSS


    
#vidThumbnail {/* for the video thumbanil container */
	float:left;
	margin:5px 20px 20px 0;/*TRBL = Top Right Bottom Left*/
	padding:0;
	position:relative;
	width:200px;/* Adjust as needed */
	height:150px;/* Adjust as needed */
	cursor:pointer;
	border:none;
}
#vidThumbnail img {/* dimensions of video thumbnail */
	width:200px;/* Adjust as needed */
	height:150px;/* Adjust as needed */
}
#vidThumbnail figcaption {/* for the text on TOP of video thumbnail */
	position:absolute;
	width:100%;
	height:auto;
	text-align:center;
	top:50px;
	left:0;	
	background-color:rgba(255,255,255,0.5);
	color:rgba(0,0,0,1);
	font-size:2em;
}