Putting a responsive video on my web page

Question

Hello, I need to put a video on my site like this one: http://www.orionbranding.com/ All the examples I think are full width videos, q occupy the whole screen. The code I put below leaves the video as in picture 01 I would like the video to look like in the 02 low image Could somebody give me a hand???

<div class="box-video">
<video autoplay loop muted id="background">
    <source src="{{url('templates/web/images/background/clouds.mp4')}}" type="video/mp4">
</video>
<img src="{{url('templates/web/images/logo-white.png')}}">

video{
height: auto;
margin-top: -50px;
width: 100%;
z-index: -1;

}

Answer 1

Do you have any examples of the code you’ve already done to analyze? In general, we use percentages in CSS properties to ensure responsiveness, but it’s pretty dependent on how you structured your code

<style>
.container {
  width: 600px;
}

.container video {
  width: 100%;
}
</style> 
<div class="container">
    <video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
  </video> 
 </div>

Answer 2

See the example below if it meets your need. Video at the top and below the content of the site.

css style.

video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('seuthumbnail.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
.conteudo {
  width: 100%;
  position: absolute;
  top: 400px;
  left: 0;
  z-index: 100;
  background-color: white;
  min-height: 100%;
}

index.html

<video autoplay>
    <source src="KILL_THE_NOISE__KILLUMINATI_MIXTAPE.mp4" type="video/mp4">
    <source src="KILL_THE_NOISE__KILLUMINATI_MIXTAPE.mp4" type="video/ogg">
    Your browser does not support the video tag.
</video>

<div class="conteudo">
  Aqui vai o resto do seu site.
</div>