Target all iframes on the scene within HTML widgets

Using JavaScript with Hype
1

Hi just wondering if anyone can point me in the right direction please?

Problem:
Have multiple HTML widgets with iframes containing Vimeo embeds
Need to target the iframes and pause the videos when not being viewed

I know that the HTML widgets are iframes also so it's an iframe within an iframe. Heres my code so far!

Problem with this line of code ???
sceneElement.getElementsByTagName("iframe");

var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var allIframesOnScene = sceneElement.getElementsByTagName("iframe");

// loop over each
for(var i = 0; i < allIframesOnScene.length; i++) {
	// filter out anything without player.vimeo.com in the src
	if(allIframesOnScene[i].src == null || allIframesOnScene[i].src.indexOf("player.vimeo.com") == -1) {
		continue;
	}
	
	// we have a vimeo iframe
	var iframe = allIframesOnScene[i];
	var player = $f(iframe);
	player.api("pause");
}
2

Does anyone know what the TagName is for the HTML Widget in hype? This might help solve the issue.

Many thanks.

3

Why are you doing this iFrame inception to begin with? Best to keep a solution as simple as possible! I would probably just write a function that populates rectangles with a Vimeo embed or empties it out / pause it.

1 Like
4

The rectangle element is automatically adding ="" after the data-vimeo-defer attribute in the iframe otherwise I would use the rectangle element!

5

Hmmm, it should be okay that the attribute has an empty value, since that is functionally equivalent. Do you find this causes a particular problem? (feel free to post a sample doc and I'd be interested to see).