单击自定义缩略图图像时自动播放youtube视频

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单击自定义缩略图图像时自动播放youtube视频相关的知识，希望对你有一定的参考价值。

The thumbnails of Youtube videos are generally low in quality. Sometimes, the thumbnail is not enough to get the people attention. Here is a small code I have written that works as follows.

A custom thumbnail is displayed at the size of 560px width and 615px height. When the user clicks on it, the image fade outs. Yes it will get animated as fade out. We use jQuery fadeout function for it. After that the video gets displayed.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</title>
  6. <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>
  7. </head>
  8. <style>
  9. 	body
  10. 	{
  11. 		margin	: 0;
  12. 		padding	: 0;
  13. 		background	: #EEE;
  14. 		color		: #333;
  15. 		font-family: 'Open Sans', sans-serif;
  16. 		font-size	: 12px;
  17.  
  18. 	}
  19. 	#wrapper
  20. 	{
  21. 		width	: 1012px;
  22. 		margin	: 0 auto;
  23.  
  24. 	}
  25.  
  26. </style>
  27. <body>
  28. 	<div id="wrapper">
  29. 		<h1>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</h1>
  30. 		<div class="custom-th"><img src="http://blog.pixelthemes.com/demo/custom-yt-thumbnail/cusotm-yt-thumbanil.jpg" style="cursor:pointer" /></div>
  31. 		<div id="thevideo" style="display:none">
  32. 		<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/XSGBVzeBUbk?&autoplay=1&hl=en_US&amp;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&amp;version=3&autoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
  33. 		</div>
  34.  
  35. 		<p>Demo by : <a href="http://blog.pixelthemes.com/">WordPress Themes</a> </br>
  36. 		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>
  37. 	</div>
  38.  
  39. 	<script type="text/javascript">
  40. 	$(document).ready(function() {
  41. 		$('.custom-th').click(function() {
  42. 			$('.custom-th').fadeOut('slow', function() {
  43. 				$("#thevideo").css("display","block");
  44. 				});
  45. 			});
  46. 		});
  47. 	</script>
  48. </body>
  49. </html>

以上是关于单击自定义缩略图图像时自动播放youtube视频的主要内容，如果未能解决你的问题，请参考以下文章

提高 YouTube 缩略图质量？

在 UITableViewCell 内显示 youtube 视频缩略图和标题

Youtube 未加载高分辨率缩略图

YouTube 嵌入视频：设置不同的缩略图

Youtube没有加载高分辨率缩略图

从youtube嵌入缩略图和视频（php - Wordpress）