Magegurus: How to open a you tube video in custom light box

You can open a video in pop up window. Simply copy paste the html code shown below into an html file. Attached jquery library file (default jquery library). Copy paste the code for css into a css file and link that file with the html file. Copy paste the javascript code in the <head> tag in html file.

How it works?

When a user simply clicks on the image (image is under anchor tag with id="clickme"), video gets open up into lightbox. As autoplay value is true for the video, you do not need to click on play button, video starts automatically. Tested this code on mozilla firefox, google chrome, IE.

[css language="true"]

<div class="featured_video">
<div class="head_featured_video">Featured Video</div>
<a id="clickme" href="javascript:popup()"><img alt="" src="http://www.magegurus.com/wp-content/uploads/2013/02/video.jpg" /> </a>
<div id="floatingDiv">
<div id="floatinginner">
<div id="innerfloatingdiv"><a id="closing" href="javascript:popclose()"></a>

<iframe src="http://www.youtube.com/embed/lIza2Dh8o3M?wmode=transparent?&autoplay=0" height="350" width="425" allowfullscreen="" frameborder="0" scrolling="no"></iframe>

</div>
</div>
</div>

</div>

[/css]
[css autolinks="false" classname="myclass" language="false"]

<style type="text/css">
#floatingDiv { display: none; position: fixed; top: 0px; left: 0px; z-index: 1005; opacity: 1; width: 100%; height: 100%;

background-image: none; background-color: transparent; }

#floatingDiv #floatinginner { width: 995px; height: 100%; position: absolute; background-color: #ffffff; }

#floatingDiv #innerfloatingdiv { position: absolute; border: 4px solid #000000; height: 350px; width: 425px; }

#innerfloatingdiv a#closing { color: #990000; width: 17px; height: 17px; background-color: #ededed; position: absolute; z-index: 9; top: 5px; right: 4px;

background-image: url(01fbf%2B3Ef4L.gif); background-repeat: no-repeat; background-position: left top; }
</style>

[/css]
[code lang="js"]
<script type="text/javascript">
function popup(){
jQuery("#floatinginner").fadeIn(3000);
jQuery("#innerfloatingdiv").css("display", "none");
var disp = document.getElementById('floatingDiv').style.display;
if(disp == 'block')
disp = 'none';
else disp = 'block';
document.getElementById('floatingDiv').style.display = disp;
var window_width = j(window).width();
var floatinginner_width = 497;
var half_win_width = window_width/2;
var leftnum = half_win_width - floatinginner_width;
var lef = Math.abs(parseInt(leftnum));
var left = parseInt(lef) + 'px';
var elemen = document.getElementById('floatinginner');
elemen.style.left=left;

setTimeout(function(){
jQuery("#innerfloatingdiv").css("display", "block");
var autoply = jQuery("#floatingDiv #innerfloatingdiv iframe").attr("src");
autoply = autoply.replace("autoplay=0","autoplay=1");
jQuery("#floatingDiv #innerfloatingdiv iframe").attr("src",autoply);
}, 3000);

var video_width = 213;
var floatinginner_full_wd = 994;
var pop_left = floatinginner_width - video_width;
var le = Math.abs(parseInt(pop_left));
//if number is negative then make it positive.
var window_height = j(window).height();
var half_window_height = window_height/2;
var half_innerfloatingdiv_height = 172;
var fromtop = half_window_height - half_innerfloatingdiv_height;
var toppx = Math.abs(parseInt(fromtop));
var top = parseInt(toppx) + 'px';
var lee = parseInt(le) + 'px';
var elem = document.getElementById('innerfloatingdiv');
elem.style.left=lee;
elem.style.top=top;
}

function popclose() {
var clos = document.getElementById('floatingDiv').style.display;

if(clos == 'block') {
var innr = document.getElementById('floatingDiv');
if(innr) {
var m = jQuery("#floatingDiv #innerfloatingdiv iframe").attr("src");
m = m.replace("autoplay=1","autoplay=0");
jQuery("#floatingDiv #innerfloatingdiv iframe").attr("src",m);
var have;
have = innr.innerHTML; innr.innerHTML = '';
innr.innerHTML = have;
}

clos = 'none';
// document.getElementById('floatingDiv').style.display = clos;
jQuery('#innerfloatingdiv').css("display","none");
jQuery('#floatinginner').fadeOut(2000);
setTimeout(function(){ jQuery('#floatingDiv').css("display","none"); },2000); }
}
</script>
[/code]

4 comments:

mikeAugust 1, 2013 at 11:49 AM
Will this work if pop ups are blocked?
ravisoni6262August 2, 2013 at 3:58 PM
Yes,with no issue.
quest barsSeptember 2, 2013 at 9:02 AM
Helpful Web site...

[...]Awesome info reckoned we want to track-back to the present btw did you[...]...
RixitOctober 12, 2013 at 7:52 AM
Not Working for Me!!!!

Saturday, February 23, 2013

How to open a you tube video in custom light box

4 comments: