Display a video within a designated grid section of Bootstrap 4

To create a simple grid structure, I utilized Bootstrap 4 version 4.4.1. The layout consists of two columns, each spanning 50% width. In the left column, there are two rows, both occupying 50% height. The challenge was to embed a video within the upper left section without distorting it, with any excess content being hidden. While I successfully achieved most of the setup, the issue arises when the video extends across the entire left column instead of just the first row.

Below is the pertinent HTML snippet:

<div class="container-fluid d-flex h-100 flex-column">      
  <div class="row flex-grow-1">
    <div class="col">
      <div class="row h-50" id="video_wrapper" style="background-color: magenta;">
        <video id="video" autoplay muted></video>
      </div>
      <div class="row h-50" style="background-color: lime;">
        bottom left
      </div>
    </div>
    <div class="col" style="background-color: aqua;">
      <div>
        right side
      </div>
    </div>
  </div>
</div>

CSS code snippet related to the issue:

#video_wrapper {
    overflow: hidden;
}

#video {
    /* Ensure video takes up full space but maintain aspect ratio */
    min-width: 100%; 
    min-height: 100%;
    /* Prevent distortion of video by browser */
    width: auto;
    height: auto;
    /* Flip video horizontally */
    position: absolute;
    transform: scaleX(-1);
}

Despite numerous attempts, no solution worked. A JSFiddle link is provided below for testing purposes. When using the webcam as the video source, you can toggle it off to view the grid layout. Ideally, the video should be contained only within the pink area, not intruding into the green area.

JSFiddle: https://jsfiddle.net/matzewolf/zxbtq569/3/

I would greatly appreciate any assistance. As a beginner in web development and Bootstrap, your patience is valued :)

Answer №1

To ensure proper positioning, make sure to include position:relative in the parent container of the video (simply add the class position-relative).


Insight: By utilizing...

position: absolute;
/* top | bottom | left | right | width (%) | height (%) | 
   min-width (%) | max-width (%)... and other potential values */

...the element's size and position will be relative to its closest positioned parent (or to <body> if none exist). This means it is dependent on the closest parent with a defined position property aside from static (the default setting).

Observe the behavior in action here.

For further understanding, refer to this informative article on CSS positioning.

In addition, note that I have included classes

d-flex justify-content-center align-items-center
in the parent element. These classes help maintain horizontal and vertical alignment responsiveness for elements positioned absolutely within.

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

"Make your slides smooth and responsive with the unslick option in slick

Currently implementing the Slick Slider on a WordPress website. The slider is designed to display 3 columns at a screen size of 1024px and above. When the screen size drops below 1024px, the slider adjusts to show 2 columns, and on mobile devices, it swit ...

Dealing with JQuery and CSS issues on Internet Explorer

Recently, I've been working on a code snippet to maximize a video panel upon page load or resize. Utilizing JQuery 1.4.4, the implementation has been smooth sailing on Chrome, Firefox, and Safari. Drawing inspiration from various online resources, I&a ...

Inconsistencies observed during the native JSON import process in JavaScript

Encountered a strange behavior when loading a JSON file into JavaScript while working on a React project. Seeking an explanation and guidance on properly accessing data from the JSON data store. The JSON file contains product data: { "product ...

What could be causing my console to display "NaN" when working with the class extension feature

During the development of my project, I encountered a problem with getting the parameter from the parent class. The value returned is NaN while the other one returns true. Here is the code snippet: class transportasi {//class parent constructor(nama ...

Creating a carousel of cards using JavaScript, CSS, and HTML

Here is a visual reference of what I'm attempting to achieve: https://i.stack.imgur.com/EoQYV.png I've been working on creating a carousel with cards, but I'm struggling to synchronize the button indicators with card advancement when clicke ...

What is the best way to maintain the position of an overlay on screen when dealing with multiple resolutions?

I'm struggling to find a solution that works for me - I could really use some assistance. My CSS skills are not up to par... Currently, I have a video embedded in a web page with a text overlay. The problem arises when the content is displayed on a l ...

Styling buttons with different colors using React onClick event.getSelectedItem() method

I am having an issue with adding a border when the class is set to "transportation active" in my React code. When I click on one of the icons, all of them become active instead of just the clicked one. This behavior is not what I want, as I only want the ...

I am looking to incorporate an HTML file into my JSON data

Is there a way to include an HTML file in my JSON by using the $.get() function or any alternative method? { "user": { "username": $.get('profile.html') } } ...

Can someone explain the purpose of adding "v=747" at the end of /site_media/base.css?v=747?

Observing a webpage's source code, I came across the following CSS declaration in the header: <link rel="stylesheet" href="/site_media/base.css?v=747" /> Could you please explain the significance of "?v=747" at the end of this CSS declaration? ...

How can I style <p> tags with a specific font in Tailwind Typography?

For instance, suppose I wish to utilize the markdown as shown below: # AAAAAAAAAa BBBBBBB This would then be interpreted in such a way that AAAAAAAAAa is designated as h1, BBBBBBB as <p>, and the entire content enclosed within a prose div utilizing ...

What might be causing the checkboxes to not be included in the request?

I am currently working on a form that includes checkboxes, but for some reason, I am unable to get the form data to send to the view. The request only seems to include the csrf token. Can anyone point out what I might be doing wrong here? <form action=& ...

Animate the background image with a float effect using jQuery's timeout feature to create an up

I'm having an issue with a set of elements that have background images applied to them. Specifically, I want the planets in the images (all except the first one) to move slightly up and then back down to create a floating effect. In my jQuery code, I ...

Unable to apply inset box-shadow to image

I've added a box-shadow to my image. box-shadow: 0 0 10px RED inset However, the shadow is not showing up on the image. When I use Firebug to change the image path, I can see that the shadow is behind the image. How can I apply the shadow directly ...

Obtain the script's event feedback from the WebView and transfer it to React Native

My HTML script is used to display a module, but I encountered an issue with the eventHandler not responding. How can I ensure that the eventHandler in Web View triggers responses? I am not receiving any logs for the onSuccess, onError, or onClose methods w ...

Sending a collection of text inputs from a web form and saving them in MongoDB

I have been attempting to store an array of strings from my HTML form into my database (MongoDB). Here's the HTML form for creating a new class: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

How to extract the content of a child HTML element using jQuery

Is there a way to extract the text from the h4 tag with the class .media-heading in the code snippet below when a user clicks on the link? I attempted to use the closest method but it didn't yield the desired result. Check it out: <li class="media ...

Incorporating external CSS and JS files into your WordPress website

Hello, I am unfamiliar with the Wordpress framework and I am seeking guidance on how to add an external CSS and JS file to my Wordpress page. I have successfully created a new page, but would like to incorporate a CSS and JS file into it. Would creating a ...

The PHP include function seems to be failing to insert my PHP file into the webpage

When attempting to include the tabnav_Browse.php page, located in the includes directory, and the Browse_Page1.php file, located in the Browse directory, by adding this code to the <?php include ("../includes/tabnav_Browse.php"); ?>, nothing is displ ...

Stop the hover state from being deactivated in Firefox's DevTools

My current issue is with the persistence of the hover state on an element when clicking on another element. Unfortunately, the Firefox DevTools seem to remove the hover state. Take a look at the following animated image: https://i.sstatic.net/DFE5H.gif H ...

Add option button

Is there a way to dynamically add radio buttons using jQuery or JavaScript and save the data into a database? I have successfully appended input types such as text, textarea, checkbox, and select with options. Here is my code: <!DOCTYPE html> < ...