视频嵌入在 Bootstrap 5 轮播中无法响应缩放

问题描述 投票：0回答：1

我在轮播中嵌入了两个视频。 一个是标准引导程序尺寸（16x9），另一个是自定义尺寸（4x5）

我在两者上都使用了嵌入响应式代码，但它们都没有像图像那样响应地缩放以填充容器最大宽度和高度。它们总是很小。

我尝试在 iframe 和周围的 div 上添加 % 宽度，但似乎没有任何效果。有什么想法吗？

下面的代码（打开完整尺寸以查看两个视频上的问题）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 test</title>
  <!-- Bootstrap CSS -->
  <link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <style>
    body {
      background-color: lightpink;
      margin: 10px; 
      padding: 0; 
    }

  .container {
      background-color: green;
      margin-bottom: 50px;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center; }

    }
      
  .slideshow-container {
      position: relative;
      width: 100%;
      margin: auto;
      overflow: hidden;
      background-color: #b9dbe5;
      display: flex; /* Use flexbox layout */
      justify-content: center; /* Center items horizontally */
      align-items: center; /* Center items vertically */
    }
  .slideshow-container img, 
    .slideshow-container iframe {
      max-width: 100%;
     max-height: 85vh; /* Set maximum height */
    object-fit: contain;
    }
    
  .carousel-item {
      text-align: center; /* Center images horizontally */
    } 
      
 /* Custom aspect ratio for 4x5 video */
.embed-responsive-4by5::before {
  padding-bottom: 125%;
}
  </style>
</head>

<body>

<div class="container" style="max-width: 1000px;">
<div id="myCarousel1" class="slideshow-container carousel slide" data-interval="false">
  <div class="carousel-inner">
    
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/1200x800/?nature" alt="...">
      </div>
    
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/800x1200/?mountain" alt="...">
      </div>
            
            <!-- Video Slide 1-->
      <div class="carousel-item">
  <div id="nochill" class="vidbox embed-responsive embed-responsive-16by9" style="max-width: 800px; margin: auto; text-align: center;">
  <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 style="padding: 0px;"></iframe>
      </div>  
    </div>

     <!-- Video Slide 2 -->
      <div class="carousel-item">
            <div class="phonewrapper" style="max-width: 550px; margin: auto">

  <div id="phone" class="vidbox embed-responsive embed-responsive-4by5">
  <iframe src="https://player.vimeo.com/video/912417077?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="padding: 0px" ></iframe>
      </div>
     </div>
    </div>
      
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/1000x800/?sea" alt="...">
      </div>
    </div>
  
  
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel1" data-bs-slide="prev">
  <img src="images/nav-l.gif" alt="Previous" style="width: 10vh">
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel1" data-bs-slide="next">
  <img src="images/nav-r.gif" alt="Next" style="width: 10vh">
    </button>
  </div>
</div>
  


<!-- Bootstrap JS -->
<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

css responsive-design bootstrap-5
1个回答
0
投票

您可以通过在 

iframe
周围使用包装 div 并将 padding-bottom 设置为代表您想要的纵横比的百分比来解决此问题。该百分比的计算方式为高度除以宽度乘以 100。对于 16:9 的纵横比，这将是 
(9 / 16) * 100 = 56.25%
。对于 4:5 的宽高比，这将是 
(5 / 4) * 100 = 125%
。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 test</title>
  <!-- Bootstrap CSS -->
  <link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <style>
    body {
      background-color: lightpink;
      margin: 10px; 
      padding: 0; 
    }

    .container {
      background-color: green;
      margin-bottom: 50px;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center; 
    }
      
    .slideshow-container {
      position: relative;
      width: 100%;
      margin: auto;
      overflow: hidden;
      background-color: #b9dbe5;
      display: flex; /* Use flexbox layout */
      justify-content: center; /* Center items horizontally */
      align-items: center; /* Center items vertically */
    }
    .slideshow-container img, 
    .slideshow-container iframe {
      max-width: 100%;
      max-height: 85vh; /* Set maximum height */
      object-fit: contain;
    }
    
    .carousel-item {
      text-align: center; /* Center images horizontally */
    } 
      
    /* Custom aspect ratio for 4x5 video */
    .embed-responsive-4by5::before {
      padding-bottom: 125%;
    }

    .vidbox {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-bottom: 56.25%; /* for 16:9 aspect ratio */
    }

    .vidbox iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .embed-responsive-4by5 .vidbox {
      padding-bottom: 125%; /* for 4:5 aspect ratio */
    }
  </style>
</head>

<body>

<div class="container" style="max-width: 1000px;">
<div id="myCarousel1" class="slideshow-container carousel slide" data-interval="false">
  <div class="carousel-inner">
    
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/1200x800/?nature" alt="...">
      </div>
    
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/800x1200/?mountain" alt="...">
      </div>
            
            <!-- Video Slide 1-->
      <div class="carousel-item">
        <div id="nochill" class="vidbox embed-responsive embed-responsive-16by9">
          <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>

     <!-- Video Slide 2 -->
      <div class="carousel-item">
        <div class="phonewrapper embed-responsive embed-responsive-4by5">
          <div id="phone" class="vidbox">
            <iframe src="https://player.vimeo.com/video/912417077?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>
      </div>
      
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/1000x800/?sea" alt="...">
      </div>
    </div>
  
  
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel1" data-bs-slide="prev">
      <img src="images/nav-l.gif" alt="Previous" style="width: 10vh">
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel1" data-bs-slide="next">
      <img src="images/nav-r.gif" alt="Next" style="width: 10vh">
    </button>
  </div>
</div>
  


<!-- Bootstrap JS -->
<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

这应该使 

iframes
占据其父 div 的整个宽度和高度，并且视频将在保持其宽高比的同时放大或缩小。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.