jquery fancybox youtube


 

jquery fancybox youtube

In this section, you will learn how to show video in fancy box on clicking "a href " link

In this section, you will learn how to show video in fancy box on clicking "a href " link

Fancy box with You Tube Video Popup

In this section, you will learn how to show video in fancy box on clicking "a href " link. In given below example , a href link is given , when you click on it , it will show the YouTube video in a fancy box. The fancy box is implemented using jQuery plug-in, i.e. "jquery.fancybox-1.0.0.js".

FancyboxYOUTUBE.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>LightBox YouTube Demo</title>

<script type="text/javascript" src="FancyboxYOUTUBE/jquery-1.2.6.min.js">
</script>
<script type="text/javascript" src="FancyboxYOUTUBE/jquery.pngFix.pack.js">
</script>
<script type="text/javascript" src="FancyboxYOUTUBE/jquery.fancybox-1.0.0.js">
</script>

<script type="text/javascript" src="FancyboxYOUTUBE/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="FancyboxYOUTUBE/fancy.css"/>

<script type="text/javascript">
$(document).ready(function() {
$("a[@rel*=fancyvideo]").fancybox({
overlayShow: true,
frameWidth:640,
frameHeight:360
});
});
</script>
</head>

<body bgcolor="#FFA500">
<div>
<h1>Fancybox with You Tube Video Popup</h1>

<p>
<a href="http://www.youtube.com/watch?v=r3TtgYuaVFk" rel="fancyvideo">
Play video
</a></p>
</div>
</body>
</html>

OUTPUT

When you click on link :

Download Source Code

Click here to see demo

Ads