我正在尝试使嵌入的 Flickr 视频在我正在为 Tumblr 开发的响应式主题上流畅。我对任何其他嵌入式视频或音频播放器(Youtube、Vimeo、Soundcloud、Spotify 等)都表现良好,但 Flickr 视频重叠,无法将它们包含在其父容器中。
Flickr 视频 iframe 及其一些子元素具有内联 css 声明,这会导致内容溢出。 Here's a screenshot with the iframe structure
首先,我尝试用 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>
尽管 iframe
有一个 css 类 .flickr-embed-frame
我既不能定位它,也不能定位它的子元素。我已经尝试过在 $(document).ready()
内使用我的功能和$(window).load()
任何结果。
像 $('.flickr-embed-frame').contents().find('.child-class');
这样的选择器也没有工作。
iframe
内有一个video
元素:
<video src="https://www.flickr.com/photos/138041208@N02/27214754585/play/hd/9ecf29781c/" width="699" height="393" poster="https://farm8.staticflickr.com/7776/27214754585_9ecf29781c_c.jpg" controls=""></video>
还尝试使用像 $('video[src^="https://www.flickr.com"]')
这样的选择器来定位它没有结果。
找不到任何相关问题,希望有人能提供解决方案。谢谢。
编辑 =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
好的,我尝试在 JSFiddle 而不是 Tumblr 上手动嵌入 Flickr 视频(您只需将 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注入(inject)到DOM中。这一定是我无法定位iframe
的原因,既不是通过 CSS 也不是 jQuery,因为最初它并不存在。
现在我的问题是:当出现此 iframe
时,我该如何检查被注入(inject)到 DOM 中?这样我就可以瞄准它并通过 jQuery 进行我需要的更改。
已解决 =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
我终于找到了解决这个问题的方法,请查看下面的评论。
最佳答案
感谢 David Walsh (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)。
.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);
}
}
如果动画名称与所需的动画匹配,我们就知道已经注入(inject)了 DOM 节点。现在我们将事件监听器添加到父级:
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
Here's a demo我用嵌入的 Flickr 视频制作的,工作正常:
关于javascript - 无法使用 jQuery 定位嵌入式 Flickr 视频 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37414937/