Показать видео внутри области сетки Bootstrap 4 - PullRequest
Новая
       9

Показать видео внутри области сетки Bootstrap 4

1 голос
/ 12 января 2020

Я использовал Bootstrap 4 (4.4.1) для создания базовой c структуры сетки. Он состоит из двух столбцов (ширина каждого 50%), где левый столбец имеет две строки (высота каждого 50%). Верхняя левая область сетки должна содержать видео внутри , без сдавливания и сжатия. Остальные, которые переполняются, должны быть просто скрыты. Мне в основном удалось сделать все это, за исключением того, что видео охватывает весь левый столбец, хотя я хочу, чтобы оно было только в первом ряду столбца (который охватывает 50% высоты столбца).

Соответствующий HTML фрагмент: 

<div class="container-fluid d-flex h-100 flex-column">      
  <div class="row flex-grow-1">
    <div class="col">
      <div class="row h-50" id="video_wrapper" style="background-color: magenta;">
        <video id="video" autoplay muted></video>
      </div>
      <div class="row h-50" style="background-color: lime;">
        bottom left
      </div>
    </div>
    <div class="col" style="background-color: aqua;">
      <div>
        right side
      </div>
    </div>
  </div>
</div>

Соответствующий CSS: 

#video_wrapper {
    overflow: hidden;
}

#video {
    /* Make video to at least 100% wide and tall */
    min-width: 100%; 
    min-height: 100%;
    /* Prevent the browser from stretching or squishing the video */
    width: auto;
    height: auto;
    /* Horizontally flip the video */
    position: absolute;
    transform: scaleX(-1);
}

Я много чего пробовал, но ничего не получалось. У меня есть JSFiddle ниже. Он будет использовать вашу веб-камеру в качестве видео - выключите веб-камеру, чтобы увидеть структуру сетки, видео должно быть внутри розовой области. К сожалению, это также входит в зеленую зону, которая должна оставаться свободной. Такое поведение наблюдается при включении веб-камеры.

JSFiddle: https://jsfiddle.net/matzewolf/zxbtq569/3/

Любая помощь действительно приветствуется. Кстати, я новичок ie для веб-разработчика и Bootstrap, поэтому, пожалуйста, потерпите меня :)

1 Ответ

1 голос
/ 12 января 2020

Добавить position:relative к родительскому элементу видео (класс position-relative подойдет).

Объяснение: При использовании ... 

position: absolute;
/* top | bottom | left | right | width (%) | height (%) | 
   min-width (%) | max-width (%)... and there might be a few others */

... элемент имеет размер / положение относительно родительского элемента-ссылки, который является ближайшим родительским элементом (или <body>, если он не расположен ближе). Что означает ближайший родительский элемент с набором position, отличным от static (который является значением по умолчанию).

См. , работающий .

A хорошая статья о CSS позиционировании.

Обратите внимание, я также добавил классы d-flex justify-content-center align-items-center к родителю, что делает ваши абсолютно позиционированные элементы горизонтально и вертикально центрированными, реагируя.

...