How To Add Play Button to YouTube Video Thumbnail Images using jQuery and CSS in c# Asp.net
Program:
.Aspx File
Program:
.Aspx File
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="youtube.aspx.cs" Inherits="youtube" %> <!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"> <head runat="server"> <title>Youtube Demo</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: absolute; } .video a { position: absolute; display: block; background: url('youtube.jpg'); height: 75px; width: 70px; top: 43px; left: 65px; } </style> </head> <body> <form id="form1" runat="server"> <div class="video"> <img src="#" id="imgThumb1" alt="Thumbnail1" style="height: 164px; " align="middle" /> <a href="http://fantasyaspnet.blogspot.com/"></a> </div> </form> </body> </html> |
Aspx.cs
| using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class youtube : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } } |
Demo:
|
No comments:
Post a Comment