响应式YouTube嵌入不在Firefox中显示

Question

此嵌入方法似乎适用于除Firefox之外的所有浏览器;我在crossbrowsertesting.com注册了免费试用版。我不进行直接的iFrame嵌入，我发现的所有问题和答案都与此有关。我正在使用这种方法：A Better Method for Embedding YouTube Videos on your Website。这个方法：

  

嵌入YouTube视频的缩略图，只有当用户手动点击缩略图时才会加载实际的视频播放器

我在Stack Overflow上找到的最接近的问题是YouTube embed not working in Firefox。但这不适用。

以下是在Chrome中正确显示的屏幕截图：

不在Firefox中显示：

在Firefox图像中，当我将鼠标悬停在<div>时，您可以看到检查器中显示的边距。

当我设置一个明确的height值时，此缩略图会显示在Firefox中，但它会否定该方法的响应性。

＆＃13;

＆＃13;

document.addEventListener("DOMContentLoaded",
  function() {
    var div, n,
      v = document.getElementsByClassName("youtube-player");
    for (n = 0; n < 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 = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
    play = '<div class="play"></div>';
  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);
}

＆＃13;

.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;
}

＆＃13;

<div class="youtube-player" data-id="VIDEO_ID"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我通过从父div中删除冗余的flexbox类来解决这个问题。具体做法是：

frow direction-column

（这些来自漂亮的flexbox网格框架FrowCSS）

我不完全理解为什么，但这些一定是在干扰FireFox中所要求的风格。很高兴我弄清楚了，在我发布SO之前的2-3个小时里，我一直在摔跤。希望这将有助于其他人。

Answer 2

我在 youtube-player 周围包裹了一个div，并将其设置为显示块并添加了100％的宽度。这解决了这个问题。将这些添加到youtube-player本身并不起作用。