Custom poster image for hosted video

How would I modify this embed code to replace the hosted poster image with my own?

<div style="position: relative; display: block; max-width: 960px;"><div style="padding-top: 56.25%;"><iframe src="https://players.brightcove.net/5596404819001/EGR6bHotm_default/index.html?videoId=6304774876001" allowfullscreen="" allow="encrypted-media" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe></div></div>

perhaps: Uploading Poster and Thumbnail Images

Right. Thank you for that!

I didn't know if there was a way I could insert some of this code . . .

. . . to overwrite the Brightcove-loaded image. That's all :slight_smile:

Also if you're using a standard video element in Hype, you can now use the Additional HTML Attributes in the Identity Inspector, and add an entry for poster that would be akin to the code snippet -- ${resourcesFolderName}/posterimage.png.

Just also make sure to uncheck "Automatically optimize when exporting" in the Resources Library for the image, otherwise the referenced file may have changed names.

The original code example used Brightcove though, so if you still intend to use that you'd probably need the solution @h_classen linked to.

Thank you!!!!!