I've seen many posts on this but when I add a poster image to the video element it changes the size of the video player.

<video src="/video.mp4" poster="/image.jpeg"  controls playsinline />

.videoPlayer {
  cursor: pointer;
  object-fit: cover;
}

img, video {
  max-width: 100%;
  height: auto;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

What could the reasons be that the video size is changing based on the image?

CodePudding user response：

The intrinsic size of the <video> element is determined by its current frame.
When the image from the poster attribute is displayed, this "current frame" is the poster frame. So the poster frame is what determines the <video>'s intrinsic size.

In the absence of an other rule setting the video size (e.g the width or height attributes or CSS rules), this intrinsic size is what sets the display size of the element.