Html 5 video how to make a video for the whole block?

Question

css

Good afternoon!

I need to make html 5 video for the entire block (whatever without black indents at the top / bottom or on the sides). 100% width and height of the player itself does not help, i.e. videos of different formats, the player itself stretches, but the video has black stripes either from the top / bottom or on the sides.

How to solve my issue?

Answer 1

<div class="b-video">
  <video class="viedeo__file"preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/slide.png" id="video">
        <source src="http://site.ru/video/1.mp4" type="video/mp4" id="source-video">
    </video>
</div>


<style>
  .b-video {
      width: 100%;
      min-height: 600px;
      height: 100vh;
      position: relative;
      overflow: hidden;
      z-index: 1;
}
.viedeo__file{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>