Display a responsive video player with a poster image.

by anoopsuda

HTML

<div class="video-box">
  <video controls poster="https://via.placeholder.com/1200x675.png?text=Video+Thumbnail">
    <source src="your-video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
  </video>
</div>

CSS

.video-box {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 16 / 9; /* makes it responsive */
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.video-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}