0

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>
user415612
  • 457
  • 1
  • 3
  • 13

1 Answers1

1

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 have position: relative. Then, you say that the video has position: absolute and width: 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!

nara92
  • 153
  • 6