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

我想将div放在youtube iframe中嵌入代码，但它不起作用。有什么建议吗？找到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>

来源

2014-08-31 Irene T.

这是不可能的.. – webkit 2014-08-31 11:46:37

即使我给id和id到youtube iframe并在其上附加一个div？ – 2014-08-31 11:55:05

您不能影响来自不同域的iframe中的任何内容..实际上，您放置在页面上的youtube iframe不是'yours'..您只能对iframe和其周围的元素进行样式设置，但iframe内容本身是不可接触的，如果你正确地解释你想要达到什么目标，也许还有另一种方法。 – webkit 2014-08-31 12:11:25

这是不可能通过JavaScript将内容添加到一个iframe。

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

来源

2014-08-31 11:45:57 javiyu

如果你想要一个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" 
    }); 
}

来源

2014-08-31 11:51:09

这不行@理查德！ – 2014-08-31 11:58:00

尝试添加'id =“iframe”'到您的iframe，并确保此代码恰好在您关闭标记之前（因此iframe在您尝试运行此代码之前就已存在），并且这应该可以工作。 – 2014-08-31 12:22:54

错过了ID尚未应用于iframe，谢谢！ – 2014-08-31 16:12:03

把你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 Demo。

来源

2014-08-31 12:09:31 dashtinejad

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

回答

相关问题