How to Play YouTube Videos in Asp.net by using Jquery
jQuery Play (Embed) YouTube Videos in Asp.net from URL And YouTube Api:
In this post we will explain how to play YouTube videos in
asp.net we application or asp.net web page or website using c# or how to embed youtube
video in .aspx page or Display YouTube videos in asp.net website from you tub
video URL and video id by the help of jquery.
jQuery Embed or display YouTube Videos in Asp.net:
For the Embedding you tube video with asp.net page we can
use “http://code.jquery.com/jquery-1.8.2.js” jquery.
How to get the Youtube Api code:
For the display youtube videos in asp.net web page here we
ues youtub API (Application Programming interface) for this we get it by the
fallowing URl and save it in a variable by the Java Script code.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Display vide in asp.net web page:
Now we define player setting in asp web page.
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '400',
width: '800',
videoId: 'hoBm6IsjXX0',
events: {
'onReady': onPlayerReady
}
});
}
/* Autoplay when the dialog opens */
function onPlayerReady(event) {
event.target.playVideo();
}
How to Play youtube video in Asp.net application:
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Playyoutubvideos.aspx.cs"
Inherits="Playyoutubvideos"
%>
<!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>
<title>jQuery Show YoutTube Videos in popup window when
click on link</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* video settings come here */
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '400',
width: '800',
videoId: 'hoBm6IsjXX0',
events: {
'onReady': onPlayerReady
}
});
}
/* Autoplay when the dialog opens */
function onPlayerReady(event) {
event.target.playVideo();
}
$(document).ready(function () {
var overlay = jQuery('<div
id="overlay"></div>');
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.click').click(function () {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
color: #990000;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="style1">
<tr>
<td align=center>
<span class="style2"><strong>How to
Play youtub video in asp.net web page by video
id<br
/>
</strong></span>
</td>
</tr>
<tr>
<td align="center">
<b>
<a href='' class='click'>Click
Here to See video </a>
</b>
<br
/>
</td>
</tr>
<tr>
<td align="center">
<p>
<a href='' class='close'>Close</a></p>
</td>
</tr>
<tr>
<td align="center">
<div
class='popup'>
<div
class='content'>
<div id='player'>
</div>
</div>
</div>
<br />
</td>
</tr>
</table>
</body>
</html>
If you like this Post then Share this on Facebook, Google+ and other site by this the people rich this easily.
Comments
Post a Comment