找到youtube iframe并在上面附加一个div

Question

我试图在youtube iframe嵌入代码上放置一个div，但它不起作用。有什么想法吗？

我的代码是：

$('#iframe').prepend("<div style='width:800px; height:450px; background-color:#fff;'></div");

以及经典的youtube iframe:

<iframe width="800" height="450" src="//www.youtube.com/embed/mllXxyHTzfg?rel=0" frameborder="0" allowfullscreen></iframe>

Answer 1

如果您想要Javascript解决方案：

function coverVideo(){
    // Create an empty div
    var cover = $("<div></div>").appendTo("body");
    cover.css({
        // Position directly over the iframe
        position: "absolute",
        top: $("#iframe").offset().top,
        left: $("#iframe").offset().left,
        // Style as you like
        width: "800px",
        height: "450px",
        background: "#fff"
    });
}

Answer 2

将iframe放入容器div中，并在其旁边添加另一个元素：

<div id="iframeContainer">
    <iframe width="800" height="450" src="//www.youtube.com/embed/mllXxyHTzfg?rel=0" frameborder="0" allowfullscreen></iframe>
    <div class="overlay"></div>
</div>

定位叠加元素：

#iframeContainer {
    width: 800px;
    height: 450px;
    position: relative;
}
#iframeContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
#iframeContainer .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
    opacity: 0.7;
}

jsFiddle演示。

Answer 3

无法通过javascript向iframe添加内容。

在iframe外部添加一个div，并使用css定位将div放置在iframe上。