как уменьшить HTML размер видео плеер в загрузчике

Я использовал самозагрузки, чтобы реагировать видео, но проблема в том, у меня есть только два размеракак уменьшить HTML размер видео плеер в загрузчике

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

источник

2015-01-24 Thamaraiselvam

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

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

.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 свойства непосредственно к элемент с класом s .embed-responsive, поскольку это нарушит его отзывчивость. Не нужно добавлять .embed-responsive-item, если вы не хотите, чтобы товар отличался от iframe, embed, object или video.

источник

2015-01-24 09:58:04 ckuijjer

но если я добавить, как вы сказали, реагирующий не работает – Thamaraiselvam

Вы также можете окружить его регулярную загрузочную сетку, используя, например, '.col-xs-6', или окружить его контейнером' div', который имеет процентную ширину. Какую реакцию вы точно ищете? – ckuijjer

см. Мой вопрос, я обновил фотографии dude – Thamaraiselvam

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

источник

2015-01-25 20:19:12

как уменьшить HTML размер видео плеер в загрузчике

ответ

Смежные вопросы