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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Однако вместо использования класса контейнера 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 и вы можете увидеть это в прямом эфире работает в эта скрипка,

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *