как уменьшить размер видеоплеера html в bootstrap

я использовал bootstrap для адаптивного видео, но проблема в том, что у меня есть только 2 размера 

class="embed-responsive embed-responsive-16by9"

и

class="embed-responsive embed-responsive-4by3"

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

style="width:400px ; height:400px"

видео повторно размера, но реагировать не получается. пожалуйста, помогите мне .

Это мой код

  <div align="center"  class="embed-responsive embed-responsive-16by9" style="width:400px;height:400px">

<video   class="embed-responsive-item"  controls>
  <source src="<?php echo str_replace("../../../../","",$subvalue->video);?>" type="video/mp4">
 </video>
</div>

мне нужно вот так

enter image description here

но после добавления стиль ширина и высота я получаю, как это

enter image description here

9
css html html5 twitter-bootstrap twitter-bootstrap-3

2 ответов

на Адаптивный Embed классы устанавливают только соотношение сторон (используйте .embed-responsive-16by9 для видео 16x9 и .embed-responsive-4by3 для 4x3 один). Они будут занимать 100% ширины содержащего их блока.

чтобы дать им ширину, вам нужно будет только добавить контейнер, например .sizer, то есть width set.

.sizer {
  width: 300px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="sizer">
  <div class="embed-responsive embed-responsive-16by9">
    <video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay controls></video>
  </div>
</div>

другой вариант-добавить его в Bootstrap сетки, как это

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="embed-responsive embed-responsive-16by9">
        <video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay controls></video>
      </div>
    </div>
  </div>
</div>

никогда не пытайтесь добавить width и height свойства непосредственно к элементу с классом .embed-responsive как это сломает его отзывчивость. Не нужно добавлять .embed-responsive-item если вы не хотите элемент, отличный от iframe, embed, object или video.

13

Go grab fitvids js и до тех пор, как вы начинаете с ширины и высоты размеров fitvids сделает это видео отзывчивым:http://fitvidsjs.com

1