Clever Geek Handbook

HTML5 video element width and height

Everything, I have a video playing on my website and I want it to play width: 100%; height: 600px;

, but nothing I've tried so far works.

When I set height: 600px;

, the width of the video is proportional. I basically want to achieve the same effect as the background size: a cover with a height of 600px. I am using inline CSS and this part is subject to change, but I am more worried about how to achieve custom video height and width if possible. Thank.

ANY help is appreciated. Here is my code for<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>
+3


source to share


1 answer


One way to achieve this is to wrap the video in a div and specify the height 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 can be cropped from the bottom if its proportional height is greater than 600 pixels and that the more you stretch the window, the more the video will be muted.

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>
+7


source






More articles:


All Articles