我正在开发一个网站,主页上有一些嵌入的 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;
}
JS
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
太低,需要调高,它在另一个div
后面,这里给出了一个解决方案,虽然你不需要使用 200,只是一个例子:) https://jsfiddle.net/ftmLsaym/5/
关于javascript - 我的嵌入式 YouTube 视频停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30067672/