HTML视频布局优化需求：实现三视频并排、响应式适配及无黑边播放

Hey there! Let's tackle your video layout issues one by one. The main problems right now are your videos stacking single-column, invalid padding/spacing, and we'll also handle the "no black bars" playback request. Here's a complete solution:

Step 1: Fix Your HTML Structure #

First, you need to wrap each video + its caption in a dedicated container—this makes it easy to control spacing and keep them paired when the layout wraps. Also, remove the <p> tag around your videos (block-level elements like <p> don't play nice with inline/side-by-side content).

Modified HTML snippet for the videos section:

<div class="featured">
  <h3 style="color:#ffffff"> Featured Videos: </h3>
  <br><br>
  <div id="videos">
    <!-- Video 1 + Caption -->
    <div class="video-container">
      <div class="video-wrapper">
        <iframe src="https://www.youtube.com/embed/c74kMCOmP80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="caption">Caption 1</div>
    </div>

    <!-- Video 2 + Caption -->
    <div class="video-container">
      <div class="video-wrapper">
        <iframe src="https://www.youtube.com/embed/c74kMCOmP80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="caption">Caption 2</div>
    </div>

    <!-- Video 3 + Caption -->
    <div class="video-container">
      <div class="video-wrapper">
        <iframe src="https://www.youtube.com/embed/c74kMCOmP80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="caption">Caption 3</div>
    </div>
  </div>
  <h3 style="color:#ffffff"> Featured Blog Posts </h3>
  <br><br>
</div>

Step 2: Update Your CSS #

We'll use Flexbox for the responsive grid, add a ratio-locked wrapper to eliminate black bars, and fix spacing. Add these styles to your style.css:

/* Video Layout Styles */
#videos {
  display: flex;
  flex-wrap: wrap;
  gap: 40px; /* This creates the 40px spacing between video containers */
  padding: 0 20px; /* Optional: add side padding for small screens */
}

.video-container {
  flex: 1 1 300px; /* Grow/shrink, minimum width 300px—will wrap when screen is too small */
}

/* Ratio-locked wrapper to prevent black bars (16:9 is standard for YouTube) */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video fills the wrapper without black bars (crops edges if needed) */
}

/* Caption Styles */
.caption {
  color: #ffffff;
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
}

/* Fix existing featured section padding (remove the huge 500px bottom padding) */
.featured {
  background-color: #222;
  padding: 5px 20px 50px; /* Top, left/right, bottom */
  font-size: 18px;
}

Key Fixes Explained: #

• Flexbox Layout: display: flex on #videos makes the video containers side-by-side, flex-wrap: wrap triggers single-column layout when the screen can't fit 3 containers.
• Gap Property: Replaces messy margin hacks—gap:40px adds consistent spacing between video containers.
• Ratio-Locked Wrapper: The padding-top:56.25% trick forces the wrapper to maintain a 16:9 aspect ratio, matching YouTube's default video size. object-fit:cover ensures the video fills the space without black bars (it will crop edges if the video's native ratio doesn't match, but avoids letterboxing).
• Cleaner Structure: Wrapping each video+caption keeps them grouped when the layout wraps, so captions stay attached to their videos.

Bonus: Remove Invalid Width Values #

You had width="33%-40" on your iframes—this isn't valid CSS. The new setup uses percentage-based widths via the wrapper, so you can delete those inline width/height attributes from the iframes.

That should solve all your issues: three videos side-by-side with proper spacing, responsive wrapping to single-column, captions below each video, and no black bars during playback!

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