Почему video игнорирует размер контейнера родителя?

Question

Почему видео не подчиняется размерам контейнера родителя?

HTML

<div class="video">
  <video autoplay muted>
    <source src="img/deep.mp4">
  </video>
</div>

CSS

.video{
  width: 450px;
  height: 250px;
  margin: 20px auto;
}
video{
  width: 100%;
  height: 100%;
}

Answer 1

Не игнорирует, подчиняется:

.video{
  width: 450px;
  height: 250px;
  margin: 20px auto;
}
video{
  width: 100%;
  height: 100%;
}

<div class="video">
  
  <video autoplay muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
</div>

Можно еще управлять заполнение видео в блоке с помощью object-fit caniuse:

.video {
  width: 450px;
  height: 450px;
  margin: 20px auto;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="video">

  <video autoplay muted>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
      </video>
</div>

БЛОГ НА HUSL

Почему video игнорирует размер контейнера родителя?

Ответы (1 шт):