Видео должно касаться верхней и нижней части окна

Question

У меня есть фрагмент кода, который показывает видео в зеленом поле, предназначенное для веб-сайта, который я разрабатываю. Очевидно, что источник не будет работать, поэтому я просто заменил его на «xxxxxx».

Проблема в том, что под видео есть небольшое пространство, где поле слишком велико.

По какой-то причине коробка не совпадает с видео.

Стороны видео целенаправленно не касаются краев, но я хотел, чтобы нижняя и верхняя часть видео касались коробки.

Я уверен, что это не может быть слишком сложно, и, вероятно, я упустил нечто простое.

Если вам нужна дополнительная информация, просто спросите.

Спасибо, ребята.

<div style="background-color:#B9CFBB" align="middle">
      <video width="360" height="240" controls>
          <source src="xxxxxx">
          Your browser does not support the video tag.
      </video>
</div>

Answer 1

Вы должны дать видео display: block; стиль

video {
  /* video has a default display of inline */
  display: block;
}

<div style="background-color:#B9CFBB" align="middle">
      <video width="360" height="240" controls>
          <source src="xxxxxx">
          Your browser does not support the video tag.
      </video>
</div>

Это связано с тем, что встроенный элемент отображается в соответствии с окружающим текстовым содержимым.В этом случае он может быть пустым, но он имеет высоту строки: поскольку по умолчанию vertical-align из video равно baseline, спусковым механизмам также необходимо место.Вот откуда брешь.

Вы также можете изменить вертикальное выравнивание видео, как показано ниже (я добавил текст, чтобы продемонстрировать проблему.), Чтобы решить проблему.

div {
  text-align: center;
}
video {
  /* video has a default display of inline */
  display: inline;
}

#two video {
  /* video has a default vertical-align of baseline */
  vertical-align: text-top;
}
#three video {
  vertical-align: -3em;
}

<div id="one" style="background-color:#B9CFBB">
fghpq before <video width="360" height="240" controls>
           <source src="xxxxxx">
          Your browser does not support the video tag.
      </video> after fghpq 
</div>

<div id="two" style="background-color:#F9CFBB">
      fghpq before <video width="360" height="240" controls>
          <source src="xxxxxx">
          Your browser does not support the video tag.
      </video> after fghpq 
</div>

<div id="three" style="background-color:#B9CFFB">
      fghpq before <video width="360" height="240" controls>
          <source src="xxxxxx">
          Your browser does not support the video tag.
      </video> after fghpq 
</div>

Answer 2

Использовать дисплей: блок как стиль для элемента видео, это решит вашу проблему.

video {
   display:block;
}

Answer 3

Я думаю, что изменение высоты на 200px и добавление display: block будет работать. Как этот

<div style="background-color:#B9CFBB" align="middle">
<video controls style="width:360px;height:200px;display:block;" preload="metadata">
  <source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm#t=0" 
          type='video/webm;codecs="vp8, vorbis"' />
  <source src="devstories.mp4" 
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />

</video>
</div>