Custom Video Embedding: Youtube, Vimeo, or hosted video files | Stopping Audio when exiting the scene

Got it working. I just removed “controls” in you code above. Missed it :slight_smile:


1 Like

I'm currently making a kind of google street view for my school building (here's the page in progress: and in every room there should play an embedded YouTube Video for a subject. Of course I want the video/audio to stop after "leaving" a room. As Daniel posted here there is a script that "empties" the widget after leaving the scene. The problem is that I only have one scene and every arrows is linked to a certain point in the timeline.
My question from someone who has nearly no clue of javascript: Can I pause the embedded audio/video after "leaving" the room/jumping to another point in the timeline or do I have spread every room/floor on different scenes to realize that?


Setting the innerHTML to be empty when leaving a scene works well because Hype will rebuild the innerHTML when reloading the scene anyways.

So you can use the technique of emptying the innerHTML of the element to stop the video, but you will need to set the innerHTML to your desired video when going back to the point in which it should be displayed.

It would probably just be adding the youtube embed code to an element with a specified ID, like:

hypeDocument.getElementById("myBoxID").innerHTML = '<iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

P.S. Very cool document! Reminds me of an old HyperStudio game I made as a kid where the point was to escape from school without getting caught :smiley:

1 Like

Hi all,

Is there a quick and easy way to replace the YouTube-provided poster image with an image from your Resources Library when embedding a video using YouTube's provided embed code?


has a good answer, but would need to be within an HTML widget since it requires inline JavaScript.

You would replace

<img src="my_thumbnail.png" style="cursor:pointer" />


<img src="${resourcesFolderName}/imageinresourceslibrary.png" style="cursor:pointer" />

For YouTube you can give this a try (using Hype Data Decorator): (230,7 KB)

This version is modified to use data attributes for
data-yt-poster (optional) and data-yt-videoid (required)

Based on:

1 Like

Thank you both! I appreciate this forum so much.

@MaxZieb, how would I replace the poster image with . . . ${resourcesFolderName}/img_workspaces.png

You would edit the code in the Inner HTML of the example

Tried that, but the Javascript seems to overwrite what I insert. :frowning:

You need to overwrite the poster attribute. Not the style attribute.

Sorry to be so stupid :crazy_face:

I was trying to modify the URL here:

Sounds like that's not where I do it. So where do I insert my URL if not here?


This is what I see at GitHub:

And when I replace what's there as indicated:

It gets overwritten every time.

I updated the code and download above to use data attributes…