Player.js: Can't pass existing player to Vimeo.Player constructor if it's inside of other iframe

[danieltrolezi]

Hi!

I have an application that serves Vimeo videos as advertising through DoubleClick For Publishers. So I have the Doubleclick's iframe and inside of it the Vimeo's iframe.

I know that this is a rare case, but I need some help...
It seems that the Vimeo.Player constructor doesn't accept an element that is inside of other iframe.
The player.js returns this error message:

You must pass either a valid element or a valid id.

Here is a fiddle that reproduces the error.

To make this error reproducible, I had to create another fiddle with just the Vimeo's iframe and use it on the <iframe> tag of the first fiddle. I know that this is confusing, but feel free to ask anything.

Thanks!

[bdougherty]

Our DOM element check is checking against window.HTMLElement which I think is failing because HTMLElement is different in different documents. We can probably update that check to be a little less strict.

[bdougherty]

I don’t think this is something we can fix. The browser isn’t sending the message when you try to send it from the outer document (at least through JSFiddle).

Was this something that was working with the old library?

[danieltrolezi]

After some digging I realized that window.HTMLElement.prototype is different from the iframe.contentWindow.HTMLElement.prototype. It seems to be the same, but it isn't.

So, if we get the parent window of the given DOM Element, we can resolve the issue. This is a modified version of the method that check the given DOM Element:

export function isDomElement(element) {
    var doc = element.ownerDocument;
    var win = doc.defaultView || doc.parentWindow;

    return element instanceof win.HTMLElement;
}

Here's a fiddle as well.

[bdougherty]

That does fix that error, but it still can’t post or receive a message from the player.

[danieltrolezi]

You're right... I'm unable to post or receive any messages in my environment too.
And answering your previous question, I actually don't know if this works on the old library, this is a situation that I got stuck just yesterday.

I'll keep looking into this.

[danieltrolezi]

Maybe you can help me, @bdougherty...
I found out that the browser actually sends the message to the Vimeo's iframe when you try to send it from the top window, but Vimeo seems to have some validation checks on the message event listener, I don't know...

Here's a fiddle.

The best way I found to reproduce this is:

1. Open the javascript console
2. Change the window context to "player2"
3. On the console, enter the following:

window.addEventListener('message', function(event){
  console.log(event.origin, event.data);
});

1. Change the window context to "result"
2. On the console, enter the following:

player.contentWindow.postMessage({method: "play"}, 'https://player.vimeo.com');

You can see that the message is received, but nothing happened.
Any thoughts?

[bdougherty]

Ah you know what, we check that the source of messages is the parent of the iframe as a way to filter out messages not meant for the api. We can maybe change it, but we probably can't get to it for a little bit.

[Nidheeshnj]

I am also facing exactly the same issue. Is there any resolution for the same?

[acusti]

@bdougherty We’ve been trying to use the Vimeo player for HTML elements inside an iframe, though in our case, the iframe is actually just a separate rendering target that we use to isolate styles and support multiple visible selections in different browsing contexts (via react-frame-component).

I made a PR (#180) that modifies the isDomElement check discussed in this thread to make it work across iframes and modifies the message addEventListener/attachEvent listeners to be attached to the relative window object of the player's root HTML element rather than the global window object.

Those changes make the player and its controls work, at least for our setup.