Łatwo osadzaj filmy responsywne za pomocą SuperEmbed.js

Nowoczesna sieć to w pełni responsywny i więcej projektantów realizuje to każdego dnia. Ale jest jedno nieznośne wyzwanie, jeśli chodzi o responsywny projekt: zawartość osadzona.

Każda witryna wideo z YouTube do Vimeo ma domyślny kod osadzenia ustalony na określony rozmiar. Oznacza to, że programiści muszą korzystać z innych rozwiązań tworzyć w pełni responsywne filmy.

Jednak zamiast używać klasy kontenerów CSS, możesz użyć SuperEmbed.js, darmowa biblioteka JavaScript dla tworzenie responsywnych filmów.

Ta wtyczka rozwiązuje dwa problemy od razu. Wszystkie osadzone filmy będą rozciągnij, aby wypełnić główny pojemnik, będąc jednocześnie wystarczająco elastycznym zmień rozmiar na podstawie okna przeglądarki.

Najlepsze jest to, że SuperEmbed.js nie wymaga dodatkowego kodu, więc możesz po prostu osadzić pliki i pozwól im uciekać. Ta biblioteka JS zajmuje się resztą kierowanie osadzonych elementów z niektórych witryn.

Wszystkie filmy zachować ich specyficzne proporcje, więc nie musisz się martwić o dziwaczne wymiary. A SuperEmbed działa jak biblioteka waniliowa JS z brak zależności takie jak jQuery.

W tej chwili SuperEmbed obsługuje ponad 15 osadzonych filmów z witryn takich jak YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me i Archive.org (wśród wielu innych). Ta lista jest ciągle rośnie, więc oczekuj więcej usług strumieniowania wideo, które będą dodawane z czasem.

Aby to narzędzie działało, wystarczy pobierz bibliotekę i dodaj go do nagłówka witryny w ten sposób:

Możesz pobrać a w pełni skopiować z repozytorium GitHub, które zawiera również specyfikacje obsługiwane witryny wideo i bieżąca obsługa przeglądarki.

W przeważającej części SuperEmbed obsługuje wszystkie nowoczesne przeglądarki z FireFox 3.5+, Chrome 4+ i wersji Internet Explorer 9 lub nowszej.

Jest to bardzo imponująca biblioteka, uwzględniająca wszystkie możliwości przeglądarki i jej skuteczność działa od razu po wyjęciu z pudełka. To znacznie prostsze rozwiązanie niż hacki CSS, jeśli możesz polegać na JavaScript.

Możesz znaleźć więcej informacji na GitHub i możesz to zobaczyć na żywo w tym skrzydle.