Блог

Я пытаюсь выбрать между использованием Bootstrap и Foundation для фронтальной работы для node.js экспресс-маршрут. Мне было интересно, есть ли у Bootstrap какой-либо способ иметь эквивалентную функцию Flex Video в Foundation (насколько я могу судить, это автоматическое изменение размера в зависимости от размера экрана)?

Редактировать: Что касается ответа Питера Вустера, если есть решение, которое можно легко выполнить без фреймворка, почему тогда люди придают такое большое значение Flex-Video?

Bootstrap имеет адаптивные встраивания: http://getbootstrap.com/components/#responsive-embed

Бесплатный пример исключительно для того, чтобы избежать глупых раздражающих бюрократов SO от жалоб на «ответ только для ссылок»:

 <!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>
 

Вам не нужен фреймворк для создания адаптивного видео, поэтому вы можете добавить его, если его нет в комплекте.

Хитрость заключается в том, чтобы обернуть видео в div с width:100%; height:0; padding-bottom:66% любым соотношением сторон, которое вы хотите, чтобы видео имело. Установите ширину и высоту видео на 100%. Этот div будет правильно масштабироваться и сохранять свое соотношение сторон, и видео заполнит его.

Редактировать: этот трюк не нов, просто не очень хорошо известен, вот статья 2009 года, описывающая его: http://alistapart.com/article/creating-intrinsic-ratios-for-video . К счастью, клуджи IE5-6 больше не нужны.