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

Embedding a YouTube Video into your Tumult Hype Document

It's easy to embed a hosted video from a site like Youtube or Vimeo:

Here's how to embed a Youtube video:

  1. Go to the Youtube video page
  2. Click the Share button below the video
  3. Click the Embed button that appears. Adjust the size to match the size you wish to embed.
  4. Copy and paste the iframe code in the text field
  5. In Hype, select Insert > Rectangle. (You may want to adjust the color of the new rectangle to match your design at this point)
  6. Select Edit > Edit Inner HTML to edit the Source of the element
  7. Insert your copied code (example shown below)

<iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/aIVeEuRBCFE?html5-1&rel=0" width="420"></iframe>

Tip: Use the following query string at the end of Youtube videos to resolve issues with embedding in iOS web views, and some browsers: ?html5-1&rel=0.
Tip #2: Use this webpage to create advanced embed codes for your Youtube Video.

If you are not able to enter full screen, simply embed your Youtube URL within the inner HTML of a rectangle and use the following format:

<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXX?rel=0;" frameborder="0" allowfullscreen=""></iframe>

Embedding a Vimeo Video in your Tumult Hype Document

The workflow for embedding a Vimeo video is slightly different.

  1. On the video's page, click the 'Share' button.
  2. In the 'Embed' area of the overlay that appears, copy the <iframe... code.
  3. In Tumult Hype, add rectangle to your scene.
  4. Click Edit > Edit Inner HTML and paste the code you copied in step 2.
  5. Resize the rectangle to accommodate the size of your video.

Note: Videos may not work when you are previewing your Tumult Hype document. This is because the video URLs being pasted do not include the full protocol and URL of the video. For example, you may see src='//vimeo.com....' as the URL. Change that to src='https://vimeo.com....' to get your preview in Tumult Hype working correctly.

You may want to defer loading of your vimeo embed to speed up page loads. See this post for more info: Lazy Loading iframes - #4 by Pathfinder (Add data-vimeo-defer to your iframe code)

Embed an externally-hosted video (not a Hype video element)

Use this method if you would prefer to handle all the code yourself, or if you have a video file hosted elsewhere that you'd like to use:

First, drag your video files to your Resource library by dragging and dropping. Using this method, you also can optionally include the 'poster' attribute which shows a frame of your video or thumbnail prior to playback. If you don't have a poster image, that section of the code below can safely be deleted.

Next, create a regular rectangle, and select Edit > Edit Inner HTML. Modify the code below to match your video filenames, and paste it within your rectangle:

<video poster="${resourcesFolderName}/posterimage.png" width="640" height="360"  preload="auto" controls>
      <source src="${resourcesFolderName}/videofile.m4v" type="video/mp4" />
      <source src="${resourcesFolderName}/videofile.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="${resourcesFolderName}videofile.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video> 

You may want to remove the background color of your rectangle, and remove the default styling (like the border) to make your video more seamless. If your mp4/webm/ogv files are hosted elsewhere, just replace the code with "..." with the full url of your video files.

Stopping Audio within an HTML Widget

Audio playing in an HTML widget (in the form of embedded video or audio) will continue playing once your users have left the scene. To stop any audio playing from an HTML widget when leaving the scene, you'll need to add a small snippet of JavaScript to trigger 'On Scene Unload.' Here's the workflow for implementing this:

  1. Select your HTML widget.
  2. Open the 'Identity Inspector' and fill in a value for the Unique Element ID. This ID will allow us to directly target the HTML widget. In this example, we'll be using the ID video1
  3. In the On Scene Unload section of the Scene Inspector, add a Run JavaScript action.
  4. Add the following code:
var emptyInnerHTML = '';
hypeDocument.getElementById("video1").innerHTML = emptyInnerHTML

Note: Audio playing within a standard audio or video element will stop when exiting the scene. Visit the Audio & Video documentation for more information.

Example: StopVideo.zip (43.7 KB)


Loading Multiple Videos into a single video element

To create a single video element within which you can load different videos, follow these steps:

Create a regular rectangle, and select Edit > Edit Inner HTML.

<video height="100%" width="100%" controls="">
  <source src="" type="video/mp4">
</video>

Give the rectangle a unique ID, like hype_video

Add buttons or image thumbnails to the scene that will represent each film you want to play.

Give each button or thumbnail a unique ID.

Each button/thumbnail now needs to call a Javascript function that will load the respective video when clicked. We can use a single JS function for each button.

The function will use the Rectangle's element ID to find it and query it for its inner video element.
We then use the calling button's ID in a Switch clause to determine which video to load into the video element. We do this by setting the src Attribute.

Link a button to the following script (or check out the example below to skip ahead):

var hype_video = hypeDocument.getElementById('hype_video').querySelector("video");
	
switch (element.id) {
    case "MrMrs":
     hype_video.setAttribute('src', "./Videos/MR_AND_MRS_SMITH.mp4");
     hype_video.play()
        break;
    case "ALIEN":
        hype_video.setAttribute('src', "./Videos/ALIEN.mp4");
        hype_video.play()
        break;
}

Notice that we use paths for each video that point to an external file. These files are up one level from where the Tumult Hype document is exported to, and in a 'Videos' folder. Alternatively, you can drag videos into your resource library and use the normal ${resourcesFolderName} path:

"${resourcesFolderName}/ALIEN.mp4"

You can also use other clauses instead of a switch, like

if (element.id == "ALIEN"){
	//-- code block
	} else if (element.id == "MrMrs" ) {
	//-- code block
	}

Example:

vidLoad.hype 2.zip (174.9 KB) (Example from @MarkHunte)

Creating Custom Play / Pause Buttons

Please see this thread:

16 Likes

I moved a post to a new topic: Autoplay Vimeo Video

I moved 2 posts to a new topic: Stop video when exiting an additional layout

Thanks so much for this. I wish inline playing of streaming videos were supported on iPhones but I guess that's not possible at the moment via Hype, even with "webkit-playsinline" (I saw the other thread on this).

1 Like

If anyone would like to contribute to the above post, I have made it a WIKI.

1 Like

Can you also put a url link to another page when the embedded video is over?

this solution works fine on mac OS but it seems not to work on iOS.
Or is it possibly a matter of “Reflect” ?

If you’re still hitting this issue, can you share your document?

Estimated: the actionscript to mute a video to load a different scene only works in firefox but not in Safari or Chrome, someone has a suggestion for this?

Can you share your document? This is a pretty standard HTML5 event that is posted above. This page has more info & references for the ‘ended’ event: http://stackoverflow.com/a/2741527

Hello!

I'm sorry if this question was answered already, I've been looking around the forum for a while now but I haven't been able to find what I need and I'm getting a little desperate.

I'm doing and interactive webpage, and I'm using some youtube videos for that. I managed to put a video and use this script:

var emptyInnerHTML = '';
hypeDocument.getElementById("video1").innerHTML = emptyInnerHTML

to stop the audio when the user changes pages or whatever other interaction they do. It worked with one video, but when I tried to do it with another, it didn't work. I've tried erasing the widget and putting a new one, I've tried copying the one that worked, I've changed the names to something short, but nothing seems to work.

Does anyone now what can I do to solve this? Thank you in advance!

You’ll need to use a different element ID for each video, and different JS functions for each video as well. You can name them video1, video2, etc. I’d also be happy to look at your document. (Click ‘message’ on my profile page here).

This thread might also help: Stop video when exiting an additional layout

Hello, thank you for your answer.
I named everything differently and I made different JS functions as well, and it actually worked for a while until I duplicated a scene. When I changed the ID for that duplicated scene, everything stopped working.
Although, the video does stop when I press the same button to open the video, when I clicked anything else, it doesn’t work.

I also have an additional question, when I exported it to html5, the html is small and all the information is in the .js files, is this normal or is there a way to get the complete html5? So it can be edited in DW or other tool like that.

Sorry for all the trouble, and thank you for your help!

Hello,

If I have the video on the timeline,
How can I stop it when I exit the timeline?
and replay it when I get into the timeline.

Thank you.

Timelines can be thought of more as “streams of animations” than something to enter/exit. If you need to play or pause a video at an arbitrary point, this could be done with Timeline Actions and a little bit of JavaScript. You’d first need to assign a Unique Element ID for the video element via the identity inspector. Then you could have this code for a ‘Run JavaScript…’ action to pause:

hypeDocument.getElementById("myVideoID").pause();

And the corresponding code to play:

hypeDocument.getElementById("myVideoID").play();

Hello jonathan,

Thank you very much.
If my videos are embedded from youtube or vimeo, this JavaScript will do nothing.
How can I do for the embedded video with timeline?

A good helper library for playing and pausing Youtube using their API (without having to deal with their API) is this: http://mediaelementjs.com/examples/?name=youtube

You can run ‘pause’ or ‘play’ events against this player: http://mediaelementjs.com/#api

1 Like

Hello Daniel,

Thank you. I will try it.

Here there. I need to remove the play button and the timeline bar in an externally-hosted video. Is this possible?

If it is externally hosted, you would need to adjust the video embed code. Can you share a demo doc? For youtube, you would adjust this property: https://www.allowfullscreen.com/youtube