steps for making personalized video embed dimensions in bootstrap

Update:

I have successfully integrated a non-standard bootstrap video size with proportions of 4x5. However, unlike standard bootstrap embeds, it doesn't seem to adhere to a maximum height no matter where I place it - on the iframe or div elements around it.

(To see the issue, view the page in full size - the tall phone video demonstrates the problem as it appears too elongated)

Any suggestions on how to resolve this issue or alternative approaches?

<!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">
<!--rest of the HTML code goes here-->
  


<!-- Video Slide -->
  <div class="carousel-item">
<div id="phone" class="vidbox embed-responsive embed-responsive-4by5" style=&qout;max-height: 80vh;">

and by adding this CSS:

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

Sources that have guided me regarding embeds and custom ratios:

cssbootstrap-4

Answer №1

Under the surface, Bootstrap relies on this specific equation:

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

This allows you the freedom to create your own class in your personalized CSS without having to recompile Bootstrap or modify its variables:

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

Answer №2

According to the provided instructions, it is recommended to recompile in order to achieve a customized aspect ratio. This can be accomplished by overriding the variable in the file _variables.scss:

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

Instead of directly altering the source files, your main.scss should be structured as follows:

// main.scss

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

import 'bootstrap/_bootstrap.scss';

// continue with your styles...
// you should now include:
.embed-responsive-4by5 {
  // ...
}

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

Looking for a quicker loading time? Opt for a shortened version of CSS

Most of the images on my website are optimized using sprite sheets, where multiple images are combined into one file to enhance user experience. This method reduces the number of server requests for individual images. However, I'm facing an issue whe ...

htmlcssbackground-imagebackground-colorbackground-position

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

csshtmlalignmentcentertext-alignment

Creating a unique Bootstrap Navbar design with vertically staggered elements

https://codepen.io/bencasalino/pen/NWPLLYQ <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto nav-flex-icons"> <li class="nav-item"> <a class="nav-link p-0 color-white" h ...

htmlcssbootstrap-4navbarvertical-alignment

Centered alignment with floating divs of abbreviated length

My HTML file has a structure similar to the following: <div style="float:right"> A line of text, floating to the right </div> <div style="text-align:center"> And here, several lines of<br /> text which should be centered. </div& ...

htmlcss

Adjust the transparency of an image preview using jQuery

Currently, I am working on creating a video gallery for a friend and I am experimenting with changing the thumbnail opacity using jQuery fade effect. While I can achieve this with CSS, I want to implement it with jQuery for a smoother transition. If you ...

jquerycssjquery-uihoverjquery-hover

Display the header of the table after a page break in HTML using CSS

I have a unique question that is somewhat similar to others I've come across, like CSS: Repeat Table Header after Page Break (Print View). The difference in my question lies in the need for handling multiple headers. My query is about displaying the ...

phpjqueryhtmlcssprint-preview

What is the purpose of using the "::before" CSS modifier to display the fontawesome chevron in the specified Bootstrap accordion code?

I stumbled upon a great example of adding arrows to the Bootstrap accordion on CodePen. Check it out: https://codepen.io/tmg/pen/PQVBGB HTML: <div class="container"> <div id="accordion"> <div class="card"& ...

htmlcsstwitter-bootstrapbootstrap-4font-awesome

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

Could the conflicting interaction between CSS transformation and animation be resolved by adjusting the order of the HTML elements

Hey there! I'm facing an interesting challenge with my menu design. The menu has rounded ends and diagonal spaces created using CSS transform skewx. Additionally, I have an animated element on the page. The issue arises when the animated element is p ...

htmlcssanimationtransform

Techniques for Adding Background Color to Fieldset Border

Recently starting to learn HTML and stumbled upon a question: How can I create a background color or image for a field set border? Can I simply use regular color values, or do I need special codes for creating a background color in a field set? Any insig ...

htmlcss

Different position of navigation list-style visible in Chrome browser

Currently, I am working on a website where the main menu navigation is designed using the list-style property to separate each menu item. In Firefox, everything appears as intended with small circles between each menu item. However, when viewed in Chrome, ...

cssmenu

Avoid Scrolling within an iFrame in HTML with the Use of #

I have a menu loading in an iframe with links using # like http://<location>/page.html#part1. When I click inside the iframe, the entire page outside of the iframe scrolls to the location of #. How can I stop this from happening? I only want the me ...

javascripthtmlcss

Within the flask framework, I am experiencing an issue where paragraphs are being overwritten. My goal is to find a

Snippet of HTML: <div class="split left" > <div class="centered"> <div class="container"> <p>Hi!</p> </div> <div class="darker"> <p>{{message}}& ...

pythonhtmlcssflaskjinja2

Connecting your HTML file to a CSS stylesheet

I'm struggling to connect my "index.html" file with my "stylesheet.css" file. I've tried copying the code from resources like CodeAcademy and w3schools, but nothing seems to be working. I'm currently using Notepad++ as my text editor - could ...

htmlcss

What HTML element can be used outside of a Bootstrap dropdown item to show a default image when the dropdown is open?

I'm working on my menu where I have two columns - one for submenu text and the other for respective images. Everything is working fine so far. However, I want to set a default image that will display when the user does not hover over any dropdown item ...

javascriptjquerycssbootstrap-4

Displaying a single item per click using jQuery

Hey there, I have a small issue with some HTML divs and show/hide functionality. I'm trying to make it so that only one div is shown per click, but my current jQuery code is showing all the divs at once. Any suggestions on how to fix this? Check ou ...

jquerycss

The JavaScript-rendered HTML button is unresponsive

I have a JavaScript function that controls the display of a popup window based on its visibility. The function used to work perfectly, with the close button effectively hiding the window when clicked. However, after making some changes to the code, the clo ...

javascripthtmlcssbutton

Modifying CSS styles in JavaScript based on the user's browser restrictions

My CSS style looks like this: button.gradient { background: -moz-linear-gradient(top, #00ff00 0%, #009900 50%, #00dd00); background: -webkit-gradient(linear, left top, left bottom, from(#00ff00), color-stop(0.50, #009900), to(#00dd00) ...

javascripthtmlcss

React Bootstrap encountered rendering issues

Recently, I decided to delve into the world of React Bootstrap and started my learning journey. To get started, I followed some tutorials on <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="vi ...

javascriptcsstwitter-bootstrapreactjsreact-bootstrap

Obtain the location information upon the loading of the webpage

I am currently in the process of developing a website using HTML, CSS, and JavaScript. My goal is to automatically retrieve the user's location when the page loads, without requiring them to click a button. I would greatly appreciate any assistance wi ...

javascriptcsshtmlgeolocation