引导自定义大小的视频嵌入不接受最大高度

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

我在这个引导轮播中嵌入了一个高视频。

幻灯片 2 上的电话视频“不是引导程序标准尺寸”，即。是 4x5，所以我使用了自定义代码：

class =“vidbox 嵌入响应嵌入响应4by5”

/* 4x5 视频的自定义宽高比 / .embed-responsive-4by5 { 底部填充：125%； / 5/4 宽高比 */ }

视频缩放效果很好，但它不接受最大高度，例如900px，或 90vh

  • 我尝试向 iframe 及其周围的所有 div 添加最大高度。
  • 似乎没有任何作用，它不会缩放到设定的最大高度并留在容器内。

有什么想法吗？

最新代码如下：

  • 参见手机视频的第二张幻灯片...它太高了，无法设置最大高度

<!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: violet;
      margin: 10px; /* Reset margin to 0 */
      padding: 0; /* Reset padding to 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 */
    }

    .carousel-item {
      text-align: center; /* Center images horizontally */
    }

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

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

    .prev, .next {
      display: none;
      cursor: default; /* Change cursor to 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; /* Remove underline */
    }

    .prev:hover, .next:hover {
      text-decoration: none; /* Remove underline */
      color: silver; /* Change color on hover */
    }

    .prev {
      left: 0;
    }

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

    .prev.disabled, .next.disabled {
      pointer-events: none;
      opacity: 0.5;
    }
      
   /* //////// Media query ////////  */
    @media screen and (max-width: 650px) {
    body {
        background-color: goldenrod;
        
 /* Videos and can be full width on mobile */
      }
         .carousel-item img {
    width: 100% !important;
    padding: 0 !important;
  }

      .carousel-item iframe {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
      }
        .vidbox {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
      }
    }

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

<div class="container" style="max-width: 1000px">
  <div id="myCarousel1" class="slideshow-container carousel slide" data-ride="carousel" data-interval="false">
      
    <!-- Image Slides -->
    <div class="carousel-inner">
        
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/1200x600/?kitten" style="padding: 30px;">   
        </div>
        
        
                  <!-- Video Slide -->
      <div class="carousel-item">
          <div style="max-height: 700px">
    <div id="phone" class="vidbox embed-responsive embed-responsive-4by5" style="max-height: 700px; margin: auto; text-align: center;">
  <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>
        
    
              <!-- Video Slide -->
      <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>
        
        
   <!-- Navigation Arrows -->
   <!-- Navigation Arrows -->
    <a class="prev" href="#myCarousel1" data-slide="prev">&#10094;</a>
    <a class="next" href="#myCarousel1" data-slide="next">&#10095;</a>
  </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>

<!-- Navigation Click anywhere to navigate -->
<script>
  $(document).ready(function(){
    $('.carousel-inner').on('click', function(e) {
      if (e.pageX < $(this).width() / 2) {
        $(this).closest('.carousel').carousel('prev');
      } else {
        $(this).closest('.carousel').carousel('next');
      }
    });
  });
</script>
    
    
    
</body>
</html>

css bootstrap-4 bootstrap-5
1个回答
0
投票

Bootstrap v4 使用传统方法来控制宽高比，称为 “

top-padding
hack”。

简而言之，将百分比 

top-
（或 
bottom-
）
padding
应用于元素，百分比将根据其 
width
计算，而不是其 
height
。在 CSS 中使用 
aspect-ratio
之前，这是一种控制 
aspect-ratio
的巧妙方法。

然后将 

video
与 
position: absolute
一起放入此容器中，同时给予包装纸 
position: relative
。所以包装器的流内容高度是 
0
，这意味着对其应用 
max-height
没有效果。

但是您已经知道纵横比（在您的情况下为 4x5），因此您可以通过应用 

max-height
来控制 
max-width: height * 0.8
。简而言之，要获得 
max-height: 600px
，请应用 
max-width: 480px
。

由于上述原因，

max-height
对
video

没有影响
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.