Issue with implementing a custom-sized video embed in Bootstrap where the max-height is not

I've inserted a tall video into this bootstrap carousel.

The video on the second slide is not a standard bootstrap size - it's 4x5. To address this, I used custom code:

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

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

The video scaling is working properly, but I'm unable to set a maximum height such as 900px or 90vh.

  • I've attempted to add a max height to the iframe and all surrounding divs.
  • Unfortunately, nothing seems to be working - the video won't scale to the set max height and remain within the container.

Any suggestions?

Below is the latest code:

  • Check out the second slide with the tall video - it's exceeding the desired height without the ability to set a maximum 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 */ 
      ...

Answer №1

Bootstrap version 4 utilizes an older method to manipulate aspect ratios, referred to as the "top-padding hack".

In essence, by applying a percentage-based vertical padding to a block-level element, the padding will be calculated based on width rather than height. Before the introduction of the aspect-ratio property in CSS, this method served as an effective way to control aspect ratios. It also worked consistently across different browsers.

Essentially, what may appear as the height of the container is actually the top padding. The actual height of the content is set to 0 in order to maintain the aspect ratio. Consequently, setting a max-height property has no impact.

However, it is possible to indirectly control the max-height by adjusting the max-width property, given that the aspect ratio is known.

To summarize:

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

Upon further examination of the default aspect ratio implementation in Bootstrap v4, it seems that there is a way to make max-height function on an element using the top padding hack. This can be achieved by adding a :before pseudo-element to the element with the same percentage-based vertical padding. For instance:

.embed-responsive-4by5::before {
  padding-top: 125%;
}

Answer №2

Could you kindly review the solution provided below? Hopefully, it meets your needs.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customizable 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;
    }
  
    /* Remaining CSS styles */
    
  </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>

        <!-- Remaining carousel items -->

      </div>
    </div>

    <!-- Bootstrap JS and script for navigation -->

</body>

</html>

The CSS

padding-bottom: clamp(100px, 125%, 500px) !important;
has been utilized, with a minimum padding of 100px and a maximum of 500px. Feel free to adjust these values based on your specific needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I modify the table structure in Ruby on Rails?

Greetings! I am a beginner in the world of Rails and could really use some assistance. Below is the table data extracted from index.html.erb: <table class="table"> <thead> <tr> <th>Area& ...

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

My page contains dynamic HTML content that I want to incorporate. The dynamic content consists of only HTML and CSS, without any JavaScript. However, I have some custom global CSS styles and JS logic that need to be implemented along with this dynamic con ...

Notification with jQuery

I am looking to display an alert message when val = -1. However, the issue I am facing is that this message always appears at the bottom of the page regardless of the value of val. if ($val == -1) echo ' <script> $( ...

Trouble displaying certain HTML code and its output on the browser?

I am in the process of developing a user profile page. I have designed a form with various fields, but the code within the section is not displaying correctly in the browser. I attempted to inspect the elements, but the code within that section remains inv ...

Creating a Runescape Tracker: What essentials should I include?

Hello everyone, I am a beginner in the world of programming and I am excited to learn. I have heard that the best way to learn is by working on a project. I have always been interested in creating a Skill Tracker for my clan. Can you offer any advice on wh ...

list without specific order spacing

I have implemented an unordered list in the footer section of my HTML document. Within this list, the first two items consist of social media logos displayed as images. To enhance their visibility and prominence within the footer, I have assigned them a wh ...

If the div element contains an <li> element, jQuery animate() will not function properly

Initially, my div was animating perfectly. However, when I inserted a list inside the divs, the animation only became visible once it reached the bottom of the height of the lists. To trigger the animation, click on the Products option in the top menu. T ...

Ways to receive alerts when a marker enters a polygon

Looking for a way to receive notifications if my marker enters any of the polygons on the map. Having trouble implementing it correctly, here is my current code: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com ...

How can we enhance the efficiency of rendering text on the screen?

Imagine having a <p> tag inside a <div> with specific properties: div { height: 100px; width: 100px; overflow: hidden; } My goal is to continuously add words to the <p> tag until an overflow is detected, meaning stop when the f ...

Using CSS, you can utilize a three-dot pattern to create a unique X

Hey there! I've got a menu with three dots that animate, and when I click on them, I want them to transform into an X shape. You can check out the demo here: demo Here's the HTML: <div class="dots"> <div class="dot"></div> & ...

The mobile functionality of the stylesheet is not functioning properly

Recently, I came across an issue with a stylesheet designed for mobile devices that contains the following code: /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } Surprisingly, this code failed to work ...

What causes the list to shift instead of the image when the vertical-align property of the image is unchecked?

How come when the vertical-align property on this image is unchecked, it affects the list rather than the image itself? Checked: https://i.sstatic.net/NQhf0.jpg Unchecked: https://i.sstatic.net/jS7er.png ...

Modify a section of an HTML text's formatting

function changeEveryCharColor(id) { var part; var whole = ""; var cool1 = document.getElementById(id).innerHTML; console.log(cool1); for(var i = 0; i < cool1.length; i++) { color1 = getRandomInt(255); ...

Updating the active tab in the navigation bar whenever the router navigates

I'm struggling with changing the active tab in Angular 2 and Bootstrap 4. I have managed to get the active tab to change using this code snippet: navbar.component.html <nav class="navbar navbar-fixed-top navbar-light bg-faded"> <button cl ...

Troubleshooting Issue with jQuery replaceWith in Loop

Trying to make it so that when the update button is clicked, the text on the left side becomes an input box: Click the update button and the text on the left will be an input box However, instead of just one input box appearing, all the text on the left s ...

Display animated GIFs in the popular 9Gag format

Is there a way to display a GIF file after clicking on a JPG file, similar to the functionality on 9Gag.com? I am currently using timthumb.php for displaying JPG images. https://code.google.com/p/timthumb/ Below is the code snippet: <div class="imag ...

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

I recently customized the stepsForm.js by Copdrops and made some modifications. Although everything works well, I'm struggling to navigate back to the initial step (first question) after submitting the form due to my limited knowledge of JavaScript. ...

What is the best way to apply maximum height to an element using CSS?

Looking for help with my website: I made some changes in the code using Firebug and identified these elements that I want to modify (but changes are not live yet) The following code represents the elements on my site: This is the HTML code: <di ...

Tips for halting the navigation bar when scrolling

Creating a Navigation Bar: <div class="navigation-bar"> <div class="item">Home</div> <div class="item">About us</div> <div class="item">Our Services</div> <div class="item">Contact us</div ...

Display a fresh <p> tag when the condition in the if-statement is met

If you are looking for a questionnaire, check out this one. Now, I am interested in creating if-statements using HTML/CSS/jQuery to achieve the following scenario: Initially, only Question 1 will be visible. When the input matches a certain value like X, ...