How to dynamically resize the background video to accommodate the content

I have video which acts as a background for a particular section and I want to display text content over it. I was able to achieve this, now the problem is on smaller screen the flex direction will be column due to which height of the content will increase in that case how can I increase the video height? No need to maintain an aspect ratio.

<div className="relative py-16">
  <video autoPlay loop muted playsInline>
    <source src="/back_video.mp4" type="video/mp4" />
  </video>
  <div className="absolute top-32 left-16 right-16 z-10">
      //faqs...
  </div>
</div>

I tried setting the video width and height to 100% and also object-fit:fill but none of them worked.

Solution

So you can use the object-fit css property to accomplish what you are looking for here. Documentation is here and there is a guide that uses it with background videos here. Since you did not provide a working example, I have created one for you. This snippet shows how you can adapt the video using object-fit: cover and object-fit: fill

Note that I had the snippet run inside of a container that was scaled to 0.25 of normal so that this could effectively simulate seeing the whole screen without actually requiring that. I also put a border around each example so you can see that it is indeed working properly.

I also did not use tailwind css because I was having trouble getting it to work with the stack overflow snippets, but I trust that you will be able to find the relevant tailwind class names to do this.

.ScaledContainer {
  transform-origin: top left;
  transform: scale(0.25);
  position: relative;
}

.Wrapper {
  width: 1000px;
  height: 1000px;
  border: solid red 10px;
  position: relative;
  margin: 50px;
}

.Wrapper.Wrapper--wide {
  width: 2000px;
  height: 1000px;
}

.Wrapper.Wrapper--tall {
  width: 1000px;
  height: 2000px;
}
.BackgroundVideo {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.BackgroundVideo--fill {
  object-fit: fill;
}

.BackgroundVideo--cover {
  object-fit: cover;
}

.Content {
  top: 32px;
  left: 16px;
  right: 16px;
  z-index: 10;
  font-size: 40px;
}

h1 {
  font-size: 40px;
}

<div class="ScaledContainer">
  <div class="Wrapper">

    <div class="Content">
      <h1> Using Fill </h1>
      <h1> a header </h1>
      <h1> a header </h1>
      <h1> a header </h1>
    </div>
    <video class="BackgroundVideo BackgroundVideo--fill" autoPlay loop muted playsInline>
        <source src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/blurry-trees.mov" type="video/mp4" />
      </video>
  </div>

  <div class="Wrapper">

    <div class="Content">
      <h1> Using Cover </h1>
      <h1> a header </h1>
      <h1> a header </h1>
      <h1> a header </h1>
    </div>
    <video class="BackgroundVideo BackgroundVideo--cover" autoPlay loop muted playsInline>
        <source src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/blurry-trees.mov" type="video/mp4" />
      </video>
  </div>

  <h1> Near the videos native resolution (this one is nearly 2:1) the two methods will look very similar </h1>

  <div class="Wrapper Wrapper--wide">

    <div class="Content">
      <h1> Using Fill </h1>
      <h1> a header </h1>
      <h1> a header </h1>
      <h1> a header </h1>
    </div>
    <video class="BackgroundVideo BackgroundVideo--fill" autoPlay loop muted playsInline>
        <source src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/blurry-trees.mov" type="video/mp4" />
      </video>
  </div>

  <div class="Wrapper Wrapper--wide">

    <div class="Content">
      <h1> Using Cover </h1>
      <h1> a header </h1>
      <h1> a header </h1>
      <h1> a header </h1>
    </div>
    <video class="BackgroundVideo BackgroundVideo--cover" autoPlay loop muted playsInline>
        <source src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/blurry-trees.mov" type="video/mp4" />
      </video>
  </div>
  
    <h1> The more you drift from the videos original resolution the weirder things will get: </h1>

  <div class="Wrapper Wrapper--tall">

    <div class="Content">
      <h1> Using Fill </h1>
      <h1> a header </h1>
      <h1> a header </h1>
      <h1> a header </h1>
    </div>
    <video class="BackgroundVideo BackgroundVideo--fill" autoPlay loop muted playsInline>
        <source src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/blurry-trees.mov" type="video/mp4" />
      </video>
  </div>

  <div class="Wrapper Wrapper--tall">

    <div class="Content">
      <h1> Using Cover </h1>
      <h1> a header </h1>
      <h1> a header </h1>
      <h1> a header </h1>
    </div>
    <video class="BackgroundVideo BackgroundVideo--cover" autoPlay loop muted playsInline>
        <source src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/blurry-trees.mov" type="video/mp4" />
      </video>
  </div>


</div>