Introduction:
In
this article I will explain how to add play button on video images using JQuery , CSS or add play button on YouTube thumbnail video
images in JQuery using CSS
in Asp.net.
Description:
In previous article I explained jQuery Generate thumbnails from youtube videos, Generate thumbnail from images in asp.net and many articles relating to JQuery, asp.net, SQL Server etc. Now I will explain how to add play button on YouTube thumbnail video images in JQuery using CSS in Asp.net.
In previous article I explained jQuery Generate thumbnails from youtube videos, Generate thumbnail from images in asp.net and many articles relating to JQuery, asp.net, SQL Server etc. Now I will explain how to add play button on YouTube thumbnail video images in JQuery using CSS in Asp.net.
To
add play button on YouTube thumbnail image we need to write the code like as
shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery add play button on YouTube thumbnail video images </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#imgThumb0').attr('src', 'http://img.youtube.com/vi/9bZkp7q19f0/2.jpg');
$('#imgThumb1').attr('src', 'http://img.youtube.com/vi/TzzGPfVx32M/2.jpg');
})
</script>
<style type="text/css">
.video { position: relative; }
.video a {
position: absolute;
display: block;
background: url('youtube_Playbutton.png');
height: 64px;
width: 64px;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<ul>
<li class="video">
<img id="imgThumb1"
alt="Thumbnail1"
/>
<a href="#"></a>
</li>
<li class="video">
<img id="imgThumb0"
alt="Thumbnail0"
/>
<a href="#"></a>
</li>
</ul>
</form>
</body>
</html>
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
|
3 comments :
Why dont you Start MVC?
It helps us a lot
Nice. The only mod I would do is to change it like this:
.video a {
position: absolute;
display: block;
background: url('youtube_Playbutton.png') no-repeat center;
height: 100%;
width: 100%;
top: 0;
left: 0;
}