我嵌入的 YouTube 视频停止工作答案

【问题标题】：My embedded YouTube videos stopped working我嵌入的 YouTube 视频停止工作
【发布时间】：2015-05-06 04:40:55
【问题描述】：

我正在开发一个网站，主页上有一些嵌入的 youtube 视频。这些视频直到最近都很好用，但现在看来它们不再有效了！它从 YouTube 获取视频，但我无法播放其中任何一个。

我将代码与早期版本进行了比较，代码仍然相同。几个小时以来，我一直在寻找和挠头，试图弄清楚为什么它不再起作用了。这是我正在使用的代码的 JSFiddle。 https://jsfiddle.net/ftmLsaym/

任何想法我需要做些什么来解决这个问题？

HTML

<div class="splashdiv">
    <iframe id="teaser" src="https://www.youtube.com/embed/PNT39y4N4H4?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div style="width: 100%">
    <button style="width:50%;float:left" onclick="previousVideo()">Previous</button>
    <button style="width:50%;float:right" onclick="nextVideo()">Next</button></div>

CSS

.splashdiv {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51%;
  z-index:-1;
}

.splashdiv iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

        var frame = document.getElementById('teaser');
        var pos = 0;
        var src = [
            "https://www.youtube.com/embed/PNT39y4N4H4?rel=0",
            "https://www.youtube.com/embed/M--kEKu8-IE?rel=0",
            "https://www.youtube.com/embed/3wgd8fHidzg?rel=0",
            "https://www.youtube.com/embed/2yf4bUW9mlE?rel=0",
            "https://www.youtube.com/embed/CueAcWRsaY8?rel=0",
            "https://www.youtube.com/embed/ulsa6Aog7Yw?rel=0",
            "https://www.youtube.com/embed/7qTp3lk7gt4?rel=0"
        ]

        function nextVideo() {
            if (pos < 6) {
                pos += 1;
                showVideo();
            }
        }
        function previousVideo() {
            if (pos > 0) {
                pos -= 1;
                showVideo();
            }
        }
        function showVideo() {
            frame.src = src[pos];
        }
        function barnaby() {
            pos = 1;
            frame.src = src[pos]+"&autoplay=1";
        }

【问题讨论】：

不敢相信我没有想到 z-index... 感谢您的快速回答！不过还有另一个问题.. 如您所见，barnaby 功能将自动播放添加到 src，但在触发此操作后，我只是得到“此视频不可用”有什么想法吗？我是否使用正确的参数进行自动播放？
编辑：发现视频以某种方式设置为私有...问题已解决

标签： javascript html css youtube

【解决方案1】：

z-index 太低了，你需要增加它，它在另一个div 后面一个解决方案虽然你不需要使用200，只是一个例子：）https://jsfiddle.net/ftmLsaym/5/

【讨论】：

【解决方案2】：

只需删除这一行：

z-index:-1

z-index:-1 将整个 .splashdiv div（包括 iframe）设置在 body 层之后。因此 YouTube iframe 无法捕获您的鼠标点击。

【讨论】：

【解决方案3】：

将 iframe 移出 splashdiv - 这应该可以让视频运行。

【讨论】：

【解决方案4】：

用这个替换你的.splashdiv css 代码

.splashdiv {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51%;
  z-index:2;
}

【讨论】：