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 :)