title: Video in popup box
body: <p>I am trying to embed a youtube code inside a popup box when the user clicks a link like this:</p>
  
  <p><img src="https://i.stack.imgur.com/lyTga.png" alt="enter image description here"></p>
  
  <p>However another user is having a problem on Firefox when the video is not even embed in the popup:</p>
  
  <p><img src="https://i.stack.imgur.com/tjqLq.jpg" alt="enter image description here"></p>
  
  <p>The user is having the problem in Firefox but when I tested it in Firefox everything was OK.</p>
  
  <p>Is there something in the settings of Firefox that he has and I don't?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;title&gt;Creating a modal window with HTML5 &amp;amp; CSS3&lt;/title&gt;
  
      &lt;style&gt;
      .modalDialog {
          position: fixed;
          font-family: Arial, Helvetica, sans-serif;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: rgba(0,0,0,0.8);
          z-index: 99999;
          opacity:0;
          -webkit-transition: opacity 400ms ease-in;
          -moz-transition: opacity 400ms ease-in;
          transition: opacity 400ms ease-in;
          pointer-events: none;
      }
  
      .modalDialog:target {
          opacity:1;
          pointer-events: auto;
      }
  
      .modalDialog &gt; div {
          width: 560px;
          position: relative;
          margin: 10% auto;
          padding: 5px 20px 13px 20px;
          border-radius: 10px;
          background: #fff;
          background: -moz-linear-gradient(#fff, #999);
          background: -webkit-linear-gradient(#fff, #999);
          background: -o-linear-gradient(#fff, #999);
      }
  
      .close {
          background: #606061;
          color: #FFFFFF;
          line-height: 25px;
          position: absolute;
          right: -12px;
          text-align: center;
          top: -10px;
          width: 24px;
          text-decoration: none;
          font-weight: bold;
          -webkit-border-radius: 12px;
          -moz-border-radius: 12px;
          border-radius: 12px;
          -moz-box-shadow: 1px 1px 3px #000;
          -webkit-box-shadow: 1px 1px 3px #000;
          box-shadow: 1px 1px 3px #000;
      }
  
      .close:hover { background: #00d9ff; }
      h2
      {
          text-align:center;  
      }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;a href="#openModal"&gt;Open Modal&lt;/a&gt;
  
  &lt;div id="openModal" class="modalDialog"&gt;
      &lt;div&gt;
          &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
          &lt;h2&gt;Youtube Video&lt;/h2&gt;
         &lt;iframe width="560" height="315" src="http://www.youtube.com/embed/98H2x9BjUxE?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>