Javascript 无法使用jQuery将嵌入式Flickr视频iframe作为目标

我正在努力使一个嵌入Flickr的视频在我为Tumblr制作的一个响应主题上流畅。我与任何其他嵌入式视频或音频播放器（Youtube、Vimeo、Soundcloud、Spotify等）都做得很好，但Flickr视频重叠，无法在其父容器中包含它们

Flickr video iframe及其一些子元素具有内联css声明，导致内容溢出。

首先，我试图简单地用CSS覆盖这些样式，但没有效果。 然后我尝试使用jQuery，但无法针对

iframe

<iframe frameborder="0" allowfullscreen="" class="flickr-embed-frame" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" width="700" height="393" data-natural-width="1024" data-natural-height="576" style="overflow: hidden; padding: 0px; margin: 0px; width: 700px; height: 393px; max-width: none;" data-loaded="true"></iframe>

还尝试使用诸如

$（'video[src^='https://www.flickr.com“]”）

没有结果

找不到任何相关问题，因此希望有人能找到解决方案。谢谢

编辑=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

好的，我尝试在JSFIDLE上手动嵌入Flickr视频，而不是Tumblr（在Tumblr中，只需将URL链接粘贴到视频）。这是Flickr要求您添加代码以显示视频的代码：

<a data-flickr-embed="true"          href="https://www.flickr.com/photos/138041208@N02/27214754585/in/dateposted-public/" title="Test video"><img src="https://c2.staticflickr.com/8/7776/27214754585_9ecf29781c_b.jpg" width="1024" height="576" alt="Test video"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

似乎

iframe

是后来添加的，通过javascript注入DOM。这就是为什么我不能通过CSS或jQuery将

iframe

作为目标的原因，因为它最初并不存在

现在我的问题是：如何检查何时将此

iframe

注入DOM？这样我就可以瞄准它，并通过jQuery进行所需的更改

已解决=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

---

我终于找到了这个问题的解决方案，请查看我下面的评论。

查看上一篇文章，以便：

解决方案似乎是使用jQuery的

---

多亏了davidwalsh（davidwalsh.name/detect node insertion）公开的一个非常巧妙的技巧，我才成功地解决了这个问题

首先，我们添加一个将在插入iframe时开始的动画：

/* set up the keyframes; remember to create prefixed keyframes too! */
@keyframes nodeInserted {  
    from { opacity: 0.99; }
    to { opacity: 1; }  
}

动画需要应用于您想要侦听的元素（在本例中为iframe）

动画结束时，将触发插入事件

首先，您必须创建一个充当事件侦听器回调的函数：

var insertListener = function(event){
    if (event.animationName == "nodeInserted") {
        // This is the debug for knowing our listener worked!
        // event.target is the new node!
        console.warn("Another node has been inserted! ", event, event.target);
    }
}

如果动画名称与所需动画匹配，则我们知道已注入DOM节点。现在，我们将事件侦听器添加到父级：

document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

---

我将Flickr视频嵌入其中，效果很好：

谢谢Sami Stark，但我已经尝试过这个解决方案，但没有成功。问题似乎在于iframe本身。不能瞄准它，所以试图瞄准它的任何一个孩子都是行不通的，我想。非常聪明的解决方案！很高兴你把问题解决了！在您对我链接到的解决方案发表评论后，我在JSFIDLE上提出了一些想法，这些想法与延迟检测DOM更改有关，但从理论上讲，似乎没有任何效果。我想web标准不断演变的本质意味着有时需要聪明的概念，非直观的解决方案才是出路。在这些边缘案例中找到解决方案要复杂得多，但成功解决问题的回报是惊人的。干杯

.parent-container iframe {
    animation-duration: 0.001s;
    animation-name: nodeInserted;
}

var insertListener = function(event){
    if (event.animationName == "nodeInserted") {
        // This is the debug for knowing our listener worked!
        // event.target is the new node!
        console.warn("Another node has been inserted! ", event, event.target);
    }
}

document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari