Adjust the height of videos automatically on columns

I need help figuring out how to display two videos with different dimensions side by side without any weird gaps. I've already tried using flex display with no luck. My current code looks like this:

 <div class="row">
            <div class="col-sm block-element-left">
                <video class="rc" autoplay="autoplay" loop="loop" muted="muted" playsinline>
                    <source type="video/mp4" src="video1.mp4">
                </video>
            </div>

            <div class="col-sm block-element-right">
                <video class="rc" autoplay="autoplay" loop="loop" muted="muted" playsinline>
                    <source type="video/mp4" src="video2.mp4">
                </video>
            </div>
        </div>

<style>
    .block-element-right {
        padding-left: 10px;   
    }

    .block-element-left {
        padding-right: 10px;   
    }

    .rc{
    -moz-border-radius:20px;
    border-radius:20px;
    overflow:hidden;
    cursor: pointer;
    z-index: -1;
    width: 100%;
    }

    .col-sm {
    padding: 0%;
    position: relative;
    }
</style>

Any suggestions on how to solve this issue would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

Ensure to specify the width and height within the video tag itself

<div class="col-sm block-element-left">
    <video width="420" height="340" autoplay="autoplay" loop="loop" muted="muted" 
         playsinline>
             <source  src="movie.mp4" type="video/mp4">
    </video>
</div>

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 JavaScript mouseenter/out event all about?

My goal is to create a hover effect using JavaScript. I am utilizing the mouseenter and mouseout events to display the content when the mouse hovers over a button and remove the content when the mouse moves out. However, I am facing an issue where the cont ...

javascripthtmlcssjsonajax

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

UPDATE: The client has requested testing to disable the click and drag feature in IE, so replicating the bug may be difficult at this time. I apologize if this hinders the community's ability to help fix the root issue. Here's the issue: It occu ...

javascriptjquerycssdebugginginternet-explorer-9

Can the footer be adjusted to be full width only?

Is there a way to stretch only the footer on a blogger simple template to full width without altering other elements? I have looked into similar topics, but they mainly focus on WordPress or involve changing multiple elements, which is not suitable for my ...

htmlcssfooterblogger

Ways to automatically style the child divs within a parent div

I'm trying to figure out how to float a parent div with child divs of different widths and heights while maximizing the use of space and not being affected by absolutely positioned elements. For reference, here's an example: http://jsfiddle.net ...

javascripthtml

What could be causing the constant issue of receiving an empty $_FILE when attempting to upload a file using ajax and php

I am currently utilizing ajax to send form data and upload files from the client to the server (php). An issue arises when attempting to access the file content on the server side - for reasons unclear, the $_FILES variable appears empty regardless of my ...

phpjqueryhtmlajax

Sending property via div

In my ReactJS project, I am working on creating a dynamic div board. To properly position the elements on the board, I need to pass props such as row and column IDs. componentDidMount() { let board = []; for(let i = 0; i < 30; i++){ for(let j = ...

javascripthtmlreactjs

Executing a snippet of Bootstrap 5 code under specific circumstances

I need to execute different code blocks based on the window width. When the width is 500px or more, I want to run a specific block of code, and when it's 499px or less, I need another block of code to run. How can I achieve this? For widths of 500px ...

cssbootstrap-4bootstrap-5

Refrain from showing content beneath a certain element

Is there a way to hide all content that appears after a specific element, such as a particular class of div? The issue I am facing involves using a 1&1 webpage builder with a restrictive layout-template enforced by my boss. I am trying to remove the foote ...

javascriptjquerycsshidefooter

Ways to resolve the issue of the search icon adapting to the selected value of the dropdown menu

Take a look at this. <!DOCTYPE html> <html lang="en"> <head> <!--REQUIRED META TAGS--> <meta charset="utf-8"/> <meta name="viewport" content="width=device-widt ...

htmljquerybootstrap-4

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to utilize the isset method in PHP to check for the existence of two different

Having trouble with displaying both data sets in a PHP file? Here's the code snippet: <?php session_start(); include_once'config/connect.php'; //establish database connection if(isset($_POST['add'])) { $add = mysql_query( ...

phphtmlsqlisset

Is there a way to retrieve a CSS file using AJAX from a separate origin?

Whenever I am trying to load a CSS file via AJAX from my dreamhost account, I encounter the error message that says No 'Access-Control-Allow-Origin' header is present on the requested resource. After searching for solutions online, I stumbled upo ...

cssajax.htaccess

Jquery bypasses original stylesheet settings when inline styles are removed

I have a CSS file with various styles defined within it. One style in particular has the property position set to 'fixed', but this only applies to specific combinations of classes. For example: .mystyle.blue { position: fixed; } Here, el ...

jquerycss

Maintain scroll position during ajax request

I am working on a single-page website that contains numerous containers. Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time. These containers have variable heights set to auto. The website uti ...

javascriptjqueryhtmlcss

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

javascriptjqueryhtmlcss

The issue of multiple useEffect renders is triggered by the draggable columns feature in a ReactJs Antd table

I have implemented a table in ReactJs using antd. In order to make the columns draggable, I added an eventListener to th tags. I used useRef to access all the th tags: const [cols, setCols] = useState(columns); // -> columns is a static array of objects ...

javascripthtmlreactjsdrag-and-dropantd

What's the best way to dynamically show Bootstrap collapse panels in a loop with AngularJS ng-repeat?

Currently, I am utilizing angularJS and attempting to include a bootstrap collapsible-panel within a loop. The code that I have written is causing all the panel bodies to be displayed beneath the first panel header. I need each body to be shown below i ...

javascriptjqueryhtmlangularjstwitter-bootstrap

How can CSS be used to create a responsive form script?

We have enlisted the services of an SEO provider through upcity.com, which necessitates us to embed a form on our website. However, we are facing challenges with the responsiveness of the form on mobile devices, which undermines our efforts. Therefore, I a ...

htmlcssresponsive-design

What is the method for printing a background image with CSS?

I recently implemented the ASP Net Sprites package to create CSS Sprites for my website. While the sprites are working perfectly on the webpage, I've encountered an issue where the generated images do not show up when the page is printed. Here' ...

htmlcssprintingimage

What is the best way to distribute stroke width evenly on a rounded hexagon in an SVG?

I created a rounded hexagon with stroke width, but the top and bottom curves appear darker. Does anyone know how to evenly distribute the stroke width along the border? Here is my SVG code: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox ...

htmlcsssvg