title: Responsive YouTube embed not displaying in Firefox
body: <p>This embed method appears to be working on all browsers except Firefox; I signed up for a free trial at crossbrowsertesting.com to check. I’m <em>not</em> doing a direct iFrame embed, and all the questions and answers I’ve found relate to that. I’m using this method: <a href="https://www.labnol.org/internet/light-youtube-embeds/27941/" rel="nofollow noreferrer">A Better Method for Embedding YouTube Videos on your Website</a>. This method:</p>
  
  <blockquote>
    <p>embeds the thumbnail image of a YouTube video and the actual video player is loaded only when the user manually clicks the thumbnail</p>
  </blockquote>
  
  <p>The closest issue I could find on Stack Overflow was <a href="https://stackoverflow.com/questions/13226272/youtube-embed-not-working-in-firefox">YouTube embed not working in Firefox</a>. But this does not apply.</p>
  
  <p>Here are screenshots of it displaying properly in Chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/XVWyE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XVWyE.jpg" alt="enter image description here"></a></p>
  
  <p>And not displaying in Firefox:</p>
  
  <p><a href="https://i.stack.imgur.com/cOeEi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cOeEi.png" alt="enter image description here"></a></p>
  
  <p>In the Firefox image you can see the margin showing up in the inspector as I hover that <code>&lt;div&gt;</code>.</p>
  
  <p>When I set an explicit <code>height</code> value this thumbnail does show up in Firefox, but it negates the responsiveness of the method.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("DOMContentLoaded",
    function() {
      var div, n,
        v = document.getElementsByClassName("youtube-player");
      for (n = 0; n &lt; v.length; n++) {
        div = document.createElement("div");
        div.setAttribute("data-id", v[n].dataset.id);
        div.innerHTML = labnolThumb(v[n].dataset.id);
        div.onclick = labnolIframe;
        v[n].appendChild(div);
      }
    });
  
  function labnolThumb(id) {
    var thumb = '&lt;img src="https://i.ytimg.com/vi/ID/hqdefault.jpg"&gt;',
      play = '&lt;div class="play"&gt;&lt;/div&gt;';
    return thumb.replace("ID", id) + play;
  }
  
  function labnolIframe() {
    var iframe = document.createElement("iframe");
    var embed = "https://www.youtube.com/embed/ID?autoplay=1";
    iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    this.parentNode.replaceChild(iframe, this);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.youtube-player {
    position: relative;
    padding-bottom: 56.23%;
    /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }
  
  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }
  
  .youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
  }
  
  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }
  
  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("//i.imgur.com/TxzC70f.png") no-repeat;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="youtube-player" data-id="VIDEO_ID"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>