Bootstrap Col-хз-12 больше, чем ширина устройства

Question

Вот мой код:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12" align="center"> 
      <video autoplay muted> 
       <source src="localVideoLink.mp4" type="video/mp4"> 
      </video> 
     </div> 
    </div> 
</div> 

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

Answer 1

Вы можете попробовать использовать

ширина: 100%;

для видео тегов в ваших стилях.

Answer 2

здесь класс решение: встроить реагирующих-элемент

.row { 
 
background: red; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12" > 
 
      <div align="center" class="embed-responsive embed-responsive-16by9"> 
 
       <video autoplay loop class="embed-responsive-item"> 
 
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
 
       </video> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

Воспользоваться embed-responsive

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 embed-responsive" align="center"> 
 
     <video class="embed-responsive-item" autoplay muted> 
 
       <source src="localVideoLink.mp4" type="video/mp4"> 
 
      </video> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

вы данные Col-хз-12 будет работать для решения рабочих столов, только если вы хотите, чтобы видео быть отзывчивым вы должны дать для разрешений устройств, пусть

Col-XS-12

Col-Л.Г. -12

Col-мкр-12

для каждого разрешения экрана есть некоторые заранее определенные размеры, так что использовать

Bootstrap col--