I'm using fancybox2 plugin.
When I click image slider working but youtube video still visible in background.
html code holding embeded videos
<iframe width="344" height="229" src="http://www.youtube.com/embed/o6qNGUAciB4" frameborder="0" allowfullscreen=""/>
and javascript code
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="<?=$this->session->CI->config->config['js_path'];?>/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="<?=$this->session->CI->config->config['css_path'];?>/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />
<script type="text/javascript" src="<?=$this->session->CI->config->config['js_path'];?>/jquery.fancybox.pack.js?v=2.1.1"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="<?=$this->session->CI->config->config['css_path'];?>/jquery.fancybox-buttons.css?v=1.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="<?=$this->session->CI->config->config['js_path'];?>/jquery.fancybox-buttons.js?v=1.0.4"></script>
<script type="text/javascript" src="<?=$this->session->CI->config->config['js_path'];?>/jquery.fancybox-media.js?v=1.0.4"></script>
<link rel="stylesheet" href="<?=$this->session->CI->config->config['css_path'];?>/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="<?=$this->session->CI->config->config['js_path'];?>/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
var j= jQuery.noConflict();
j(document).ready(function() {
j(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
helpers : {
overlay: {
opacity: 1, // or the opacity you want
css: {background: 'white'} // or your preferred hex color value
} // overlay
} // helpers
});
});
</script>
