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

Rasmus · February 17, 2020, 3:21pm

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

Thanks!

ajung · December 23, 2020, 12:44pm

Hi,
I'm currently making a kind of google street view for my school building (here's the page in progress: digitalerrundgang.rsp-bleialf.de)) 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?

Thanks!

jonathan · December 25, 2020, 11:18pm

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="https://www.youtube.com/embed/0-4R2BEGeTo" 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

joezeffdesign · June 2, 2021, 3:38pm

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?

Thanks!
Joe

Daniel · June 2, 2021, 3:41pm

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

with

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

MaxZieb · June 2, 2021, 3:50pm

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

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

Based on:

joezeffdesign · June 2, 2021, 4:16pm

Thank you both! I appreciate this forum so much.

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

Daniel · June 2, 2021, 4:21pm

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

joezeffdesign · June 2, 2021, 4:27pm

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

MaxZieb · June 2, 2021, 4:28pm

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

joezeffdesign · June 2, 2021, 4:35pm

Sorry to be so stupid

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?

THANKS

joezeffdesign · June 2, 2021, 4:40pm

This is what I see at GitHub:

And when I replace what's there as indicated:

It gets overwritten every time.

MaxZieb · June 2, 2021, 5:04pm

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