This article will use JQuery and FancyBox to auto load YouTube Video as a popup which would be centered.
Or you can click on a link to open the popup again.
Auto Load YouTube Video As A Popup With JQuery FancyBox
JQuery + FancyBox – Auto Load YouTube Video As A Popup
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Preview Auto Load YouTube Video As A Popup With FancyBox</title> <meta name="robots" content="noindex, nofollow" /> <!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Add fancyBox --> <link rel="stylesheet" href="fancyapps-fancyBox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> <script type="text/javascript" src="fancyapps-fancyBox/source/jquery.fancybox.pack.js?v=2.1.5"></script> <script language="javascript"> $(document).ready(function () { $('.fancybox_popup').trigger('click'); }); </script> </head> <body> <p> You now can see YouTube video is loaded in a popup, or <a class='fancybox_popup fancybox.iframe' href='//www.youtube.com/embed/tgf8ntVVp4Q'>click here</a> to see it again. </p> <a style='display:none;' class='fancybox_popup fancybox.iframe' href='//www.youtube.com/embed/tgf8ntVVp4Q'></a> <script language="javascript"> $('.fancybox_popup').click(function () { $(".fancybox_popup").fancybox({ maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); }); </script> </body> </html> |
