I don't want the poster image to occupy the full dimensions of this video but maintain aspect ratio and get centred. How can I achieve that?
Note: This is a snippet. The actual code is reactjs code sing react player for embedding the video. I will be using the config.file.attributes for sending the required attrs to s seen here. using style="object-fit=none" works but is that possible for react player?
code snippet:
<!DOCTYPE html>
<html>
<body>
<h1>The video poster attribute</h1>
<video width="900" height="1240" poster="https://www.w3schools.com/images/w3schools_green.jpg" controls object-fit="none">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
If that's an option for you, you can always create a wrapper
<div>around your video with the dimensions you want to use. Make that div haveposition: relative. Then, you say that the video hasposition: absoluteandwidth: 100%(means it occupies 100% of its parent's available space). Height will adapt automatically and video's aspect ratio will be respected. And to center the video you can use, for example,display: flex; align-items: center;on the wrapper div. Hope it works!