2

I'm trying to make an embedding Flickr video be fluid on a responsive theme I'm working on for Tumblr. I'm doing well with any other embedded video or audio players (Youtube, Vimeo, Soundcloud, Spotify, etc), but Flickr videos are overlaping, being unable to contain them on their parent container.

Flickr video iframe and some of its children elements has inline css declarations which are causing the content overflows. Here's a screenshot with the iframe structure

First I've tried to simply overwrite those styles with CSS but have no effect. Then I tried with jQuery, but can't target the 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>

Despite the iframe has a css class .flickr-embed-frame I can't neither target it, nor its child elements. I've tried with my function inside $(document).ready() and $(window).load() with any result.

Selectors like $('.flickr-embed-frame').contents().find('.child-class'); haven't worked neither.

Inside the iframe there's a video element:

<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>

Also tried to target it with selectors like $('video[src^="https://www.flickr.com"]') with no result.

Couldn't find any question related, so hope someone will have a solution. Thanks.

EDIT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Ok, I tried to manually embed a Flickr Video on a JSFiddle instead of Tumblr (where you just have to paste an URL link to the video). This is the code Flickr asks you to add on your code in order to display the video:

<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>

Seems to be that iframe is added later, injected into the DOM via javascript. This must be the reason why I can't target the iframe, neither via CSS nor jQuery, since initially it doesn't exist.

Now my question is: How can I check when this iframe is injected to the DOM? This way I could target it and make the changes I need via jQuery.

SOLVED =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

I've finally found a solution for this problem, check my comment bellow.

Rick
  • 71
  • 7

2 Answers2

2

Thanks to a pretty neat trick exposed by David Walsh (davidwalsh.name/detect-node-insertion) I've managed to solve this.

First we add an animation that will start when the iframe is inserted:

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

The animation needs to be applied on the elements you'd like to listen for (in this case, the iframe).

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

When the animation ends, the insertion event will fire.

First, you have to create a function which acts as the event listener callback:

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);
    }
}

If the animation name matches the desired animation, we know a DOM node has been injected. Now we add the event listener to the parent:

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

Here's a demo I made with the Flickr video embedded, working fine:

Rick
  • 71
  • 7
  • 2
    Very clever solution! Glad you got it sorted out! After your comment about the solution I linked to not working, I played around with a couple ideas on jsfiddle that had to do with delayed detection of DOM changes, but it seems nothing worked, when in theory it should have. I guess the ever evolving nature of web standards means sometimes clever concepts, and non-intuitive solutions are the way to go. It's a lot more complicated to come to solutions in these edge cases, but the reward in tackling the problem successfully is awesome. Cheers. – Sami Fouad May 25 '16 at 09:40
0

Check out this previous post on SO: How to access the content of an iframe with jQuery?

The solution seems to be using jQuery's contents()

$("#myiframe").contents().find("#myContent")
Community
  • 1
  • 1
Sami Fouad
  • 376
  • 2
  • 9
  • Thanks Sami Stark, but I've already tried this solution and hasn't worked for me. The problem seems to be with the iframe itself. Coulnd't target it, so trying to target any of its children won't work, I guess. – Rick May 24 '16 at 13:40