First video filling the entire screen with no black bars

I am looking to implement a video tag that can occupy the entire window, centered, without distorting the aspect ratio. Additionally, I want this video tag/container to push down all other content below it.

When the window is resized, I would like the video to resize proportionally as well.

I have attempted different methods involving relative and absolute positioning, but none have achieved this desired effect. However, I did come across one website that accomplishes this:

Unfortunately, I have not yet figured out how they achieve this effect.

Thank you!

htmlcssvideo

Answer №1

As stated on their site:

  <div class="visual-container" style="width: 1023px; height: 888px;">
    <meta content="Capture">
    <meta content="Capture video">
    <meta content="http://wearecapture.com/wp-content/uploads/2014/11/shutterstock_849483264.jpg"><video autoplay="" class="display-video" height="600" loop="" preload="auto" style="visibility: visible; width: 1580px; height: 982px;" width="1400">
    <source src="./wp-content/uploads/2014/11/CaptureMainHeader.webm" type="video/webm">
    <source src="./wp-content/uploads/2014/11/CaptureMainHeader.mp4" type="video/mp4">
    <source src="./wp-content/uploads/2014/11/CaptureMainHeader.ogg" type="video/ogg"></video>
  </div>

where visual-container dimensions are dynamically adjusted using javascript during window resizing.

Answer №2

Make sure to calculate the width and height when resizing the window. Below is a snippet of code that may help (please note, it's not the most efficient code).

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        var fullVideo = {
            init: function () {
                this.count();
                this.handlers();
            },
            count: function () {
                var parentWidth = $(window).outerWidth();
                var parentHeight = $(window).outerHeight();
                $(this.wrapClass + "," + this.videoClass).css({
                    width: parentWidth + "px",
                    height: parentHeight + "px"
                });
            },
            handlers: function () {
                window.onresize = function (even) {
                    fullVideo.count();
                };
            },
            wrapClass: ".main-wrap",
            videoClass: ".video-wrap"
        };

    </script>

    <style type="text/css">
        body {
            margin: 0;
        }

        .main-wrap {
            position: relative;
            background: rgba(0, 0, 0, 1);
        }

        .video-wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 300px;

        }

        .other-wrap {
            height: 500px;
            background: green;
        }
    </style>
</head>

<body onload="fullVideo.init()">
<div class="main-wrap">
    <video class="video-wrap" poster="http://media.w3.org/2010/05/sintel/poster.png"
           mediagroup="myVideoGroup" preload="none">
        <source id="mp4" type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"></source>
        <source id="webm" type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm"></source>
        <source id="ogv" type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv"></source>
        <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

<div class="other-wrap"></div>
Other content
</body>

</html>

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

Align the date input field to the center for better visual appeal

I am facing a challenge in centering the date in an input, not the entire input element inside a div. When I attempt to center it, the date gets positioned within a portion of the input due to a resizable right-hand side panel for selecting a date from a c ...

javascriptjquerycsshtml

Handlebars template engine does not support query parameters

Below is the code snippet I am working with: app.get("/editar-equipo?:id", (req, res) => { const equipos = obtenerEquipos() let equipoSeleccionado for(let i = 0; i < equipos.length; i++){ if(equipos[i].numeroId === ...

javascripthtmlnode.jsexpressexpress-handlebars

Tips for adding event listeners to dynamically-loaded content using AJAX

I need help with the following code snippet: $("#contantainer").load("some_page.txt"); Inside some_page.txt, I have the following content: <div class="nav"> <ul id="nav_ul"> <li><a class="nav_a" href="#home" id="home"> ...

javascriptjqueryhtmlajax

Animating CSS Pixel Fragments

After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind. To see this issue in action on Chrome 66, check out the Code Pen: https://i.sstatic.net/Gl ...

javascripthtmlcssanimation

Saving an Echo Command in a Variable

I've set up an eye exam program and now I'm trying to figure out how to display the results only after the exam is completed. The issue is that when I echo the stored SESSION variables containing the results, they are displayed even on page refre ...

phphtml

When attempting to parse a JSON feed with jQuery and innerHTML, the data fails to display

Having trouble parsing a JSON feed using jQuery and innerHTML, but for some reason it's not working as expected. No errors are being displayed in the console and the feed itself is functioning properly. Not quite sure why this issue is occurring. < ...

javascriptjqueryhtmljsonfeed

Arrange and overlay PNG images within a Bootstrap container using position:absolute

I've been attempting to align and stack some images within a bootstrap grid, but I'm having some trouble. Instead of aligning within the grid, the images seem to align to the window instead. I've been using position:absolute, which I found ...

csstwitter-bootstrapcss-position

When I adjust the height to 100%, Google Maps fails to show up on the screen

When I try to set the height of the gmaps div to 100%, nothing appears on the screen. I am able to set the width to 100%, but for some reason, setting the height to 100% does not work. If I set a specific height like 400px, it works fine. Below is the cod ...

cssgoogle-mapsjsphtml

Hierarchy in CSS: The battle between author and user styling

Following a hierarchy of precedence: User agent declarations User normal declarations Author normal declarations Author important declarations User important declarations The CSS specification distinguishes between author and user: Author. The author s ...

css

I am looking to implement an animation that automatically scrolls to the bottom of a scrollable DIV when the page is loaded

My DIV is configured with overflow-y set to scroll. .scrolling-div { width: 85%; height: 200px; overflow-y: scroll; } If I have an abundance of content within this div, my goal is for it to automatically scroll to the bottom upon loading the page. I am ...

javascriptjquerycss

What is the method to restrict the selection of only one option for specific values in a multiple-selection dropdown menu?

Is there a way to create a dropdown menu with the following functionalities: I want to allow multiple selections for options A, B, and C, but disable multiple selection if option D is selected. Any tips on how to achieve this? Thank you. <label>Ch ...

javascripthtml

What is the best way to ensure that two divs in the same row float in opposite directions?

Check out this JSFiddle to see what I have done so far: JSFiddle Link html <div class="results"> <h2>Some data</h2> <ul style="margin:0;padding:0;"> <li class="resultsListItem" style="list-style-type: none;"> ...

htmlcssalignmentcss-float

Sending information from ngRoute resolve to the controller

I am currently working on an application that utilizes ngRoute to create a Single Page Application. One of the requirements is to ensure that the view is not loaded until the data has been successfully fetched from the database. While I have managed to ach ...

javascripthtmlangularjsangular-servicesngroute

Resizing a scrollable list using React Refs and UseLayoutEffect

Essentially, my issue stems from having a scrollable list with a set maximum height of '100vh'. I also have a detail card beside the list that contains accordion components. When one of these accordions is expanded, it increases the height of the ...

javascriptcssreactjsreact-hooksmaterial-ui

Setting a static width for a specific cell in HTML5 - What's the best way to go about it?

When working with HTML5, how do I define a specific width for a table cell? Many of the <col> properties that were present in HTML4 are no longer applicable in HTML5. Just to clarify, I am aware that I can use <td style="width:150px">, but thi ...

csshtml

Typescript Angular2 filtering tutorial

In Angular 2 using TypeScript, the goal is to search for matching values from an array within an object array. The intention is to filter out any objects where the 'extraService' property contains any of the values from the 'array_values&apo ...

javascripthtmlangulartypescript

What is the best way to include a div element with a dynamic animation on a webpage?

I'm attempting to create a laser beam that can shoot enemies on the screen, much like in classic games such as Space Invaders or Galaga. However, I am encountering difficulties getting the laser to move when I click the button. Below is the code I hav ...

javascriptjqueryhtmlcss

`Why are my overflow-x and flex-wrap not functioning as expected in React JS?`

Having trouble aligning all the movie posters in a single line? It appears that your overflow-x and flex-wrap properties aren't functioning as expected in your App.css. Here's a snippet of your App.css: body { background: #141414; color: ...

cssreactjsrowoverflow

Streamlining programming by utilizing localStorage

Is there a more efficient way to streamline this process without hard-coding the entire structure? While attempting to store user inputs into localStorage with a for loop in my JavaScript, I encountered an error message: CreateEvent.js:72 Uncaught TypeErr ...

javascripthtmlcssfor-loop

Display a modal when clicking on a bootstrap glyph icon

I tried following a tutorial on how to create a Bootstrap modal at https://www.w3schools.com/bootstrap/bootstrap_modal.asp However, I would like to use a glyph icon in the code snippet like this: <span class="glyphicon glyphicon-pencil" class="btn btn ...

csstwitter-bootstrap