Question 376300 in CSS Question posted in
Some basic documentation can be found here.

Css – how to create custom video embed ratios in bootstrap?

Update:

I’ve managed to embed a non-standard bootstrap video size (of proportion: 4×5)… however, unlike standard bootstrap embeds it doesn’t seem to obey a MAX HEIGHT anywhere i put it – on the iframe, or divs around it.

(to see the issue, view the page, and view full size – the tall phone video shows the issue… is way too tall)

any ideas how to fix, or ways around it?

<!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>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/900x500/?shark" style="max-height: 150px;">
      </div>
   
                  <!-- Video Slide -->
      <div class="carousel-item">
    <div id="phone" class="vidbox embed-responsive embed-responsive-4by5" style="max-height: 80vh;">
  <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>
        
    
              <!-- 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>
        
          <!-- Video Slide -->
      <div class="carousel-item">
    <div id="squarevid" class="vidbox embed-responsive embed-responsive-1by1" style="max-height: 80vh;">
  <iframe src="https://player.vimeo.com/video/21480736?h=41e5c84cdf&color=183eb1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="padding: 0px"></iframe>
      </div>    
    </div>
        
        
    <!-- 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>
<!-- Video Slide -->
  <div class="carousel-item">
<div id="phone" class="vidbox embed-responsive embed-responsive-4by5" style="max-height: 80vh;">

and adding this CSS:

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

Docs I’ve bene referring to re: embeds, and custom ratios:

Tags:

2

Answers


  1. 0

    Behind the scenes, Bootstrap uses the following formula:

    .embed-responsive-XbyY {
  padding-top: 100% * Y / X;
}

    Which means you can add your own class to your custom CSS, if you don’t feel comfortable recompiling Bootstrap or overriding its variables:

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

    As in the documents, you should recompile to have a custom aspect ratio. This is done by overriding the variable in file _variables.scss:

    $embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;

    Instead of modifying the source files, your main.scss should look like this:

    // main.scss

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (4 5),
  (1 1)
);

import 'bootstrap/_bootstrap.scss';

// rest of your styles...
// now should have: 
.embed-responsive-4by5 {
  // ...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search