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

Tool to identify your network location: Local domain and network status checker

Is there a way to determine if a user is accessing our site from within our local network or from the broader internet? For example, imagine someone scans a QR code at our restaurant that leads to a page designed to check whether they are connected locall ...

phphtmldnsqr-codelocal

The art of positioning images and creatively cropping

Seeking advice on allowing users to dynamically position and clip an image on a webpage. I've tried using CSS and JavaScript for clipping and resizing, but it's not working as expected. If PHP could provide a solution, that would be ideal for my ...

phpjavascriptcssimage-manipulation

Stop tooltips from appearing on hyperlinks in Internet Explorer

Is there a solution to disabling the pesky tooltips that appear in the bottom left corner of IE when hovering over links? Alternatively, is there a method to customize the text that appears instead of the default tooltip when hovering over a link (I attem ...

htmlinternet-explorertooltip

Is there a possible method to obtain a smartphone number from a website?

Seeking a solution to retrieve the phone number of a device using HTML 5, JavaScript, or similar technology. Recently, I successfully obtained the coordinates of the device by incorporating the following JavaScript code: <!DOCTYPE html> <html> ...

javascriptandroidhtml

Tips for aligning a custom icon to the left in a Jquery mobile header

I have successfully implemented a custom icon in the header, but it is currently displaying in the center. How can I adjust it to be positioned on the left side instead? <div data-role="header" data-theme="a"> <h3> ...

jqueryhtmlcss

Personalize the hover effect and underline style of links in material-ui

I am currently delving into the world of material-ui custom styles and came across this helpful resource. However, I find myself a bit lost in how to properly override the classes using withStyles. <Breadcrumbs aria-label="breadcrumb" separator=" ...

cssreactjsmaterial-ui

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

javascripthtmlcssanimation

The NVD3 chart embedded in a React application generates HTML elements that persist on the page indefinitely without fading away

In my React application, I integrated an NVD3 scatter chart. However, I have encountered an issue with the tooltip not disappearing when hovering over the chart: https://i.stack.imgur.com/6lLok.png After moving the cursor away from the chart, the tooltip ...

javascripthtmlreactjsnvd3.js

Ways to update row background color based on specific column values

I need to customize the background color of my table rows based on the value in the "Category" column. For example: Name Category Subcategory A Paid B C Received D If the Category value is 'Paid', I want the ro ...

javascriptcssdatatable

Enable CDATA support in ActionView::Base.full_sanitizer

One method I found helpful was using the ActionView::Base.full_sanitizer.sanitize(value) to remove HTML content. It generally works well, but there is an issue when the value passed into the method is wrapped in because it returns a blank ...

htmlruby-on-railsrubycdata

Ways to align a button in the center using Material-UI

I'm struggling to find a way to center buttons in Material-UI. Here is the code snippet I currently have: function BigCard(props) { const { classes } = props; return ( <div> <Card className={classes.card}> <C ...

cssreactjsbuttonmaterial-uialignment

I encounter a black screen issue while attempting to rotate a three.js cube

How can I rotate a cube around all three axes (x, y, z) using the code snippet provided below? ` <html> <head> <title>CM20219 – Coursework 2 – WebGL</title> <meta charset="utf-8"> < ...

javascripthtmlthree.js

Opening a Material Dialog automatically scrolls the body to the top of the page

I'm currently using Material UI within a React application and I'm facing an issue where opening a dialog causes the body of my page to scroll to the top. This behavior also occurs when opening a Material Popover or a Material TextBox selector. D ...

cssreactjstwitter-bootstrapmaterial-ui

Displaying an image with a JavaScript variable is a common task in web

I have a Javascript code snippet below where the image name "samson decosta" is stored in a MySQL database. I am retrieving this image and trying to display it as a background_image in a div. document.getElementById("image_chk").style.backgroundImage="url ...

javascripthtmlmysqlcss

When the FLASK button is triggered, retrieve data from the FLASK and display it

This is a unique test where I will create a button to retrieve information from a MySQL database. However, it's important to first understand this concept. So here is my custom text within the Flask framework: @app.route('/pythonlogin/home', ...

pythonhtmlflaskpost

Adjust the CSS property dynamically based on the quantity of items within a div container

Can CSS3 be used to style the children divs of a parent div with specific conditions, such as: If there are 3 divs, apply property x to divs 1 and 2. If there are 2 divs, apply property x to div 1. If there is 1 div, do not apply property x to it. Is jQ ...

jqueryhtmlcss

What is the best way to send an HTML form variable to a Perl script using AJAX?

My goal is to pass the HTML variable from the list menu to the Perl script using POST. However, when I try to do this, the jQuery ajax() function executes the Perl script without including the value obtained from document.getElementById. Below is the sni ...

javascriptjqueryhtmlajaxperl

Select from multiple levels in a dropdown menu HTML

I have encountered an issue while developing a website. I am trying to create a hierarchical list with multiple levels, but it seems that such feature does not exist (unless you know otherwise). As a workaround, I have implemented a system using invisible ...

htmldrop-down-menu

How can I show a view page in a specific div element using CodeIgniter?

Here is how I'm implementing the dashboard view in my controller. My goal is to have a specific page, like the index page, displayed within a div element rather than opening in a new tab. public function index() { $this->load->view('in ...

javascriptphpcsshtmlcodeigniter

Is there a way for me to produce a random choice depending on the option selected by the user in the <select> menu?

As a beginner in JavaScript, I am attempting to create a feature where users can select a genre from a dropdown list and receive a random recommendation from that genre displayed on the screen. In essence, my goal is to allow users to get a random suggest ...

javascripthtmllistarraylist