-1

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>
Tarek Hassan
  • 23
  • 4
  • 1
    providing a link to a large main page doesn't help...especially when not given info on where to look. Create a simplified demo that replicates problem – charlietfl Oct 14 '12 at 14:52
  • 1
    As well as a demo, include all relevant code in the question. We want these self-contained so they remain useful after the links expire. – Sparky Oct 14 '12 at 15:04
  • @Sparky672 : +1, liked this `We want these self-contained so they remain useful after the links expire` – JFK Oct 14 '12 at 21:27
  • I edited it. I wish it replicates problem well. – Tarek Hassan Oct 15 '12 at 08:41

1 Answers1

1

Add womde=opaque to your youtube link (src) like :

<iframe width="344" height="229" src="http://www.youtube.com/embed/o6qNGUAciB4?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>

(BTW: me personally I prefer to deal with links rather than text code because I can use debugging tools that help to find other possible issues that text code may not show ;)

JFK
  • 40,963
  • 31
  • 133
  • 306