JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Image Thumbnail that Expands to Show Video

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

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

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;
}
}
X