Html5 Video Dimensions

HTML5 Video Dimensions

<video id="foo" src="foo.mp4"></video>

var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video

Spec: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

Get width and height of HTML5 Video using native JavaScript

This code will give you the dimensions of the video tag (not the dimensions of the video itself)

var video = document.getElementById("video");
var videotag_width = video.offsetWidth;
var videotag_height = video.offsetHeight;

This code will give you the dimensions of the video that is currently playing

var video = document.getElementById("video");
var video_height = video.videoHeight;
var video_width = video.videoWidth;

HTML5 video tag width and height

One way to accomplish this is to wrap the video in a div and give that the height of 600px and overflow: hidden.

For example:

<div style="width: 100%; height: 600px; overflow: hidden;">
    <video loop="loop" poster="img/waves1.jpg" style="width: 100%;" autoplay="autoplay">
            <source src="video/sunset.webm" type="video/webm">
            <source src="video/sunset.mp4" type="video/mp4">
    </video>
</div>

Note that the video may be cut off towards the bottom if its proportionate height is greater than 600px and that the more you stretch the window, the more the video will be cut off.

Here is a jsFiddle using this code:

<div style="width: 100%; height:200px; overflow: hidden;">
    <video loop="loop" style="width: 100%;" autoplay="autoplay">
        <source src="http://opcdn.battle.net/static/hearthstone/videos/home-header-bg.webm" type="video/webm"/>
    </video>
</div>

Set HTML5 video size?

#vidstrip {
    position:relative;
    padding-top: 0;
    margin-top: 250px;
    overflow: hidden;
}
.vidstrip-text {
    line-height: 2.1em;
    padding: 1em 4em;
    color: white;
}
.vidstrip-section {
    position:absolute;
    top:0;
    left:0;
    padding: 0;
    z-index:-1;
}
.vidstrip-section, #bgvid {
    width:100%;
    height:auto;
}

I tried to emulate Paypal

Hope this helps

http://jsfiddle.net/nr2tds1f/

HTML5 video fit width OR height

Solved it myself with a javascript function:

window.addEventListener('resize', resize, false);

video.height = 100; /* to get an initial width to work with*/
resize();

function resize() {
videoRatio = video.height / video.width;
windowRatio = window.innerHeight / window.innerWidth; /* browser size */

    if (windowRatio < videoRatio) {
        if (window.innerHeight > 50) { /* smallest video height */
                video.height = window.innerHeight;
        } else {
            video.height = 50;
    }
    } else {
        video.width = window.innerWidth;
    }

};

Get Width and Height of HTML5 Video using JavaScript?

Edit: improved solution after I have actually read the crossbrowser issue.

The solution below should work on both Chrome and Firefox. The issue is that Firefox treats readyState differently than Chrome.

var vid2 = document.getElementById("video");
vid2.addEventListener("loadedmetadata", getmetadata);

if (vid2.readyState >= 2) {
    getmetadata(vid2);
}

function getmetadata(){
    document.getElementById('output2').innerHTML = "Test 2: " + vid2.videoWidth;
}

Updated JSFiddle

HTML5 video player frame width issue

In order to have all videos be the same size, you will need to either stretch the video (typically bad, don't do this) or add bars to the top/bottom or sides to show the original video dimensions. With html5 video, all you need to do to achieve this is apply a width and height to the video tag.

<style type="text/css">
video{width: 500px;height:300px;position:relative;margin-top:-20px;}
video:hover{cursor:pointer}
</style>

Try this in your source file, it will cause all your videos to be the same size, and will simply add bars to the files to make them all take up the same space (note how it adds to the top/bottom on one, and the sides on the other).

Even youtube does this if you video file is of a different aspect ratio (you'll notice black bars on those youtube videos, ex: https://www.youtube.com/watch?v=2Or1Ui7yM7Q this video was shot on a square monitor, and is not widescreen aspect).

---

Related Topics