Fallback image for video in mobile


(Gunnar Thorvaldsson) #1

I want an image to appear instead of a background video when viewed on mobile.


If you have a video in Hype already, set its element ID to be video1
Next, drag an image to your resource library you want to use as the poster image (this appears prior to playing the video). Make a note of the name. In the example below, I use the name posterimage.png

You can now use JavaScript to set a poster image for the video by targeting its element. Run the following JavaScript ‘On Scene Load’ in the scene where you have your video:

var myVideo = document.getElementById("video1");

Uncheck ‘Automatically Optimize when Exporting’ in the resource library for that image.

Alternatively, you can use a standard Video embed code which includes a reference to your video. The code below assumes your mp4, off, and png files exist in your resource library:

<video poster="${resourcesFolderName}/posterimage.png" controls="controls" >
   <source src="${resourcesFolderName}/testmovie.ogg" type="video/ogg"/>
   <source src="${resourcesFolderName}/testmovie.mp4" type="video/mp4"/>