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

401

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, вот и все

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

299

javascript

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

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

265

javascript

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

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

343

PHP

Sleeping owl admin - AdminColumnFilter daterange

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

625