title: Fancy box and youtube video problems
body: <p>I have some fancy box photos and a youtube video, but when the fancy box picture opens the youtube video sits in front of it? Any ideas?</p>
  
  <p>Here is a snippet of my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;script type="text/javascript"&gt; 
          &lt;!--         
          var newwindow;
          function newWindow(url)
          {
              newwindow=window.open(url,'name','height=600,width=625');
              if (window.focus) {newwindow.focus()}
          }
          // --&gt;
      &lt;/script&gt;
      &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
      &lt;title&gt;onco Construction and Supply - Rhino Shield&lt;/title&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="../style3.css" media="screen" /&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $("a[rel=example_group]").fancybox({
              'transitionIn'      : 'elastic',
              'transitionOut'     : 'elastic',
              'titlePosition'     : 'over',
              'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                  return '&lt;span id="fancybox-title-over"&gt;Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &amp;nbsp; ' + title : '') + '&lt;/span&gt;';
              }
          });
      });
      &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  .commercial
          {
              position: absolute;
              left:205px;
              top:1175px;
              width:327px; 
              height:auto;
          }
  
          .pictures
          {
          position: absolute;
          left: 50px;
          top: 1090px;
          width: 750px;
          height: auto;
          text-align: center;
          }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;div class="pictures"&gt;
          &lt;a rel="example_group" href="images/rhino/1.jpg"&gt;
          &lt;img src="images/rhino/small/1.jpg" alt=""/&gt;&lt;/a&gt;
          &lt;a rel="example_group" href="images/rhino/2.jpg"&gt;
          &lt;img src="images/rhino/small/2.jpg" alt=""/&gt;&lt;/a&gt;
          &lt;a rel="example_group" href="images/rhino/3.jpg"&gt;
          &lt;img src="images/rhino/small/3.jpg" alt=""/&gt;&lt;/a&gt;
          &lt;a rel="example_group" href="images/rhino/4.jpg"&gt;
          &lt;img src="images/rhino/small/4.jpg" alt=""/&gt;&lt;/a&gt;
          &lt;a rel="example_group" href="images/rhino/5.jpg"&gt;
          &lt;img src="images/rhino/small/5.jpg" alt=""/&gt;&lt;/a&gt;
          &lt;a rel="example_group" href="images/rhino/6.jpg"&gt;
          &lt;img src="images/rhino/small/6.jpg" alt=""/&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="commercial"&gt;
          &lt;object width="445" height="364"&gt;&lt;param name="movie"    value="http://www.youtube.com/v/Mw3gLivJkg0&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1"&gt;&lt;/param&gt;
          &lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;
          &lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt;
          &lt;embed src="http://www.youtube.com/v/Mw3gLivJkg0&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"&gt;
          &lt;/embed&gt;
          &lt;/object&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>