Video with dynamic sizing doesn't adapt properly

I successfully achieved my main goal, which was to have a background video at the top of my page. However, I am facing an issue with making the video responsive. Currently, as I decrease the screen size, the video shrinks in both width and height rather than increasing in height. I just want the width to get smaller while the height increases.

Here is an example:

Current behavior:

https://i.stack.imgur.com/XjQxz.png

What I need: https://i.stack.imgur.com/d0a9x.png

My HTML code:

<section class="custom content_section bg_fixed white_section bg2">
        <div class="embed-responsive embed-responsive-16by9">


            <div id="video_overlays"></div>

            <div class="container vertical-center">
                <div id="over">
                    <div class="title-wrapper main_title  centered upper">
                        <h2 id="video_title"><span class="line"></span>VIDEO TITLE</h2>
                    </div>

                    <div class="description4 centered">
                        <p id="video_sub_title"><b>LOREM IPSUM A SIMPLE DESCRIPTION<br>
Usability and simple deployment are the key words.</b></p>

                    </div>
                </div>
            </div>
            <div id="player" width="100%" height="100%" style="z-index:-1">
            </div>
        </div>

    </section>
htmlcsstwitter-bootstrapvideoresponsive-design

Answer №1

If you're looking for a solution, check out this live example:

http://example.com

To enhance the look of your video container, consider applying the following style rules. The key elements include setting the minimum height and width to 100%, then utilizing transform:translate to center the video.

I hope this resolves your issue!

CSS

#video-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

Answer №2

Give this a try!

CSS

#videocontainer{
    position:absolute;
    z-index:-1;
    background:url(../the link to image when video uploads or not supported by browser.jpg) center center no-repeat;
    background-size:cover;
    width:100%;
    height:100%;
}
.videobg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
    z-index: 1;
}

Your HTML

<div class="videocontainer>
    <video class="videobg" controls autoplay loop id=player poster="http://the link to image when video uploads or not supported by browser">
        <source src="link to your mp4 video file.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

Tips for positioning a Div element in the center of a page with a full-page background

I am trying to center align my div containing login information on the webpage. The static values seem to work fine, but I am looking for a way to position it dynamically. Additionally, the background is only covering a strip with the height of the div... ...

htmlcss

I need to access a webpage using VBA without relying on Internet Explorer for logging in

I need to access the website by logging in. However, I am facing difficulty in using it. Unfortunately, I am unable to share the username and password due to confidentiality reasons. Below is the code snippet that I have: Sub checkdownload() Dim u ...

htmlvba

How to Use jQuery Slice to Display the Top N Items from a Dropdown Menu

How can I display only the top 10 results from multiple UL lists in my navigation? The code snippet provided below currently works for the first list, but how can I extend this functionality to all of the lists? $(document).ready(function() { var elem ...

javascriptjqueryhtmltwitter-bootstrapslice

Assign the value/text of a div element by using JavaScript/jQuery within a PHP loop

I'm struggling to figure out how to set the value/text of a div using javascript/jquery inside a loop. Can anyone offer some guidance on this issue? Goals: Extract data from a database. Use javascript/jquery to assign the extracted data to an eleme ...

javascriptphpjqueryhtml

Radio buttons have been concealed and are not visible

Tried the solutions recommended in a previous question about radio buttons not showing in Safari and Chrome, but unfortunately, it did not solve my problem. It seems like this issue is different from the one discussed in that question. The WordPress them ...

htmlcssradio-button

Issue with React Toastify display not showing

I'm having trouble getting a pop-up alert to appear when a user interacts with a radio button. I've included the relevant code snippet below. Even though I see the console message when I select a radio button, the pop-up doesn't show up. Can ...

htmlreact-toastify

Display everything when an option is clicked

I have a filter that is working perfectly. When I select a specific category, it filters out only rows with that category. However, I am stuck on how to display all rows again after clicking on the first option. My objective is to show all rows when "Categ ...

javascripthtmljquerycss

Offspring element overrides styling of its parent

#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...

htmlcss

Rearrange HTML list items automatically according to changes in numeric sort order

I am working on a web page that features a dynamic ranked list. The items in the list are assigned a specific rank order number which changes based on user interactions elsewhere on the page. I have been exploring different options to automatically reorgan ...

javascripthtmllistsorting

AngularJS using the ng-controller directive

I am presenting the following HTML code excerpt... <!DOCTYPE html> <html lang="en-US" ng-app> <head> <title>priklad00007</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angula ...

javascripthtmlangularjs

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

The page refreshes automatically when the search icon is clicked, but the ajax method does not trigger the page reload

Whenever I click on the search-box <a>, the JavaScript is triggered but doesn't execute the ajax method filter_data_guide_specs(). Instead, the page automatically reloads and fails to read the JS code. HTML <div class="form-group"> < ...

javascriptjqueryhtmlajaxlaravel

A distinct alias for the identical custom control

Suppose we create a custom control, for example: [assembly: TagPrefix("CustomControls.UI", "custom")] public class CustomTextBox : TextBox { ... } When using this custom control in HTML code, we typically have to reference it like this: <custom:Cus ...

c#asp.nethtmlcustom-controls

Utilizing jQuery for animating SVG elements with dynamic color changes and scaling effects upon hover

Seeking assistance from coding experts! I have created an icon and am attempting to modify it so that the color changes when hovered over. Additionally, I want the white square to scale down by 50% starting from the top-left corner of its current position. ...

javascriptjqueryhtmlcsssvg

Error: TweenLite has not been recognized

/justincavery/pen/mPJadb - this is a link to CodePen After copying the code from CodePen and running it, I encountered an error: "Uncaught ReferenceError: TweenLite is not defined". The image only draws once and there is no animation unless I press "F5 ...

javascripthtmlcss

Creating a blank grid using ng-repeat in angularJS

I'm attempting to create an empty grid using angularJS, but I've only been working with it for 2 days so I'm not very experienced. This is what I have come up with so far: <!doctype html> <html ng-app> <head> < ...

javascripthtmlangularjs

Can you help me adjust the height of my banner and center its content vertically?

Looking to create a custom banner for my website, specifically at the top with dimensions of 700px width and 80px height. The code snippet is as follows: <div class="container-narrow" style="heigth: 80px;"> <img src="#" width="52" ...

htmlcss

Optimizing CSS across various pages and screens sizes with critical importance

My CSS file is in need of optimization for quicker loading times. It contains numerous components utilized across various pages (such as the start page, category pages, and detail pages) on different screen sizes (mobile, tablet, desktop). Manual optimizat ...

cssperformanceweb

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

I am working on an HTML page which has a form with various tags such as checkboxes, dropdowns, and more. When a button is clicked, I want to display the same form as plain text in a popup using jQuery dialog. Currently, I have managed to show the form in ...

javascriptjqueryhtmlcssforms

The select2 plugin seems to be having trouble recognizing the Li click functionality

I have a select menu that is using the select2 plugin. I am trying to add a class to the <select> element when a menu option is clicked, but it doesn't seem to be working as expected even after testing with an alert. https://jsfiddle.net/ysm4qh ...

javascriptjqueryhtmlcssjquery-select2