Sunday, December 30, 2012

How to Popup youtube video on page load with fancybox

How to Popup youtube video on page load with fancybox

Here the full code how to popup youtube video in fancybox when user visit your website.

Note: don't forget to adapt this code with your website.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />

<script type="text/javascript">
$(document).ready(function() {

$("#yt").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
</script>
</head>

<body onload='$("#yt").trigger("click");'>

<h1>fancybox example</h1>
<p><a id="yt" title="" href="http://www.youtube.com/watch?v=2y8G7wMgIPY&amp;fs=1&amp;autoplay=1"></a></p>
</body>
</html>
Disqus Comments