Populating container with video element

I have divided my page into 4 quadrants using viewheight and percentage widths, which has been successful.

Now, I want to insert a video in each div that can responsively fill its parent div. When I assign width: 100% to the video, it causes some alignment issues and doesn't behave as expected with media queries intended to collapse the content (this issue is specific to videos).

Additionally, I am struggling to make the video utilize the maximum height of the div. The videos I have are in a 16:9 ratio while the divs are at a different aspect ratio. If the videos need to be zoomed in to fill the space, that would be acceptable, but I'm unsure how to achieve this.

Thank you for any assistance you can provide.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<style type="text/css">
    html, body {
        -webkit-font-smoothing: antialiased;
    }
    .grid__item {
        height:49vh;
        float:left;
    }
    .grid__half {
        width:50%;
    }
    .grid__quarter {
        width:25%;
    }
    @media only screen and (min-width: 320px) {
        .grid__item {
            height:16vh;
            background:#fff;
        }
        .grid__quarter {
            width:100%;
        }
        .grid__half {
            width:100%;
        }
    }
    @media only screen and (min-width: 480px) {
        .grid__item {
            height:32vh;
            background:pink;
        }
        .grid__half {
            width:100%;
        }
        .grid__quarter {
            width:25%;
        }
    video {
        top:0;
        left:0;

    }
    }
    @media only screen and (min-width : 768px) {
        .grid__item {
            height:49vh;
            background:#fff;
        }
        .grid__half {
            width:50%;
        }
        .grid__quarter {
            width:25%;
        }
    }
    @media only screen and (min-width : 992px) {
        .grid__item {
            height:49vh;
        }
        .grid__half {
            width:49%;
        }
        .grid__quarter {
            width:25%;
        }
    }   
    @media only screen and (min-width : 1200px) {
        .grid__item {
            height:50vh;
        }
        .grid__half {
            width:50%;
        }
        .grid__quarter {
            width:25%;
        }
    }

</style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="grid__item grid__half" style="">
            <video><source src="pong.mp4" type="video/mp4"></video>
        </div>
        <div class="grid__item grid__half">
            b
        </div>
    </div>
    <div class="row">
        <div class="grid__item grid__quarter">c</div>
        <div class="grid__item grid__quarter">d</div>
        <div class="grid__item grid__quarter">e</div>
        <div class="grid__item grid__quarter">f</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
</body>
</html>

Answer №1

Given the limited information available (without any HTML provided), I recommend experimenting with the following CSS properties:

min-height: 50vh; min-width: 50vw
.

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 the input field not properly centered on the page?

Can someone explain why the input field is not aligning in the center? I am new to web development and need some assistance. <input type="text" id="search_bar" class="form-control" placeholder="Search" align="center"> In my CSS, I've ...

Can you help me with compiling Twitter Bootstrap 3.0 on my Windows 8?

Can anyone guide me on compiling Twitter Bootstrap using Less on a Windows machine? I tried following a tutorial but ran into issues with installing lessc (it was not in the npm registry). Also, the tutorial was for BS2 and not 3.0 which made me skeptical ...

When an element with a border attribute is hovered over, it shifts position

When I hover over an li-element, I want to apply borders at the top and bottom. Here's the code snippet: #overview li:hover { background: rgb(31, 31, 31); border-top: 1px solid white; border-bottom: 1px solid white; } Check out this JSFi ...

Tips for maintaining grid width when columns are rearranged in the column menu

Is it possible to stop jqgrid from changing its width to full screen after column selection? I attempted the code below, following guidance from How to change column name in column chooser pop up in jqgrid? My aim was to create a column switcher function ...

Customizing Background Image Opacity in MuiCssBaseline

I recently tried to set a background image for my demo application built with React, Next, and Material-UI. In my _app.js file, I included the following code: import React from 'react'; import { ThemeProvider } from '@material-ui/core/styles ...

Removing the Shadow from Material UI's Dialog Box

I am currently struggling with the Material UI dialog component that displays information about a location marker. My issue is with disabling the unattractive box shadow that surrounds the component. Despite setting box-shadow: none and trying different so ...

Troubleshooting Problems with Adjusting Left Margin Using JQuery

function adjust_width() { $('#cont').toggle(function(){ $('#cont').animate({marginLeft:'0%'}); },function(){ $('#cont').animate({marginLeft:'18.4%'}); }); } The code above is in ...

Alignment of UI Divs with CSS Bootstrap and HTML

I am facing an issue with two divs in my UI. One div has a label, and the other contains a file selector. Currently, they are stacked vertically instead of being side by side. https://i.stack.imgur.com/fIz03.png How can I align these divs horizontally wit ...

Manipulate the css pseudo-element :after using jQuery's .siblings() method

How can I use jQuery to edit the :after element created by CSS? <div class="box"> <h3 class="social">Social</h3> <ul> <li><a href="https://www.youtube.com/" onmou ...

When a dialog box is displayed, a scrollbar will automatically appear

I've encountered a strange issue while working with Angular dialogs: A vertical scrollbar unexpectedly appears, even though I've set the dialog to have a fixed width. component.ts const dialog = this.dialog.open(DialogComponent, { width: ...

Tips for preventing HTML ID clashes while integrating with the Document Object Model of external websites

When incorporating additional HTML elements into a webpage using Javascript or jQuery, along with external CSS declarations, it is important to avoid conflicts with existing IDs and class names already present on the page. This could lead to issues if ther ...

Are inline styles being utilized in a Styled component?

I'm currently utilizing styled-components within a React project and I am having trouble finding documentation regarding whether or not a styled component can accept inline styles on the "style" property. For example: The Text component has been styl ...

The imported font used in Firefox is displaying with a striking underline text-decoration

I am currently using the Cardiff font in a project and attempting to apply the style text-decoration:underline to it. While this works perfectly in Chrome (Version 35.0.1916.114), in Firefox (Version. 29.0.1) the underline appears to be crossing through t ...

Achieve maximum height with background images

Having trouble with responsiveness on my box containing a background image. I am aiming for the box to adjust its height based on the background image, as I have set the background-size attribute to auto. html: <div class="index_boxs" id="discover_win ...

Obtaining the value of an item in an unordered list

Hi everyone, I have been trying to extract the value of <li> elements that display images horizontally. Below is the HTML code I am working with: <div id="layoutInnerOptions"> <ul id="navigationItemsContainer" class="layouts_list"> <l ...

Achieve seamless alignment of radio group labels alongside radio buttons through the use of only CSS

After using a table to display radio buttons with labels in the past, I am now attempting to achieve the same result using only CSS. Is there a CSS technique that will allow me to position the label text neatly on top of the corresponding radio button? He ...

Display a progress bar in Bootstrap with a labeled indicator positioned above the bar and background to the

Is there a way to create a progress bar with a label positioned to the right using Bootstrap v5.2 Progress Bar? https://i.sstatic.net/gOWie.png I attempted to use negative margins to achieve this layout but faced issues when the label expanded due to lon ...

Adjust the font size within a container using HTML code, no CSS required

Is it possible to directly change the TextSize and TextColor within the HTML Document? I need it to be within this specific box (same class) because of the background color. However, the text size always remains the same. The HTML line is: Which button re ...

Tips for styling CSS for individual "ID" elements within a primary "Class" container

Struggling with crafting CSS code to style a specific HTML snippet. Take a look at the following HTML: <div class="FourSquares"> <div id="first"></div> <div id="second"></div> <div id="third"></div> ...

The overlay of the background image is excessively oversized

After implementing the following CSS to showcase a background image: height: 90%; /* or any other value, corresponding with the image you want 'watermarked' */ width: 90%; /* as above */ background-image: url('<?php echo "study/".$_SESS ...