CODEWITHSUNDEEP
csshtmlvideo
user3150191
user3150191

Reputation: 415

HTML5 video tag width and height

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>

Upvotes: 10

Views: 33506

Answers (1)

Senju
Senju

Reputation: 1035

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>

Upvotes: 12

Related Questions