Adjusting the dimensions of a Bootstrap modal containing a YouTube video

Here is the code snippet I am working with:

<div id="MainV3_VideoModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="MainV3_Video" class="embed-responsive-item" src="//www.youtube.com/embed/test" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

My goal is to make the modal with the youtube video take up 85% of the screen's width and maintain a 16:9 aspect ratio for the height. I have tried using CSS to set the max-width on the modal-dialog, but it doesn't seem to be working as expected. Any suggestions or guidance on how I can achieve this would be highly appreciated.

cssbootstrap-4bootstrap-modalbootstrap-5

Answer №1

To preserve the 16x9 ratio, simply include the following CSS code snippet. Be sure to also include additional styling to ensure that the modal remains centered on the page.

.modal-content{
height: calc((85vw/16)*9);
width: 85vw;
}

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

What is the best method to "deactivate" a radio button while ensuring that a screen reader can still read the text and notify the user that it is inactive?

My current situation involves needing to deactivate certain radio buttons, while still having the option to reactivate them later. When I use the disabled attribute, screen readers will overlook this field and miss key information. I am seeking an accessi ...

javascripthtmlcssaccessibility

The Angular material datepicker fails to organize items in a horizontal row

My web application features an Angular Material datepicker, however, I am facing an issue where not all elements are showing up in a row. The view is as follows: Datepicker To prevent any custom CSS from impacting the view, I have removed all customized ...

cssangularangular-materialdatepicker

What are some ways to monitor the movement of elements and activate functions at precise locations?

I am working on a project that involves a #ball element which, when clicked, utilizes jQuery animate to move downwards by 210px. The code I currently have is as follows: $('#ball').click(function() { $(this).animate({ top: '+=2 ...

javascriptjquerycss

Numerous anchor links are present

Is it possible to eliminate the red lines between "google links" while keeping the border color as red? How can I achieve this? Here is the code snippet provided: <!doctype html> <html> <head> <title>Website</title> </he ...

htmlcss

Instructions on integrating a column of buttons into a Bootstrap table containing information retrieved from a MySQL database

My bootstrap table is currently displaying data that is loaded from a MySQL database. I am looking to enhance it by adding a column with buttons, similar to the layout shown in this image. https://i.stack.imgur.com/8fWfR.png However, I am facing some dif ...

javascriptjqueryhtmlcsstwitter-bootstrap

CSS: choose all elements starting from the n-th element and apply styles to them

Is it possible to choose specific child elements beyond the first few in a parent element? To clarify, let's say there's a div containing 7 spans. How can I select only the spans starting from the 3rd element onwards - so specifically span 4, 5, ...

csscss-selectors

What is the best way to position a div in relation to a table header (th) but not inside it?

I'm trying to create a table header that displays a help text (div) when clicked on. However, the help div is causing the table header to be larger than the other headers. Below is the code snippet: #help_box { border-radius: 20px; ba ...

htmlcsshtml-tableorientation

Eliminating extra space below the footer using CSS in Wordpress site

After recently updating my website, I am struggling with some of the finer points. It's worth noting that I lack experience in web development, despite working in the software field; I am trying to broaden my knowledge. In particular, I have noticed ...

htmlcssfooter

Tips on how to generate a list of checkboxes within a View using ASP.NET MVC

Having some trouble with my View and model when it comes to displaying checkbox lists in lines using bootstrap. They are not appearing how I want them to. Need some assistance and have attached a mock-up below to show how they should look. My approach is o ...

c#asp.net-mvcbootstrap-4

Issue with Twitter Bootstrap 3 Sticky Footer functionality in IE11 and IE Edge

My website works perfectly on Chrome, but I'm having issues on Internet Explorer. I would really appreciate your help. The website I am working on is: I am trying to implement a sticky footer on IE, but for some reason, it's not working as expe ...

htmlcsstwitter-bootstraptwitter-bootstrap-3sticky-footer

Creating a series of scalable svgs of uniform size in a row, enabling me to resize them based on width without disrupting the overall design

I need a row of equally sized SVGs with some text below them, like a navigation bar but larger. I almost have it working, but there are some issues with my current setup. To clarify, this is what I am aiming for: The SVGs should be responsive and scale a ...

htmlcsssvgnavbarscaling

enhanced navigation bar now utilizing the latest Bootstrap 5

I recently decided to update my website from Bootstrap 4.6.0 to the latest version, Bootstrap 5.x.x. However, after switching from data-toggle to data-bs-toggle, I encountered a problem where the active tab no longer functions properly. The first tab alwa ...

bootstrap-5navlistitem

Generating custom-styled entries using Word VBA

I have set up styles in my Word document, such as My_Style (which I use for titles). I am looking to create entries for illustrations that correspond to the number from that particular style. Here is the code snippet I am using: Sub Macro4() ' &apos ...

cssvbams-word

Creating a multi-level signup page in Angular 4 using Bootstrap

Currently, I am working with angular 4 and bootstrap 4 to create a multi-level sign-up page. One of the challenges I am encountering is how to properly include a JavaScript file into my angular project. import '../../../assets/js/js/multiform.js&apo ...

javascriptjqueryangularbootstrap-4

Fancybox overlay not adjusting to full height

When working with JavaScript: $(document).ready(function() { $(".fancybox").fancybox({ helpers: { overlay: { opacity: 0.4, css: { 'background-color': '#FFF' ...

jqueryhtmlcssfancyboxfancybox-2

Utilize Custom Field to incorporate background videos from websites like Youtube or Vimeo into your content

I've been working on implementing a video background for my website. I came up with a custom code to embed URL links from Youtube and Vimeo using "oEmbed". The process is functioning well, but I'm facing some challenges in setting the background ...

phpcsswordpressadvanced-custom-fields

Position a modal in the vertical center with scroll functionality for handling extensive content

Looking for ways to tweak a Modal's CSS and HTML? Check out the code snippets below: div.backdrop { background-color: rgba(0, 0, 0, 0.4); height: 100%; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 2020; } ...

htmlcss

3D Animation for All Browsers

I'm currently working on creating a small browser-based game and I've been experimenting with animations to get the desired effect. So far, the animation works well in Opera and Edge, although there is a slight cropping issue in Edge. Unfortunat ...

javascriptjqueryhtmlcss

What is the purpose of applying the two unique class names (root and disabled) to the DOM in order for it to function correctly?

When it comes to customizing components using material-ui, the process can be a bit tricky. Here's how you can do it: const styles = { root: { '&$disabled': { color: 'white', }, }, disabled: {}, // This is i ...

cssreactjsmaterial-uijsscss-specificity

Potential Bug Detected in Internet Explorer on Mouseenter Event

I'm facing a challenge with my HTML/CSS code. I have a carousel that includes two li elements positioned absolutely on each side for navigation but they are not displaying correctly in IE versions 7-9 - they appear behind the main element regardless o ...

jqueryhtmlcssinternet-explorer