Показать Меню
falbar Fitvids плагин

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

Fitvids плагин

Сегодня мы рассмотрим jQuery плагин, который позволяет адаптировать ширину видео по элементу. Видео контент довольно привередлив к HTML структуре документа, что вызывает некоторые трудности у разработчиков, да и предоставлять его пользователю необходимо гибко, иначе ресурс не будет пользоваться популярностью. Конечно, можно воспользоваться вставкой видео из youtobe, но это не всегда удобно, да и не любой ролик туда можно залить. Адаптировать ширину видео под заданный элемент крайне важно.

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

Для того чтобы начать работать с Fitvids подключаем jQuery библиотеку и скрипт:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.fitvids.js" type="text/javascript"></script>

Осталось вызвать плагин:

$(".container").fitVids();

Применяется он, как было уже выше указано к элементу, в котором находится видео. Если в нем больше одного видео и Вам не нужно, чтобы плагин воздействовал на их все, то Вам стоит указать класс fitvidsignore игнорируемому. Данный класс можно изменить, воспользовавшись свойством ignore:

$("#container").fitVids({
	ignore: ".mycooldiv, #myviiid"
});

Если у Вас нестандартный видеоплеер или плеер старой версии, то Вы можете его указать вручную в настройках Fitvids:

$(".container").fitVids({
	customSelector: "iframe[src^='http://socialcam.com']"
});

В настоящее время плагин поддерживает работу с YouTube, Vimeo, Blip.tv, Viddler и Kickstarter. Узнать об изменениях в его работе можно на этом сайте fitvidsjs.com.

Вот так просто можно адаптировать ширину видео под любые размеры элементов.

Источник
fitvidsjs.com

Подписаться на обновления

Комментариев еще не оставлено