HTML - Can't resize video properly

Question

I'm trying to do pretty simple thing: resize video to 100% of screen width and 100% of screen height. However, when I set width to 100%, height seems to be automatically adjusted.

Here is my HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/index.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="screen_container">
            <video autoplay="autoplay" class="cover_vid" loop>
                <source src="videos/boats.mp4" type="video/mp4" />
            </video>
            <input type="button" id="back_abt" class="gen_design" value="Leave">
        </div>
        <script src="scripts/specific1.js"></script>
    </body>
</html>

CSS:

#screen_container
{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

.cover_vid
{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

I'm trying to avoid using JavaScript if possible. I even tried passing screen resolution from PHP to width and height attribute of video element, but result was the same. Video seems to do whatever it wants.

You may want to check [this question](http://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site). — Desaroll, Dec 23 '15 at 12:50

score 1 · Answer 1 · answered Dec 23 '15 at 13:38

My understanding is that video will maintain aspect ratio. You specify the width and set the height to auto.

An exception would be iframe elements. Here you should specify width and height (or it will use a default height of 150px)

Try this link for some additional information: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

HTML - Can't resize video properly

1 Answers1