我尝试将div
添加到YouTube iframe
元素,以便我可以在视频上显示内容。但是这段代码:
<!DOCTYPE html>
<html>
<body>
<iframe id="player" width="854" height="480" src="https://www.youtube.com/embed/Jn9r0avp0fY" frameborder="0" allowfullscreen></iframe>
<script>
var player = document.getElementById('player');
var div = document.createElement('div');
div.id = 'newDiv';
div.innerHTML = 'Hello, world!';
player.appendChild(div);
</script>
</body>
</html>
完全没有效果。我可以使用JavaScript来确认div
确实在document.getElementById('player').children
中,但在检查页面上的元素时,无处可寻。为什么会这样?
更新:所以我发现这个网站https://www.reembed.com/成功地将自己的元素覆盖在YouTube嵌入式iframe
播放器之上,但我不知道他们是如何实现的它
答案 0 :(得分:0)
这可以实现使用该div的绝对和顶部左侧CSS属性,无需在iframe中插入div。
答案 1 :(得分:0)
以下是在iframe中追加元素的解决方案。
<!DOCTYPE html>
<html>
<body>
<iframe id="player" width="854" height="480" src="https://www.youtube.com/embed/Jn9r0avp0fY" frameborder="0" allowfullscreen></iframe>
<script>
setTimeout(function() {
var player = document.getElementById('player');
var iframeDocument = player.contentDocument || player.contentWindow.document;
var div = document.createElement('div');
div.id = 'newDiv';
div.style.fontSize = '50px';
div.innerHTML = 'Hello, world!';
if (iframeDocument) {
var iframeContent = iframeDocument.getElementsByTagName('body');
console.log(iframeContent);
iframeContent[0].appendChild(div);
}
}, 100);
</script>
</body>
</html>
&#13;
但请确保您访问同一来源的iframe,否则您将遇到跨域安全问题。
检查跨源安全问题 SecurityError: Blocked a frame with origin from accessing a cross-origin frame