Вграждане на отзивчиви видеоклипове лесно с 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 (сред много други). Този списък е все още нараства, така че очаквайте повече видео стрийминг услуги да бъдат добавени с течение на времето.

За да можете да работите с този инструмент, просто трябва изтеглете библиотеката и добавете го в заглавката на сайта си така:

Можете да изтеглите a напълно копие от репо GitHub, което включва и спецификации поддържани видео сайтове и текущата поддръжка на браузъра.

В по-голямата си част, SuperEmbed поддържа всички модерни браузъри от FireFox 3.5+, Chrome 4+ и версии на Internet Explorer 9 или по-нова версия.

Това е много впечатляваща библиотека, в която се разглежда цялата поддръжка на браузъра и колко добре работи направо от кутията. Това е много по-просто решение от тези за CSS, ако сте съгласни с JavaScript.

Можете да намерите повече информация в GitHub и можете да го видите живи бягане в тази цигулка.