HTML5 video tag width and height

Question

All, I have some video playing on my website, and I want it to play width: 100%; height: 600px; but nothing I have tried has worked so far.

When I set the height: 600px; the width of the video is proportionate. I basically want to achieve the same effect as background-size: cover, with a height of 600px. I am using inline CSS, and that part can be changed, but I am more concerned with how to achieve a custom height and width of a video, if even possible. Thank you.

ANY help is highly appreciated. Here is my code for the <video>

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

Answer 1

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>