Video height and width for responsive website - html

Question

I am using the video HTML5 tag on a responsive website. I set the height and width to 100% and it works fine except in the mobile version where it's destroying the layout.
URL: omob-2.myshopify.com
<div style="height: 100%; width: 100%;">
<video width="100%" height="100%" autoplay>
<source src="intro_12_07_14.mp4" type="video/mp4">
</video>
</div>
Any ideas?

Answer 1

You can use both the max-width property or object-fit property to achieve this. See references: Using the object-fit property and Using the max-width property with fill-available
/* Using fill-available on the max-width property */
/* A box you would like to place the video in*/
.wrapper {
width: 600px
height: 300px;
}
/* The video */
.wrapper_video > video {
width: 100%;
max-width: -webkit-fill-available;
max-width: fill-available;
}
/* The object-fit property defines how an element responds to the height
and width of its content box.*/
/* A box you would like to place the video in*/
.wrapper {
width: 600px
height: 300px;
}
/* The video */
.wrapper_video > video {
width: 100%;
height: 100%;
object-fit: cover;
}

Answer 2

On devices that don't support the video tag you would show a image instead. There is a answer for this here How can I display an image if browser does not support HTML5's <video> tag
Edit: set the width and height in the css styles instead of the video tag. Set the width only, so to keep dimensional proportion, like this.
video {
width: 100%;
height: auto !important;
}

Answer 3

Use the CSS3 transform translate(-50%, -50%) to make the video in the center of the page:
Html Code
<div class="video-container">
<video autoplay loop="true" width="1280" height="720">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
CSS Code
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
body {
background: #000;
color: #fff;
font-family: 'Oxygen', sans-serif;
}
See here the demo.