How To Create Video Background Example

<!DOCTYPE html>
<html>
<head>
<title>Video Background Example</title>
<style>
  .video-bg-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: #000;
  }
  .video-bg-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }
  .content {
    position: relative;
    z-index: 10;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    text-align: center;
    padding-top: 40px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  }
</style>
</head>
<body>
  <h2>Video Background</h2>
  
  <div class="video-bg-container">
    <video autoplay muted playsinline poster="/pix/samples/35l.jpg">
      <source src="/video/koh_kood_3m.mp4" type="video/mp4">
    </video>
    <div class="content">
      <h1>Welcome</h1>
      <p>This text is sitting on top of a video background.</p>
    </div>
  </div>

<p>The CSS uses <code>object-fit: cover</code> and absolute positioning to ensure the video always covers its container area.</p>
</body>
</html>