Background Video with 100% Width and Fixed Height

Background video with 100% width and fixed height

After understanding what you are trying to achieve...

You need to add a parent div to the video. Else it will maintain the aspect-ratio and you can't achieve what you want.

#video-bg {  position: relative;  width: auto;  min-width: 100%;  height: auto;  background: transparent url(video-bg.jpg) no-repeat;  background-size: cover;}video {  display: block;}.video-container {  width: 100%;  max-height: 600px;  overflow: hidden;  position: fixed;  top: 0;  right: 0;  z-index: -100;}

<!--[if lt IE 9]><script>document.createElement('video');</script><![endif]--><div class="video-container">  <video autoplay loop muted id="video-bg">
    <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4" />
  </video></div>

How to make video's width 100% or height 100%

You almost got it, you missed the sizing of the video tag. object-position could be also handy :

.remoteVideo {
  height:100%; /* or is max-height:100%; */
  width:100%;  /* or is max-width:100%;  */
  object-fit: contain;
  object-position:center;
  transform: scale(-1, 1);
}

Possible example to run in full page to test behavior on resize, or version based on max-height/max-width 100% https://codepen.io/gc-nomade/pen/bGNzzNj to shrink video if it becomes bigger than the screen .Up to you to choose value for height and width.

body {  margin: 0;}
.remoteVideo-container {  position: fixed;  left: 0;  top: 0;  z-index: 0;  width: 100vw;  height: 100vh;  text-align: center;  background-color: rgb(45, 48, 53);}
.remoteVideo {  height: 100%;  width: 100%;  object-fit: contain;  object-position: center;  transform: scale(-1, 1);}

<div class="remoteVideo-container">  <video class="remoteVideo" autoplay muted poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg">    <source  src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm" />    <source  src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4" />  </video></div>

Video 100% width and height

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();

Make HTML background video height small and width 100%

The default stylesheet for video elements is object-fit: contain; so it always keeps it's dimension ratio. So all you need to do is do "fill" instead to override that. Like this:

#video{
    position: fixed;
    max-height: 400px;
    min-width: 100%;
    object-fit: fill;
}

how can i do background video width 100% and height 100vh

You can create a <video> element and set the min-width and min-height attributes to 100%.

Example:

#video {  position: fixed;  right: 0;  bottom: 0;  min-width: 100%;   min-height: 100%;}

<video id="video">  <source src="myVideo.mp4" type="video/mp4"></video>

Place video with 100% height & 100% width using css or javascript

You may try:

header {    position: relative;    background-size: cover;    background-position: 50% 50%;    height: 100vh;    z-index: 0;}header h1 {    text-align: center;    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;    color: #fff}header video {    -webkit-transform: translateX(-50%) translateY(-50%);    -moz-transform: translateX(-50%) translateY(-50%);    -ms-transform: translateX(-50%) translateY(-50%);    -o-transform: translateX(-50%) translateY(-50%);    transform: translateX(-50%) translateY(-50%);    position: absolute;    top: 50%;    left: 50%;    min-width: 100%;    min-height: 100%;    width: auto;    height: auto;    z-index: -100;}

<header>    <h1>Sample Title</h1> <video autoplay loop class="bg-video">  <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4"> </video></header>

How to make background video always fit the page

Try leveraging object-fit: cover

The replaced content is sized to maintain its aspect ratio while
filling the element’s entire content box. If the object's aspect ratio
does not match the aspect ratio of its box, then the object will be
clipped to fit.

body {  margin: 0;  padding: 0;  color: white;}
main {  display: flex;  flex-direction: column;  background-color: rgba(0, 0, 0, 0.3);}
.video-background {  position: fixed;  width: 100vw;  height: 100vh;  z-index: -1;}
.video-background video {  width: 100%;  height: 100%;  object-fit: cover;}

<div>  <div class="video-background">    <video class="liveflex" autoplay loop>    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">   </video>  </div>  <main>    <article>      <h1>Hello World!</h1>      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam efficitur nisl non cursus tincidunt. Morbi tellus ex, placerat eu pharetra at, tristique et felis. Cras quis turpis porta, viverra risus sit amet, eleifend elit. Aenean placerat venenatis        elit, sed molestie lacus elementum et. Phasellus nisl mauris, cursus eu sodales sed, volutpat et magna. Sed enim nulla, semper aliquam mauris rhoncus, hendrerit ornare dolor. Proin diam ante, tempor in egestas quis, sodales viverra ligula. Aenean        massa eros, semper sit amet mattis vitae, ultrices sit amet nunc. Suspendisse ultricies mattis elit ut pretium. Aenean euismod commodo augue, quis cursus mi ullamcorper sed. Pellentesque habitant morbi tristique senectus et netus et malesuada        fames ac turpis egestas.</p>    </article>    <article>      <h1>Foo Bar!</h1>      <p>Morbi suscipit pretium enim, vel sollicitudin ex varius et. Nullam consequat vitae lectus ut facilisis. Suspendisse tincidunt consectetur nisi vitae ultricies. Etiam non pellentesque odio. Ut hendrerit tincidunt pretium. Curabitur nec imperdiet        sapien. Nullam sed sem massa. Nullam dapibus ut libero nec tempus. Phasellus gravida, risus quis congue viverra, massa augue scelerisque libero, molestie pharetra elit mi sit amet nisl. Fusce ac gravida velit.</p>    </article>  </main></div>

---

Related Topics