Share on Google+Share on Google+

jquery fancybox youtube

Advertisement
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

Advertisements

Advertisement

Posted on: August 16, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.