poster image when using video element

User 283347 Photo


Registered User
388 posts

Is there a way to center the poster image (the image displayed on phones /smaller screens instead of the video after certain break-points)when using the video element in SD?

It works fine (meaning the video is replaced by the image), but the image needs to be centered, etc. to display correctly.

Or should I not use a poster and just use a bg image at smaller break-points?

Thanks!
User 2088758 Photo


Senior Advisor
2,985 posts

Hi Mark,

I often choose the last option when i want my video background to turn into a image on mobile. I will just keep the background image of the container with what I want to use and set the video container display to none at the mobile breakpoint of the project.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 283347 Photo


Registered User
388 posts

Thanks, Steve!

Seems that is the best way.

MJ
User 2885740 Photo


Registered User
59 posts

A simpler way is to leave the poster image as it is and to set the object fit to “cover” for the video element (apply styles= “to all elements of this type”).


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.