Video 100 width and height

Question

I have a video  and I want it to FILL 100  of the width  and 100  of the height  And keep the aspect ratio   Is it possible that it at least fills 100  for both  And if a bit of the video has to be out of the screen to keep the aspect ratio  that doesn t matter   HTML        lt video preload  auto  class  videot  id  videot  height  100   preload gt       lt source src  BESTANDEN video tible mp4  type  video mp4   gt       lt object data  BESTANDEN video tible mp4  height  1080  gt           lt param name  wmode  value  transparent  gt           lt param name  autoplay  value  false   gt           lt param name  loop  value  false   gt       lt  object gt    CSS     videof   videot       width  100      important      height  100     important

User · Answer

I use JavaScript and CSS to accomplish this. The JS function needs to be called once on init and on window resize. Just tested in Chrome.

HTML:

<video width="1920" height="1080" controls>
    <source src="./assets/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

JavaScript:

function scaleVideo() {
    var vid = document.getElementsByTagName('video')[0];
    var w = window.innerWidth;
    var h = window.innerHeight;

    if (w/16 >= h/9) {
        vid.setAttribute('width', w);
        vid.setAttribute('height', 'auto');
    } else {
        vid.setAttribute('width', 'auto');
        vid.setAttribute('height', h);
    }
}

CSS:

video {
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

User · Answer

Easiest  amp  Responsive   lt video src  quot full mp4 quot  autoplay muted loop gt  lt  video gt    lt style gt      video           height  100vh          width  100           object-fit  fill     use  quot cover quot  to avoid distortion         position  absolute         lt  style gt

User · Answer

We tried with the below code  amp  it works on Samsung TV  Chrome  IE11  Safari      lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Video lt  title gt       lt meta charset  utf-8    gt       lt style type  text css   gt           html body             height  100             text-align  center            margin  0            padding 0                     video               width  100vw    100  of horizontal viewport               height 100vh    100  of vertical viewport                   lt  style gt   lt  head gt   lt body gt           lt video preload  auto  class  videot  id  videot  preload gt               lt source src  BESTANDEN video tible mp4  type  video mp4   gt               lt object data  BESTANDEN video tible mp4  height  1080  gt                   lt param name  wmode  value  transparent  gt                   lt param name  autoplay  value  false   gt                   lt param name  loop  value  false   gt               lt  object gt           lt  video gt   lt  body gt   lt  html gt

User · Answer

By checking other answers  I used object-fit in CSS   video       object-fit  fill      From MDN  https   developer mozilla org en-US docs Web CSS object-fit    The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width   Value  fill  The replaced content is sized to fill the element   s content box  the object   s concrete object size is the element   s used width and height

User · Answer

Put the video inside a parent div  and set all to 100  width  amp  height with fill of cover  This will ensure the video isn t distorted and ALWAYS fills the div entirely    video-wrapper       width  100       height  100       video-wrapper video       object-fit  cover      width  100       height  100

User · Answer

video     width  100      important    height  auto    important      Take a look here http   css-tricks com NetMag FluidWidthVideo Article-FluidWidthVideo php

User · Answer

This works for me for video in a div container    x000D   x000D   videoContainer  x000D    x000D      position absolute  x000D      height 100   x000D      width 100   x000D      overflow  hidden  x000D    x000D   x000D   videoContainer video  x000D    x000D      min-width  100   x000D      min-height  100   x000D    x000D   x000D   x000D    Reference  http   www codesynthesis co uk tutorials html-5-full-screen-and-responsive-videos

User · Answer

x000D   x000D   lt style gt  x000D       video position absolute top 0 left 0 height 100  width 100  object-fit cover  x000D      x000D   lt  style gt  x000D   lt video class   video   x000D    disableremoteplayback    x000D    mqn-lazyimage-video-no-play    x000D    mqn-video-css-triggers     amp quot fire once amp quot   true   amp quot classes amp quot     amp quot  mqn2-ciu amp quot     amp quot from amp quot   1   amp quot class amp quot    amp quot mqn2-grid-1--hero-intro-video-meta-visible amp quot     x000D    mqn-video-inview-no-reset    mqn-video-inview-play    muted    playsinline    autoplay gt  x000D   x000D   lt source src  https   github com Slender1808 Web-Adobe-XD raw master Home 0013-0140 mp4  type  video mp4  gt  x000D   x000D   lt  video gt  x000D   x000D   x000D

User · Answer

You can use Javascript to dynamically set the height to 100  of the window and then center it using a negative left margin based on the ratio of video width to window width    http   jsfiddle net RfV5C   var  video       video         window     window       window  resize function        var height    window height         video css  height   height        var videoWidth    video width            windowWidth    window width        marginLeftAdjust      windowWidth - videoWidth    2        video css            height   height            marginLeft    marginLeftAdjust            resize

User · Answer

This is a great way to make the video fit a banner  you might need to tweak this a little for full screen but should be ok  100  CSS    x000D   x000D      position  absolute  x000D      top  50   x000D      left  50   x000D      z-index  1  x000D      min-width  100   x000D      min-height  100   x000D      width  auto  x000D      height  auto  x000D      transform  translate -50   -50    x000D   x000D   x000D

User · Answer

use this css for height  height  calc 100vh   important    This will make the video to have 100  vertical height available

User · Answer

I am new into all of this  Maybe you can just add change this HTML code  Without need for CSS  It worked for me     width  100   height  height

User · Answer

If you re looking for the equivalent to background-size  cover for video   video     object-fit  cover      This will fill the container without distorting the video     PS  I m extending on Leo Yu s answer here

[html] Video 100% width and height

Examples related to html

Examples related to css

Examples related to html5-video

Examples related to fullscreen