jquery fancybox youtube
Posted on: August 16, 2010 at 12:00 AM
Posted on: August 16, 2010 at 12:00 AM
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 :
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Tutorial Topics
