Легко встраивайте отзывчивые видео с SuperEmbed.js

Современная сеть полностью отзывчивый и все больше дизайнеров осознают это каждый день. Но есть одна неприятная проблема, когда речь идет о адаптивном дизайне: встроенный контент.

Каждый видео-сайт от YouTube до Vimeo имеет код для встраивания по умолчанию фиксированный до определенного размера. Это означает, что разработчики должны использовать другие решения для создавать полностью адаптивные видео.

Однако вместо использования класса контейнера CSS вы можете использовать SuperEmbed.js, бесплатная библиотека JavaScript для создание адаптивных видео.

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

Самое приятное, что SuperEmbed.js не требует дополнительного кода, так что вы можете просто вставлять файлы а также пусть бегут. Эта библиотека JS позаботится обо всем остальном нацеливание встроенных элементов с определенных сайтов.

Все видео поддерживать свои конкретные пропорции, так что вам не нужно беспокоиться о шатких измерениях. И SuperEmbed работает как Ванильная библиотека JS с нет зависимостей такие как jQuery.

Прямо сейчас, SuperEmbed поддерживает более 15 видео с таких сайтов, как YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me и Archive.org (среди многих других). Этот список еще растет, так что ожидайте, что со временем будет добавлено больше услуг потокового видео.

Чтобы этот инструмент работал, вам просто нужно скачать библиотеку а также добавьте его в шапку вашего сайта вот так:

Вы можете скачать полностью скопировать из репозитория GitHub, который также включает в себя спецификации для поддерживаемые видео сайты а также текущая поддержка браузера.

По большей части, SuperEmbed поддерживает все современные браузеры от FireFox 3.5+, Chrome 4+ и версий Internet Explorer 9 или выше.

Это очень впечатляющая библиотека, учитывая всю поддержку браузера и насколько она хороша работает прямо из коробки. Это гораздо более простое решение, чем CSS-хаки, если вы можете положиться на JavaScript.

Ты можешь найти Дополнительная информация на GitHub и вы можете увидеть это живой бег в этой скрипке.