Адаптивная ширина видео

318
17 августа 2017, 23:59

Сайт на bootstrap, на сайте много видео с разной шириной, при просмотре на мобильных вылазит за границу экрана, ставлю width:100%, на мобильном ОК, а на ПК все видео на всю ширину div. Как сделать что бы ширина каждого видео не превышала его исходной ширины?

.text_content_res{margin-top:5px;} 
video{display:inline-block;margin: auto;}
<div class="row text_content_res "> 
  <video class="" id='gifid' onclick='playPause(this.id)' loop> 
    <source src='https://test.reseto.com/gifs/3e0d796625761fb1967746649011d2ce.mp4' type='video/mp4'> 
  </video> 
  <div class="play_button" id='gifidpause' onclick='playPause("gifid")'></div> 
</div>

Answer 1

.text_content_res{ 
  margin: 5px; 
  position: relative; 
  width: 100%; 
 } 
video{ 
 display:inline-block; 
 margin: 0 auto; 
 max-width: 500px; 
 width: 100%; 
 position: relative; 
}
<div class="row text_content_res "> 
  <video class="" id='gifid' onclick='playPause(this.id)' loop> 
    <source src='https://test.reseto.com/gifs/3e0d796625761fb1967746649011d2ce.mp4' type='video/mp4'> 
  </video> 
  <div class="play_button" id='gifidpause' onclick='playPause("gifid")'></div> 
</div>

Позиционирование нужно не забывать, и ширина в процентах + max-width, вот и все

READ ALSO
Как вытащить( ссылку )точнее селектор из location.href средствами рhpQuery?
javascript

Как вытащить( ссылку )точнее селектор из location.href средствами рhpQuery?

Как вытащить ссылку, а точнее селектор из locationhref средствами рhpQuery?

 234
Как сделать так чтобы сайдбар был открытым при клике?
javascript

Как сделать так чтобы сайдбар был открытым при клике?

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

 211
Почему не подставляется значение в value?
javascript

Почему не подставляется значение в value?

В общем этот код работает лишь в Firefox 54, во всех остальных браузер не работаетВ чем может быть проблема?

 292
Sleeping owl admin - AdminColumnFilter daterange
PHP

Sleeping owl admin - AdminColumnFilter daterange

Как правильно в Sleeping Owl admin в Datatables сделать фильтр по диапазону значений даты? Хотелось бы увидеть пример - я предполагаю, что у меня может быть...

 573