Youtube audio continues when hiding popup


(Paula) #1

Hi everybody!
I’ve reading about this thing, but i can’t make it work. The thing is that I’m using Javascript for showing and hiding symbols. When I hide symbols that have Html youtube videos embed, the audio continuos to reproduce.
I there a way to solve this.
Here is my file
https://drive.google.com/open?id=1ItaUCTqmiDbOi_g7R-U9zjwIwYurN-AL


(Jonathan Deutsch) #2

Please see the post on Custom Video Embedding: Youtube, Vimeo, or hosted video files | Stopping Audio when exiting the scene.

This requires JavaScript actions. Basically the way to do this is to use the youtube code as Inner HTML for a Rectangle (div). When you want the youtube video to go away, you overwrite the Inner HTML with an empty string, which blanks it out. The flip side is that if you want it to show up, you also need to then write it with the youtube embed/iframe code.


(Paula) #3

Hi @jonathan!
Thanks for your answer! But I’m afraid I can’t make it work, because I’m using a JavaScript that shows and hide the symbol which has the Inner HTML. So it’s not a scene load problem, because it’s a long scroll page where you touch buttons that shows you popups (symbols) and when you hide this popups the music continuos because I don’t change the scene, I just hide it. Is there another way to solve this problem? Cause I can’t divide the web in scenes because the client wants a scroll page.


(Jonathan Deutsch) #4

If you’re already using JavaScript to show/hide, you should be able to tack on adding/removing the Inner HTML at that point.

If the symbol only has one instance, you can add an ID to the element containing the audio via hypeDocument.getElementById("mydiv"). Otherwise you can give the element a class name, the symbol element an ID, and then combine lookups like:

var symbolElement = hypeDocument.getElementById("mysymbol");
var videoContainerElements = symbolElement.getElementsByClassName("myVideoContainerClass");
for(var i = 0; i < videoContainerElements.length; i++) {
  // do something with videoContainerElements[i].innerHTML depending on if it is show/hide
}