How should a frame be correctly inserted into a modal in Bootstrap?

I'm currently working on incorporating a frame into a CSS modal, but the current display is not quite ideal. Additionally, I manually adjusted the frame's position (top and left), which is causing misalignment issues for different screen sizes, resulting in the frame appearing outside the modal. This can be seen in the image below.

For larger screens:

https://i.sstatic.net/kAdig.png

For smaller screens:

https://i.sstatic.net/04vJo.png

To achieve the above results, I utilized the following code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1dfc1df">[email protected]</a>/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
    <title>Document</title> 
    <style> 
        body { 
            width: 100vw; 
            height: 100vh; 
            background: lightgray; 
        } 
        .frame-card { 
            width: 800px; 
            height: 520px; 
            position: absolute; 
            top: 25%; 
            left: 31.2%; 
        } 
    </style> 
</head> 
<body> 
    <div class="container mt-2"> 
        <!-- Button trigger modal --> 
 ... 
    </div> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> 
        </script> 
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44332f303025322764223734413f413f">[email protected]</a>/dist/umd/popper.min.js" 
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> 
        </script> 
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b1e2b3c3824302f783c26282c3a4c2c3a">[email protected]</a>/dist/js/bootstrap.min.js" 
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> 
        </script> 
 ...
</body> 
</html> 

Can anyone suggest what classes or styling I should use to resolve these alignment issues? Your help is greatly appreciated!

I currently have the image positioned using absolute positioning, but I'm not sure if it's the best method. Additionally, I manually aligned the image using left and top values, but I am seeking a more automated approach to ensure proper alignment.

Answer №1

element, I have successfully enclosed the video within a frame. Placing the .frame-card inside the
.embed-responsive.embed-responsive-16by9
after the iframe and assigning it the class .embed-responsive-item without any additional styling ensures that it maintains the same size and position as the video (iframe.embed-responsive-item). Additionally, in the JavaScript code snippet, on clicking the video button, the video source is retrieved and stored in $videoSrc. The modal is set to autoplay the video when opened and to stop playing when closed. To see the functionality in action, ensure that you add &muted=1 to your video source URL for autoplay to work. You can refer to this link for more information: [Vimeo Autoplay and Loop Embedded Videos](https://vimeo.zendesk.com/hc/en-us/articles/115004485728-Autoplay-and-loop-embedded-videos). For a live preview, you can access my [JSFiddle](https://jsfiddle.net/o9tcgw2v/). Moreover, the CSS code snippet sets the body dimensions to 100vw width and 100vh height with a light gray background color. The HTML structure is organized with a clickable button to trigger the modal for playing the Vimeo video embedded within an aspect ratio of 16:9.

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

Is there a way to verify if an ID includes more than one word?

I am trying to target a specific div with a unique id in jQuery: <div id="picture_contents_12356_title"></div> The '12356' is autogenerated and must be included in the id. I need to create a jQuery selector that combines "picture_co ...

Chakra UI: Trouble with Styling Multi-part Components - StyleProvider Missing

Attempting to style multipart components as outlined in this documentation is proving to be challenging. Despite my efforts, I keep encountering the following error: ContextError: useStyles: styles is undefined. It appears that I may have forgotten to wr ...

Element failing to adhere to CSS grid layout

I am currently working with grid layout and aiming to position the following content at the bottom and center, but it is currently aligning to the left: .body { margin: 0; background-color: rgb(255, 237, 237); display: grid; grid-template-rows: ...

How can we align divs in the center horizontally inside a parent div?

This question has been asked many times, but I can't seem to figure it out in my situation as I am new to HTML. I have three divs (boxes: QM, Audit, PM) and I want to center them within a parent div called Services. In the photo provided, you can see ...

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

Centering multiple floated divs using bootstrap

Looking for some help with a bootstrap panel design. I am trying to align a heading title to the left and a select element along with a date range input to the right of the panel heading, vertically aligned in the middle. While I have made progress on this ...

How can I use jQuery to target elements other than the vertical scrollbar when

Here is how I am utilizing the mouseleave jquery event $(document).ready(function(){ $(document).mouseleave(function(event) { //perform a task }); }); Is there any method to prevent this event from triggering when a user scrolls ...

Issue with jquery .click function not triggering after CSS adjustment

In the process of creating a fun game where two players take turns drawing on a grid by clicking <td> elements. Currently, I have implemented the functionality to toggle the background color of a <td> element from black to white and vice versa ...

Formatting a pair of elements side by side in MUI Select

Currently, I am tackling the challenge of organizing elements in MUI Select v4. My goal is to display these elements in two columns rather than just one column within the dropdown. Despite attempting to override certain styles within MUI, I have not been ...

Easily convert 100% of the height to pixels

Is there a way in HTML to convert a div's height from 100% to pixels without specifying a particular pixel value? ...

Safari now fully embraces Flexbox technology

My flexbox code works well in Chrome and Firefox, but unfortunately it's not performing well in Safari. Despite trying various prefixes, I couldn't achieve the same simple order. How can I modify or add to my code so that it functions normally in ...

React-Tooltip trimming

Currently, I am facing a dilemma that requires some resolution. The issue at hand is related to the placement of React-Tooltip within the List element. Whenever it's positioned there, it gets clipped. On the other hand, placing it at the bottom isn&a ...

What is the best way to ensure Font-Face loads fonts successfully on iOS devices?

In the process of constructing a website with Gatsby.js, Styled-Components, and a custom font named 'Montserrat', I encountered an issue regarding font loading. The font appears as expected on desktop browsers during both build and hot-reloading, ...

CSS problem: alignment issue between text and checkbox

I'm experiencing a CSS style issue where the text box and text are not aligned properly. Can someone assist me in fixing this problem? Below is the code I am using: Thank you for your help. <div> <input type="checkbox" ...

Learn how to create a half and half color scheme in an HTML table

I have created an HTML table that resembles a calendar. Various events are registered in the calendar, each distinguished by its color. However, I am looking to change the colors of the cells to be half and half. https://i.sstatic.net/gaQq2.png The imag ...

How to style a CSS list and center-align it

My website features a <ul> list with submenus structured like this: <div id="cssmenu"> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class=&ap ...

Loading screen preceding page change

I've been searching everywhere and can't find a good tutorial on how to smoothly transition pages when clicking a link on my website. I want the page to fade out on click, display a preloader, then fade in the new page once the preloader finishes ...

The "read more" button seems to be malfunctioning

I've been working on integrating a gallery of images into my posts. My goal is to display 4 images initially, followed by a "load more" button that, when clicked, will reveal another set of 4 images, and so on. I have already created the HTML, CSS, an ...

Increase the border at the bottom while hovering with React.js and the Material UI library

Can someone help me achieve a hover effect similar to the one in this question on Stack Overflow: Hover effect : expand bottom border I am attempting to create the same effect in React using makeStyles of Material UI. Here is my current code: const useSty ...

What is the best way to center align all elements using a wrapper in CSS grid?

I am working on designing a layout that looks like this: https://i.sstatic.net/jAaXL.jpg I have set the wrapper as a class and aim to center everything on the screen. Aside from the wrapper, I also want to make the text and form equal sizes. Here is th ...