» »

Автоматическое масштабирование размеров видео


Вернусь ещё раз к теме адаптивности видео на сайте, заметил многие до сих пор ищут методы автоматического масштабирования встраиваемого видео контента. Предлагаю один из проверенных способов с помощью этого скрипта. Есть одно но, минимальное количество поддерживаемых сервис, а именно: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter.

Как использовать:

На Ucoz уже подключена библиотека jQuery, поэтому добавляем только сам плагин FitVids.js в шаблон страницы.
Код

<script src="путь/до/jquery.fitvids.js"></script>


Затем запускаем плагин для контейнера с видео с помощью функции fitVids().
Код

<script>
  $(document).ready(function(){
  // Укажите ваш контейнер с видео
  $("#контейнер_с_видео").fitVids();
  });
</script>


Если сложновато понять, то вот пример попроще, перед /body:
Код

<script src="/jquery.fitvids.js"></script>
<script> 
$(document).ready(function(){
$("#container").fitVids();
});
</script>


Участок контента в котором видео, накрываем:
Код

<div id="container">Тут код видео плеера или Iframe или же сразу весь $MESSAGE$</div>


Источник и исходники ССЫЛКА, но всё равно добавлю архив уже скачанный мной.
04.09.2016 Загрузок: 5 Просмотров: 421 Комментарий: (17)

Поделиться в социальных сетях

Материал разместил

Комментарий: 17
Kosten
Kosten 04.09.2016 15:421
0
Angerfist, это что то из того, что автоматически становился плеер по размером или что то путаю.
Сопрано
Сопрано 04.09.2016 16:392
0
Не чего не понял, но вижу в первые такое, и по ходу все работает.
Angerfist
Angerfist 04.09.2016 17:123
0
Я заметил что в материалах мало того что код не смотрят но и описание никто не читает biggrin
Kosten
Kosten 04.09.2016 18:274
0
Тут просто по изображению все оценивают, если плеер, значит связано с кино онлайн, но этот материал думаю очень многим пригодиться.
FeStemBer
FeStemBer 04.09.2016 18:515
0
А разве плеер сразу не идет адаптирован, мне кажется если смотреть по браузеру так и есть.
virus_990
virus_990 04.09.2016 20:346
0
код бред полный. не нужный js хлам!... Можно проще все писать увы пару строк кода...
FeStemBer
FeStemBer 04.09.2016 20:427
0
Но написать я также могу, а чтоб подсказать, а зачем, парировать так как школьник, но это граница.)
Angerfist
Angerfist 04.09.2016 20:478
0
Отписался чел с ником вирус))) Код в студию без хлама!, только не CSS, как на стилях мы знаем)
Сопрано
Сопрано 04.09.2016 20:489
0
А кто то разве ставил, но нужно поставить и потом говорить, а так чистая провокация. Просто от Angerfist всегда идет качественный контент, и не думаю что он не проверял.
Angerfist
Angerfist 04.09.2016 20:4910
0
Дело не в этом, скрипт не мой...там есть лишка согласен, но раз парировал я бы глянул на пару строк)
Kosten
Kosten 04.09.2016 21:0411
0
Прежде чем парировать, нужно держать не битую карту, если она есть, значит человек написал правильно, если ее нет, это простой треп и больше не как не могу назвать, но время все расставит на свои места.
Сафрон
Сафрон 04.09.2016 22:2012
0
Но если есть косяки и автор знает, но почему бы не исправить. А то где то будет немного не так, сами то не как не исправят, нужно идти насрать извиняюсь, и вот думают из за этого у них все исправится, что парировать, вы сами видите его пост.
Angerfist
Angerfist 04.09.2016 22:5113
0
Какие косяки? Где косяки??? Где я про косяки сказал? Скрипт рабочий и не вижу смысла его укорачивать, он не несёт нагрузки на сайт раз, весит всего 4кб.
Angerfist
Angerfist 04.09.2016 22:5414
0
Короче проехали...
Kosten
Kosten 04.09.2016 22:5715
0
Не понимаю людей, которые просто напишут, и что предъявить, извините, не по этой части, мне только нужно написать и свалить.
workman
workman 13.09.2016 09:0516
0
Код
<style>iframe,object{max-width: 100%;border: 0;margin: 0;}</style>

Пример
Angerfist
Angerfist 13.09.2016 12:4317
0
Как на стилях в курсе, основываясь на приципе гибкого дива, помню как до этого тупил с фреймами прописывая height: auto и забывая про правило margin нулевого отступа, также есть ещё варианты на стилях, я уже показывал их на сайте. А скрипт до кучи был как ещё один вариант, но у него огромный плюс, масштабирование под контент видео, независимо какие размеры фрейма. А эти стили будут лишь гнать от максимального размера адаптацию под ширину.
avatar