如何不使用position:fixed实现div的YouTube视频背景

I totally get the frustration here—fixed positioning messes with document flow, but ditching it breaks the video layout. Let’s adjust the approach to keep the video background contained in a 70% viewport height div while keeping the rest of your content in the normal flow.

Key Fixes Explained #

The core issue was that without position: relative on the parent .header, the absolutely positioned video container had no reference point. Here’s what we’ll change:

• Replace position: fixed on .header with position: relative so it stays in the document flow.
• Use height: 70vh instead of height: 70% to ensure it takes up exactly 70% of the viewport height (more reliable than percentage alone).
• Keep the video container and iframe as position: absolute—since the parent is now relative, they’ll properly fill the header space without escaping it.

Modified Code #

CSS

.container-fluid { padding: 0; }

/* Header section */
.header {
  background: #000;
  position: relative; /* Changed from fixed */
  height: 70vh; /* Use viewport height for consistent 70% */
  overflow: hidden;
}

.vid-container, .header iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.header-text {
  color: white;
  z-index: 1;
  position: relative; /* Ensure text stays above video */
  padding: 2rem; /* Optional: Add padding to position text nicely */
}

.row { color: red; /* for debugging */ }

/* Maintain video aspect ratio */
@media (min-aspect-ratio: 16/9) {
  .vid-container {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .vid-container {
    width: 300%;
    left: -100%;
  }
}

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body class="container-fluid">
<div class="header">
  <div class="vid-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/DXA3JYdFKAE?controls=0&showInfo=0&rel=0&autoplay=1&loop=1&playlist=DXA3JYdFKAE&start=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="header-text">
    <h1>Welcome</h1>
  </div>
</div>
<div class="row">
  <div class="col-lg-4 feature">
    <i class="fas fa-check-circle orange-tick"></i>
    <h3>Easy to use.</h3>
    <p>So easy to use, even your dog could do it.</p>
  </div>
  <div class="col-lg-4 feature">
    <i class="fas fa-bullseye target"></i>
    <h3>Elite Clientele</h3>
    <p>We have all the dogs, the greatest dogs.</p>
  </div>
  <div class="col-lg-4 feature">
    <i class="fas fa-heart heart"></i>
    <h3>Guaranteed to work.</h3>
    <p>Find the love of your dog's life or your money back.</p>
  </div>
</div>
</body>

Why This Works #

• The .header stays in the document flow now, so your .row content will naturally appear below it instead of overlapping.
• The video container uses absolute positioning relative to the .header, so it fills the entire 70vh space without breaking layout.
• The aspect ratio media queries still ensure the video scales correctly without black bars, just like your original setup.

内容的提问来源于stack exchange，提问作者Aakash Dasgupta