Как уменьшить или подогнать видео на мобильных устройствах в двух колонках начальной загрузки?

Question

У меня есть две колонки в Bootstrap 4, в одной колонке есть видео, а в другой - текст или другой тип контента:

#video-meta-content {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
  border: 3px solid grey;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div id="vidcontainer" class="col-sm-8">
      <video controls> 	
        <p>Your browser does not support video.</p>
     		<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4"> 
      </video>
    </div>
    <div class="col-sm-4 ">
      <div style="" class="row" id="vid-content-row">
        <div class="col-sm-12" id="video-meta-content">
          few paragraoh of text here
        </div>
      </div>
    </div>
  </div>
</div>

Размер видео 720 x 406. Он корректно отображается на настольном и альбомном планшетах, но на телефоне видео отображается в широкоэкранном формате 720px, часть которого скрыта из-за небольшого экрана. Некоторые столбцы содержимого также располагаются поверх видео вместо того, чтобы размещаться ниже столбца видео, если экран слишком мал для размещения обоих столбцов в одной строке.

Я бы хотел, чтобы видео уменьшилось до размера экрана.

Answer 1

Ключом к адаптации видео к доступной ширине является добавление следующих строк CSS:

video {
    max-width: 100%;
}

Это ограничит видео шириной контейнера, а высота будет автоматически изменяться для сохранения соотношения сторон. Видео никогда не будет больше, чем его фактический размер (1920px в приведенном ниже примере), поэтому, если ширина #vidcontainer меньше видео, видео будет ограничено этой шириной, если #vidcontainer больше, чем видео будет его обычный размер.

Это можно увидеть, поместив приведенный ниже фрагмент стека на полную страницу и изменив ширину окна браузера.

#video-meta-content {
  width: 100%;
  height: 500px;
  margin:0;
  padding:0;
  border: 3px solid grey;
}
video {
  max-width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div id="vidcontainer" class="col-sm-8">
      <video controls>    
        <p>Your browser does not support video.</p>
        <source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4">     
      </video>
    </div>
    <div class="col-sm-4 ">
      <div style="" class="row" id="vid-content-row">
        <div class="col-sm-12" id="video-meta-content">
          few paragraoh of text here
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Добавьте класс "col" в дополнение к "col-sm-8" и "col-sm-8". Например,

class="col col-sm-8"
class="col col-sm-4"

При использовании загрузчика «.col» автоматически обрабатывается макет.

Answer 3

Добавьте класс col-xs-4, col-xs-8, col-xs-12 в дополнение к существующим классам. col-xs- * для небольших устройств, таких как мобильные