Height and width of video for an interactive website

Question

I use the HTML5 video tag on a responsive website. I set the height and width to 100% and it works fine except for the mobile version where it destroys 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

On devices that do not support the video tag, you must display an image. The answer to this question is here. How can I display an image if the browser does not support the HTML5 <video> tag

Edit: Set the width and height in the CSS styles, not in the video tag. Set only the width to maintain the dimension, for example.

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

Answer 2

CSS3 transform translate(-50%, -50%), :

HTML

      <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

.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;
    }

. .