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

此嵌入方法似乎适用于除Firefox以外的所有浏览器;我在crossbrowsertesting.com上注册了免费试用版来检查。我是而不是做了一个直接嵌入iFrame，我发现的所有问题和答案都与此相关。我正在使用这种方法：A Better Method for Embedding YouTube Videos on your Website。这种方法：响应式YouTube嵌入不在Firefox中显示

嵌入YouTube视频和实际的视频播放器的缩略图加载仅当用户手动点击缩略图

我能找到的堆栈溢出最近的问题是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>

来源

2017-05-03 Mike Peiman

我从父DIV去除冗余Flexbox的类解决了这个。具体做法是：

frow direction-column

（这些都是漂亮的Flexbox的电网框架FrowCSS）

我不完全理解为什么，但必须已经与Firefox中的requried风格的干扰。很高兴我明白了，在我发布SO之前的2-3个小时，我一直在摔跤。希望这将有助于未来的其他人。

来源

2017-05-03 21:53:38

这也是我的问题，使用display：flex在我的父容器上进行布局打破了上面刚在Firefox中列出的同样的响应式嵌入CSS。 – user863736

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

来源

2018-01-08 10:01:38

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

回答

相关问题