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