css Question posted in
Some basic documentation can be found here.

Css – bootstrap custom-sized video embed not accepting max-height

I have embedded a tall video in this bootstrap carousel.

The phone video on slide 2 is “not bootstrap-standard size” ie. is 4×5, so i used custom code:

class="vidbox embed-responsive embed-responsive-4by5"

/* Custom aspect ratio for 4×5 video /
.embed-responsive-4by5 {
padding-bottom: 125%; / 5/4 aspect ratio */
}

the video scaling works great, but it won’t accept a MAX HEIGHT e.g. 900px, or 90vh

  • i’ve tried adding max height to the iframe, and all the divs around it.
  • Nothing seems to work, it won’t scale to a set max height and stay inside the container.

Any ideas?

latest code below:

  • see the second slide with the phone video… it’s too tall without being able to set a max height
<!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">❮</a>
    <a class="next" href="#myCarousel1" data-slide="next">❯</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>
Tags:

2

Answers


  1. 0

    Bootstrap v4 uses a legacy method to control aspect ratio, known as "the top-padding hack".

    In short, applying a percentual vertical padding to a block-level element, the padding will be calculated based on width, not based on height. Before having aspect-ratio in CSS, this was a neat way to control aspect-ratio, among a few others. And it works cross-browser.

    So what appears to be the height of the wrapper, is actually the top-padding. The content height is 0 (and it has to stay that way, for maintaining the aspect-ratio). But, because of this, max-height has no effect.

    However, you can control the max-height by controlling max-width, since you already know the aspect-ratio.

    In short:

      /* max-height: 600px; */
  max-width: 480px;

    Upon closer inspection of the default bootstrap v4 aspect ratio implementation, it looks like there is a way to make max-height work on an element using the top padding hack, by adding a :before pseudo-element to it, with the same percentual vertical padding. In this case:

    .embed-responsive-4by5::before {
  padding-top: 125%;
}
    Login or Signup to reply.
  2. 0

    Can you please check the below solution? Hope it will work for you.

    <!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;
    }
    
    .embed-responsive-4by5.vidbox {
      padding-bottom: clamp(100px, 125%, 500px) !important;
    }
    
    .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>

    I have used padding-bottom: clamp(100px, 125%, 500px) !important; CSS, in that 100px is minimum padding and 500px is maximum padding. You can change it as per your requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search