Adjusting the margin-top based on the height of the content

I am currently working on a page where I have a video as the background above the fold, spanning 100% width. My goal is to position the video close to the center of the page. I thought setting the height using vh would be the best option. However, I ran into an issue on larger screens where the video's height increases along with its width, causing the bottom of the video to get cut off.

Here is the CSS code I am using:

    .container {
      position: relative;
      margin-top: 20vh;
    }

    .video {
      opacity: .2;
      width: 100vw;
      vertical-align: middle;
      height: auto;
    }

Is there a way to determine the actual height of the video so that I can adjust the padding at the top accordingly? Or perhaps there is a simpler solution that I haven't considered?

Thank you!

Edit to add HTML Here is the HTML code for reference:

<div class="container">

    <video autoplay muted loop class="video">
      <source src="./media/MockUpVid.mp4" type="video/mp4"/>
    </video>

</div>
htmlcss

Answer №1

.wrapper {
  position: relative;
  padding-top: calc((100vh - 56vw)/2);
}

.featured-video {
  opacity: .3;
  width: auto;
  vertical-align: center;
  min-height: 60vh;
}

By utilizing the aspect ratio, we successfully achieved the intended design.

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

PHP API is returning the entire object, rather than just the message

I recently developed a REST API using PHP for data insertion. However, when I try to display the message in my AJAX success response, all I get is a series of objects instead. Here is my PHP code snippet: if(mysqli_query($connection , $ins)){ echo jso ...

phphtmljqueryajaxapi

What makes the nav class different from the navbar class in Bootstrap?

Recently, I delved into learning about bootstrap and web development. To my surprise, I stumbled upon the nav and navbar classes in bootstrap 4. I'm curious to know what sets them apart from each other and when it's best to use one over the other ...

htmlcsstwitter-bootstrapnavbarnav

Issue encountered when attempting to insert information into a database through an option menu utilizing ASP.NET Core

Trying to store data in a database with dot net core, having trouble when fetching data from an option menu. Here's a snippet of the code from the view: Any ideas on what might be going wrong? Thanks in advance <3 ` <label asp-for=&q ...

htmlasp.netasp.net-mvcdatabaseasp.net-core

Automatically collapse the responsive menu upon selecting a menu item

I have implemented a custom JavaScript code for a basic open/close menu movement on multi-page websites. The code works by closing the menu only when the user clicks the menu symbol. However, I now need to incorporate this code into a one-page website and ...

javascriptjqueryhtmlcssresponsive-design

How can I create a tickable image grid in Nativescript Angular?

My goal is to create an image grid in a Nativescript Angular App where users can select images and then move to the next page with the selected image IDs or names. I have successfully created the image grid, but I am struggling to make the images tickable ...

htmlangularnativescript

Exploring anchor navigation with the help of the <a> tag within a React component

I am currently working on implementing anchor navigation within one of the page components in my React app. My goal is to achieve a similar functionality as demonstrated here in draft.js, where subheaders are used as anchors with a link icon next to them, ...

htmlreactjsanchor

How can the parent div adjust its height to match the tallest child div?

Currently working on a web project where I have a div named "page", housing two other divs - one on the left called "navigation" and the one on the right named "content". I am aiming to set the height of the "page" div to match the height of the tallest di ...

csshtmlwebheight

Integrate internal JavaScript and style files into a Google Apps Script

Currently, I am working on a Google Apps Script project that consists of a *.gs-file and a *.html-file. This project is being developed in the browser on script.google.com, which means all files are stored within my Google account. In the html file, I have ...

javascripthtmlgoogle-apps-script

Utilizing nested components with distinct styling techniques

I have a react component that accepts the size prop as either small, regular, or large. Depending on the size, a specific CSS class is assigned to style the component accordingly. Here's an example of how these classes are defined: .my-component { ...

cssreactjssass

"Enhancing the aesthetics: Stylish blue borders around Bootstrap

After successfully setting up bootstrap-select, I have noticed that blue borders are showing in two specific instances: 1) within the dropdown menu 2) when a new value is selected I have made some adjustments but the issue persists. Can someone please p ...

csstwitter-bootstrapbootstrap-select

CSS Grid: Rows not maximizing available vertical space

I am trying to create a simple layout using CSS grid instead of flexbox: https://i.sstatic.net/xjEy0m.jpg Currently, I have something similar but with an unwanted white area: https://i.sstatic.net/IEe2Wm.jpg My question is, what am I missing in my code ...

htmlcsslayoutcss-grid

single calendar bootstrap-datepicker allowing users to select date ranges

Is it possible to create a single calendar range date picker with Bootstrap instead of using two separate calendars? Currently, I have implemented a solution with two calendars. $('#datepicker').datepicker({ }); <link href="https://cdnjs.cl ...

javascripthtmlcssbootstrap-4date-range

Does the XMLHttpRequests have a NavigationTiming interface that can be utilized?

While the window.performance object offers insights into the performance of the browser's last page load, such as DNS lookup times, I have not come across a similar feature for Ajax calls. The overarching issue I am aiming to address is the ability t ...

javascriptajaxhtmlgoogle-analyticsxmlhttprequest

What is the best way to modify CSS stylesheets dynamically according to the browser's width?

We are in the process of creating a collaborative open-source web application for art educators worldwide. Our goal is to have a visually appealing website that automatically adjusts based on the width of the browser, similar to top websites like google.or ...

javascripthtmlcssbrowsergoogle-apps-script

What steps need to be taken in order for this CSS to be correctly showcased in IE8?

Instead of overwhelming you with lines of code, please visit this page: . The issue at hand is that the tabs are not properly attached to the pane in Internet Explorer 8 (IE8). Since most clients of the veterinary clinic use IE8, this problem has become ...

htmlcssinternet-explorer-8

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

javascriptcssreactjsecmascript-6

The button is positioned at the bottom right within a div surrounded by text that flows around it seamlessly

Image Is there a way to position a button in the bottom right corner of a div with a fixed height that is filled with text where the text flows around the button? I have attempted using "float" and positioning the button, but I have not had any success. ...

htmlcss

Having trouble retrieving the URL from JSON data - every time I attempt to access it, it just shows as undefined. Any suggestions

Having trouble extracting the URL from JSON, as it shows undefined. Any suggestions? <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta> <script language="JavaScript" type="text/javascript" ...

javascriptjqueryhtmljson

Is there a way I can enhance this Caption with some background effects?

I'm running into a little issue - I need to add a caption to my image with a transparent black background at 65% opacity. The caption is currently plain, without any background effects. Urgent help required. Thank you for your assistance. Here is my c ...

htmlcss

Determining conditions within a React component

I'm working on two React modules that are responsible for adding and removing users from each other. I need a way to alert the user if all the users have been removed from the "remove users" module. Let's take a look at the code snippet where use ...

javascripthtmlreactjsmodule