DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world
Play Youtube video with custom thumbnail onClick event
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<style>
body
{
margin : 0;
padding : 0;
background : #EEE;
color : #333;
font-family: 'Open Sans', sans-serif;
font-size : 12px;
}
#wrapper
{
width : 1012px;
margin : 0 auto;
}
</style>
<body>
<div id="wrapper">
<h1>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</h1>
<div class="custom-th"><img src="http://blog.pixelthemes.com/demo/custom-yt-thumbnail/cusotm-yt-thumbanil.jpg" style="cursor:pointer" /></div>
<div id="thevideo" style="display:none">
<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/XSGBVzeBUbk?&autoplay=1&hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XSGBVzeBUbk?hl=en_US&version=3&autoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
<p>Demo by : <a href="http://blog.pixelthemes.com/">WordPress Themes</a> </br>
Article Link : <a href="http://blog.pixelthemes.com/ideas/autoplay-youtube-video-while-clicking-on-a-custom-thumbnail-image">Custom Thumbnail with fadeout animation for Youtube Videos</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('slow', function() {
$("#thevideo").css("display","block");
});
});
});
</script>
</body>
</html>
The snippet is basically a html file that will first display a larger thumbnail image. Upon clicking on the thumbnail, the image will be faded and youtube video will start playing.
