Skip to content

Instantly share code, notes, and snippets.

@rweald

rweald/Thumbnail to Video

Created February 9, 2011 22:15
Show Gist options
  • Save rweald/819431 to your computer and use it in GitHub Desktop.
Save rweald/819431 to your computer and use it in GitHub Desktop.
Download ZIP
A simple script that replicates the Mac Finder UI that allows you to swap a thumbnail for a video when a play button is clicked.
Raw
Thumbnail to Video
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Test Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').bind("mouseenter", function(){
$(this).append('<img class="play_button" src="http://www.hamptonbid.com/17BullRun.com/play-button_png_1058132788.png" />');
});
$('.thumbnail').bind("mouseleave", function(){
$(".play_button").remove();
});
$('.play_button').live('click',function(){
$(this).parent().replaceWith('<video src="blah" controls="controls"></video>');
});
});
</script>
<style type="text/css">
.play_button{
width: 500px;
height: 500px;
margin: auto;
}
video{
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<div class="video_container" style="width:500px; height:500px;">
<div class="thumbnail" style="background-image:url(http://www.snr.arizona.edu/files/shared/images/placeholder.jpg); height: 500px;">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment