此网站如何在覆盖中显示此youtube视频？
此网站如何在覆盖中显示此youtube视频？
提问于 2018-08-13 02:54:18
我一直在尝试理解这个站点Meg的main.min.js文件中的哪段代码会将youtube视频作为iframe插入到覆盖图中。
<iframe id="auto-play-vid" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="100%" height="360" src="https://www.youtube.com/embed/bsLk0NPRFAc?rel=0&playsinline=0&autoplay=1&controls=1&enablejsapi=1&showinfo=0&suggestedQuality=hd720&wmode=transparent&iv_load_policy=3&origin=http%3A%2F%2Foutlawed-movie.test%3A8888&widgetid=2"></iframe>当我下载代码时，id=" youtube -overlay“是空的，它没有包含youtube视频的iframe。但是当我在浏览器中打开index.html文件时，视频就会播放...为什么以及如何做到这一点？
</div>
<div id="auto-play-close">
<div class="back">
<svg fill="#ffffff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</div>
<div class="front">
<svg fill="#c7ef00" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2018-08-13 03:19:10
function e() {
$("#youtube-overlay").css("display", "flex"),
utilsController.checkYouTube() ? setTimeout(function() {
t = function() {
try {
n.pauseVideo()
} catch (e) {}
}
,
s = function() {
try {
n.playVideo()
} catch (e) {}
}
,
h || _isIpad || ($(window).bind("focusout", t),
$(window).bind("focusin", s)),
$("#auto-play-close").on("click", function() {
try {
n.destroy()
} catch (e) {
console.log(e)
}
h || _isIpad || ($(window).unbind("focusout", t),
$(window).unbind("focusin", s)),
$("#youtube-overlay").css("display", "none"),
v = !1,
_ && b(),
i && "true" === i && f()
}),
n = new YT.Player("auto-play-vid",{
width: "100%",
videoId: o,
playerVars: {
rel: 0,
playsinline: 0,
autoplay: h || _isIpad ? 0 : 1,
controls: 1,
enablejsapi: 1,
showinfo: 0,
suggestedQuality: "hd720",
wmode: "transparent",
iv_load_policy: "3"
},
events: {
onReady: onPlayerReady,
onStateChange: function(e) {
e && 0 == e.data && ($("#youtube-overlay").css("display", "none"),
v = !1,
_ && b(),
f())
}
}
})
}, 300) : setTimeout(e, 1e3)
}()
}这个部分在运行时(大概是在页面加载时)将#youtube-overly div的显示属性切换为flex(而不是none)，以允许div获取fixed的0,0,0,0位置(即固定在所有四个角上-读取为：iframe )，并显示在CSS更改之前已经在div中的全屏。
在做了一些很难从精简代码中读取的检查之后，onStateChange将它切换回none并隐藏了div。
iframe位于一个“隐藏”的中，上面的代码片段(以及其他与问题无关的东西)“显示”了这个div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51811898
复制相关文章
相似问题