CODEWITHSUNDEEP
csshtml
zsx
zsx

Reputation: 111

How to set HTML5 video height and width in the same time?

This is the effect that I want to achieve:

enter image description here

But I tried code: 

video {height :100%; width: auto}
video {width: auto; height: 100%}

It's useless:

Image with auto-width:

enter image description here

Image with auto-height:

enter image description here

So how can I do that? Thanks!

Upvotes: 0

Views: 117

Answers (1)

feeela
feeela

Reputation: 29932

Have a look at the technique Twitter Bootstrap uses for embedding responsive media.

Basically they use a width of 100% and a vertical padding for the height. As a vertical padding is based on the width of an element (rather than the height) this will ensure that the aspect ratio is always the same, regardless of how wide the video container is. This works well with any media, where the aspect ratio is important.

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}

// Modifier class for 16:9 aspect ratio
.embed-responsive.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

// Modifier class for 4:3 aspect ratio
.embed-responsive.embed-responsive-4by3 {
    padding-bottom: 75%;
}

HTML

<div class="embed-responsive embed-responsive-16by9">
    <iframe src="https://www.youtube.com/embed/yv-Fk1PwVeU" />
</div>

Upvotes: 1

Related Questions