我正在尝试使嵌入的Flickr视频在我为Tumblr致力于的响应主题上保持流畅。我在使用其他任何嵌入式视频或音频播放器(Youtube,Vimeo,Soundcloud,Spotify等)上都做得很好,但是Flickr视频重叠了,无法将其包含在其父容器中。
Flickr视频iframe及其某些子元素具有内联css声明,这些声明会导致内容溢出。这是iframe结构的屏幕截图
首先,我试图用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"]')
没有结果。
找不到任何相关的问题,因此希望有人可以解决。谢谢。
编辑=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
好的,我尝试将Flickr视频手动嵌入到JSFiddle而不是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中。这一定是为什么我iframe
既不能通过CSS也不能通过jQuery定位的原因,因为最初它不存在。
现在我的问题是:如何检查何时将iframe
其注入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);
}
}
如果动画名称与所需动画匹配,则表明已插入DOM节点。现在,我们将事件侦听器添加到父级:
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句