Đặt chữ nằm trên Video

Làm sao để có background là video thay vì là image?

Dưới đây là một trong giải pháp tạo ra hiệu ứng hấp dẫn đó

Trong HTML

• <section class="outter">
  • <section class="video-container">
    • <video src="/file.mp4" autoplay loop playsinline muted></video>
    • <div class="callout">
      • <h1>Mystery Astronomy</h1>
      • <p>Reverse view traveling through star fields in space.</p>
    • </div>
  • </section>
• </section>

Trong CSS

• .outter {
  • width: 100%;
  • height: 100%;
  • display: flex;
  • flex-direction: column;
  • justify-content: center;
• }
• .video-container {
  • position: relative;
  • height: 300px;
  • width: 100%;
  • max-width: 1000px;
  • overflow: hidden;
• }
• video {
  • object-fit: cover;
  • position: absolute;
  • height: 500px;
  • width: 100%;
  • top: 0;
  • left: 0;
• }
• .callout {
  • position: relative;
  • display: flex;
  • justify-content: center;
  • align-items: center;
  • flex-direction: column;
  • height: 100%;
  • text-align: center;
  • z-index: 10;
  • width: 70%;
  • margin: auto;
• }

Nguồn: https://codepen.io/Fugamma/pen/bLrwYj