javascript - 响应式 YouTube 嵌入未在 Firefox 中显示

Question

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

embeds the thumbnail image of a YouTube video and the actual video player is loaded only when the user manually clicks the thumbnail

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

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

并且不在 Firefox 中显示:

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

当我设置显式 height 时此缩略图的值确实显示在 Firefox 中，但它否定了该方法的响应能力。

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

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

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

Answer 1

我通过从父 div 中删除多余的 flexbox 类来解决这个问题。具体来说:

frow direction-column

(这些来自漂亮的 flexbox 网格框架 FrowCSS )

我不完全明白为什么，但这些一定干扰了 FireFox 中所需的样式。很高兴我弄明白了，在发布到 SO 之前，我一直在努力解决这个问题 2-3 小时。希望这对将来的其他人有帮助。