移动端视频容器如何实现100%宽度适配及顶部对齐？

当缩小浏览器窗口模拟移动端尺寸时，图片可正常自适应并填满100%宽度，但视频无法实现以下效果：

1. 填满100%宽度
2. 顶部对齐——视频上下出现大量绿色空白区域
   尝试过使用media queries，也考虑过采用百分比/auto值，但均无效果，求解决思路。

问题根源与解决步骤 #

核心问题 #

1. 视频所在的carousel-item设置了内联padding:20px，直接限制了视频的可扩展宽度
2. 父容器slideshow-container使用align-items:center，强制视频垂直居中，导致上下出现绿色空白
3. iframe的固定宽高属性未被覆盖，无法跟随容器宽度自适应

具体修复方案 #

• 移除视频项内边距：删除两个视频carousel-item上的style="padding:20px"，消除宽度限制
• 调整垂直对齐方式：将.slideshow-container的align-items:center改为align-items:flex-start，让视频顶部对齐容器
• 重构iframe样式：
  • 给iframe设置width:100%，强制占满容器宽度
  • 设置height:auto，让高度按视频比例自适应
  • 保留max-width:100%确保不会超出容器，根据需求选择object-fit:contain（保持完整比例）或object-fit:cover（填满容器）
• 修正溢出规则：将.slideshow-container和.container的overflow:none改为overflow:hidden，避免内容溢出容器

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Responsive Slideshows</title>
  <!-- Bootstrap CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: whitesmoke;
      margin: 0;
      padding: 20px;
    }

    .container {
      background-color: red;
      margin-bottom: 50px;
      padding: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;
      margin-top: 0px;
      overflow: hidden; /* 修正溢出规则 */
    }

    .slideshow-container {
      position: relative;
      width: 100%;
      margin: auto;
      max-height: 90vh;
      overflow: hidden; /* 修正溢出规则 */
      background-color: green;
      display: flex;
      justify-content: center;
      align-items: flex-start; /* 改为顶部对齐 */
    }

    .stage-bg {
      background-color: white;
    }

    .carousel-item {
      text-align: center;
      width: 100%; /* 确保轮播项占满容器宽度 */
    }

    .slideshow-container img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* 单独给iframe设置自适应样式 */
    .slideshow-container iframe {
      width: 100%;
      height: auto;
      max-width: 100%;
      object-fit: contain; /* 如需填满容器可改为cover */
    }

    /* Show arrows only on hover */
    .slideshow-container:hover .prev,
    .slideshow-container:hover .next {
      display: block;
    }

    .prev,
    .next {
      display: none;
      cursor: default;
      z-index: 1000;
      color: silver;
      font-weight: bold;
      font-size: 30px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      padding: 16px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      text-decoration: none;
    }

    .prev:hover,
    .next:hover {
      text-decoration: none;
      color: silver;
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    .prev.disabled,
    .next.disabled {
      pointer-events: none;
      opacity: 0.5;
    }

    /* Custom CSS for text boxes */
    .textbox {
      background-color: white;
      max-width: 600px;
      padding: 10px;
      margin-top: 20px;
      margin-left: auto;
      margin-bottom: 20px;
      text-align: left;
    }

    .textbox p {
      margin: 0;
    }
   
  </style>
</head>
<body>

<div class="container" style="max-width: 1000px">
  <div id="myCarousel1" class="slideshow-container carousel" data-ride="carousel" data-interval="false">
    <!-- Image Slides -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/900x600/?kitten">   
      </div>
      <div id="artists" class="carousel-item"> <!-- 移除padding -->
<iframe src="https://player.vimeo.com/video/335205129?h=1e30c728b8&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>      
        </div>
        
        
        <div id="nochill" class="carousel-item"> <!-- 移除padding -->
<iframe src="https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>  
        </div>

        
    </div>

    <!-- Navigation Arrows -->
    <a class="prev" href="#myCarousel1" data-slide="prev">&#10094;</a>
    <a class="next" href="#myCarousel1" data-slide="next">&#10095;</a>
  </div>
  <!-- Textbox -->
  <div class="textbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla posuere, justo ut lacinia fermentum, nulla purus lacinia enim.</p>
  </div>
</div>

    
    
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


</body>
</html>

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