Problem w/fallback image for video on Android

So I’m dealing with an issue where before my hype animation video begins a fallback image showing a gigantic play icon briefly flashes on the screen as a sort of pre-load beforehand. It only happens on Android and it doesn’t happen on iOS. On iOS it just flashes white while the animation loads up. I attached a screenshot of the Android fallback image showing the play icon. I would like to find a way to get rid of this play icon image. Also attached is the hype animation uploaded to google drive. Any help would be much appreciated.
Thanks!!

https://drive.google.com/file/d/1ZgBqBU2SmMB5MWpDDB_MBQTvgobM5Ia0/view?usp=sharing

You can create a poster image for that video if you Add an additional HTML attribute:

Screenshot 2020-08-26 at 3.09.18 PM

  1. Select the video
  2. Switch to the Identity Inspector
  3. Add a 'poster' value in the key and this in the 'value': ${resourcesFolderName}/poster.jpg
  4. Add an image of the same ratio to the resource library and this will be used as the video loads

I recommend using a low resolution (or even blurry / super small image) to indicate that the video is on it way...

This post has a downloadable example: Setting background or poster image for video elements

1 Like

I'm sorry, I'm a bit of a rookie with this. How do I obtain the ID of the poster? How do I obtain a value? I really don't know how to do it... :frowning:

Someone correct me if I'm wrong.

I misspoke in my post — you don’t need to set an id for the video, just insert the additional HTML attributes.