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

Unique layout design that organizes calendar using nested divs with flexbox - no

I am having difficulties achieving the desired outcome with my calendar header layout implemented using flexbox for the years, months, and days. What could be the issue? Is it due to the structure of the HTML or is there something missing in the CSS? The ...

htmlcsscalendarflexbox

What are the common jQuery functions used to toggle both display and visibility simultaneously?

After incorporating the default Bootstrap theme into my mobile site, I discovered that jQuery is struggling with a seemingly simple task: displaying elements marked with the hidden class. It's hard to believe, but it's true. The tricky and troub ...

jquerytwitter-bootstrap

Iterating through form elements for validation using jQuery

Is there any way to accomplish this using jQuery? This is the initial setup: <input type='checkbox' class='sk1' /> <input type='text' class='skill1' /> <input type='checkbox' class=' ...

javascriptjqueryhtmlinput

styles.css is generating an ERROR message, indicating that it is unable to read properties of null when trying to access the 'classList'

Hey there, I've been working on adding a background color change to my navbar when the scrollY exceeds 30px, and it's functioning properly. However, I'm encountering an error in the console which states that the new classList cannot be added ...

cssangularangularjstypescripttypeerror

Executing PHP Code with an External JavaScript File in an HTML Document

I have a script called initialize_database.js that utilizes JQuery to trigger a PHP script for creating a database and some tables. I made sure the PHP script is working correctly by adding HTML to test it independently, and it performed as expected. Below ...

javascriptphpjqueryhtml

Extract information from page 1 to page 2 by utilizing ajax

Greetings, I am currently facing an issue with parsing data using the href get method to retrieve PHP by ajax on another page. Is this achievable? By the way, my framework of choice is CODEIGNITER. This is my HTML href code snippet: <a href="'.b ...

phpjqueryhtmlajax

Firefox 44 experiencing issue with HTML 5 Video playing sounds unexpectedly

There has been an unusual observation of Firefox playing the sounds of all embedded videos on a page, even when the elements themselves are not actively playing. Clicking play on the video controls triggers new sound and video playback to start. All video ...

javascriptfirefoxvideo

When utilizing narrow resolutions, header letters may overlap each other

As I integrate bootstrap into my website, I've noticed that when the resolution is narrow, my header overlaps. If the header is of a small size, like the typical H1 size, everything looks fine. However, when using a larger size (see CSS below), the is ...

htmlcssfont-size

The stature of Bootstrap's columns

Exploring Bootstrap has been an exciting journey for me, as I believe it will simplify the process of creating visually appealing web pages. I'm currently facing a challenge in understanding these two examples: Bootstrap 3: http://codepen.io/rhutchi ...

csstwitter-bootstraptwitter-bootstrap-3

What is the best way to extract and showcase the caption of an href in a span element?

I want to dynamically load different html pages into a div using jQuery. My goal is to extract the caption of the clicked link and then display it within a span, similar to fancybox functionality. $(".iframe").on("click", function(e) { e.preventDe ...

jqueryhtmlhyperlinktitle

What could be causing these cards to not show up correctly?

I am currently incorporating Angular Material's cards in a material grid. Here is the code snippet that I am working with: http://codepen.io/anon/pen/YWwwvZ The issue at hand is that the top row of images extends off the screen at the top, and the b ...

cssangularjsangular-material

extracting the HTML content from JavaScript and saving it into a standalone file

update When I click a link, a popup opens and I see all this HTML. The smile method is called when I click the link, and we append HTML in that method so that we can see it when the popup is opened. I moved it to a separate file something.component.html, ...

javascriptjqueryhtmlangularjstypescript

"Upon choosing a file using the HTML input file multiple element, a triggered event

After selecting multiple files using the input type="file" HTML element, I am eager to start uploading them. Can you tell me which event I should use to execute code immediately after finalizing my file selection? This is what my HTML code looks like: &l ...

javascriptjqueryhtmldom-events

Transforming hover interactions into onclick events involves adjusting the CSS and JavaScript

Is there a way to convert this hover menu into an onclick menu? <div id='cssmenu'> <ul> <li class='has-sub'><a href='#'><span>Users</span></a> <ul> ...

phpcss

Display text when hovered over or clicked to insert into an HTML table

I have an HTML table connected with a component field gameArray and I need it to: Show 'H' when the user's cursor hovers over TD (:hover) and the corresponding field in gameArray is an empty string, Fill the gameArray field after a click. ...

javascripthtmlangulartypescriptangularjs-directive

Ways to extract metadata from a given URL

Recently, I've delved into the world of JavaScript and I'm looking to extract metadata from a given URL. Whenever a URL is entered into an input field, I want to retrieve its meta data - a simple task in HTML using JavaScript. However, every time ...

javascripthtml

CSS Menu Not Functioning Properly on iPad While Scrolling is Required

My CSS dropdown menu has mouseout and mouseover events but I'm experiencing issues on iPads and iPhones. The menu automatically closes when scrolling, making it difficult to open any links unless the menu is short enough to avoid scrolling. Does anyon ...

htmlcssipaddrop-down-menu

"Composing perfect sentences: The art of incorporating quotes

I am attempting to include text with quotes in a DIV, like so: "All is well that ends well" The text is generated dynamically and I'm using a JavaScript font replacement plugin (CUFON) to add quotes around the text. Sometimes, the ending quote drops ...

javascriptjquerycssquotesword-wrap

A step-by-step guide on incorporating RAW css into your Jekyll website

I am experiencing an issue with loading a CSS file on my website. <link rel="stylesheet" href="/assets/css/my_file.css"> This file is located at _assets/css/my_file.css. However, when I try to load the page, the CSS file does no ...

htmlcssjekyll

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

javascriptjqueryhtmlcss