Блог

Здесь у меня есть фрагмент кода, который показывает видео в зеленом поле, предназначенное для веб-сайта, который я разрабатываю. Источник, очевидно, не будет работать, поэтому я просто заменил его на ‘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>  

Вы должны придать видео 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 of 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>  

Я думаю, что изменение высоты на 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>  

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

 video {
   display:block;
}