Video height and width for responsive website

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?

You could consider using Vimeo video,, its supported by practically everything! — Zze, Jan 29 '15 at 00:30
The video tag is supported by the browser. The video plays. That's not the problem. The video tag, for some reason, is destroying the layout. — flasshy, Jan 29 '15 at 00:32

score 2 · Answer 1 · answered Jul 17 '21 at 21:44

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

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

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

edited May 23 '17 at 12:24

Community

1
1

answered Jan 29 '15 at 00:23

ART GALLERY

540
2
8

This browser supports the video tag. It plays the video. It's just that it's breaking my layout, which was perfectly fine before the video tag. All I did was set its height and width to 100%, which I would have thought would have set it to 100% within the existing layout. – flasshy Jan 29 '15 at 00:31
Does it always keep proportion? Meaning, if I set 100% height and 100% width, it won't fill the height and width of the container? – flasshy Jan 29 '15 at 01:26
So far as I know, it will stretch the video if you set a height, unless a top-level element sets a proper height to contain it, making the 100% height to not expand any further. It's easier to just use width only and let the browser do the rest. – ART GALLERY Jan 29 '15 at 01:33
better to set height to auto. height: auto !important; – ART GALLERY Jan 29 '15 at 01:36
I can't get it to fill the whole height and width. – flasshy Jan 29 '15 at 01:44
If I use "height: auto !important;" then it is larger than the whole screen. What...the...heck. – flasshy Jan 29 '15 at 01:49
Most likely you need to fix your parent element styles, that contains the video. http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php – ART GALLERY Jan 29 '15 at 02:21
It looks like video always keeps the original perspective. – flasshy Jan 29 '15 at 02:30
I meant to say aspect ratio, I used the wrong wording. – ART GALLERY Jan 29 '15 at 02:39

score 0 · Answer 3 · answered Jan 23 '17 at 16:41

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.

Video height and width for responsive website

3 Answers3

Html Code

CSS Code

Linked