Încărcați videoclipuri responsabile cu ușurință cu SuperEmbed.js

Web-ul modern este pe deplin receptiv și mai mulți designeri realizează acest lucru în fiecare zi. Dar există o provocare dificilă atunci când vine vorba de design receptiv: conținut încorporat.

Fiecare site video de pe YouTube la Vimeo are un codul implicit de încorporare fixat la o anumită dimensiune. Aceasta înseamnă că dezvoltatorii trebuie să folosească alte soluții creați videoclipuri pe deplin receptive.

Cu toate acestea, în loc să utilizați o clasă de contacte CSS, puteți utiliza SuperEmbed.js, o bibliotecă gratuită JavaScript pentru crearea de videoclipuri receptive.

Acest plugin rezolvă două probleme o dată. Toate videoclipurile încorporate vor se întinde pentru a umple containerul principal, în timp ce este suficient de flexibil pentru a redimensionați în funcție de fereastra browserului.

Cea mai bună parte este că SuperEmbed.js nu necesită un cod suplimentar, așa că puteți doar încorporați fișierele și lăsați-i să fugă. Această bibliotecă JS se ocupă de restul prin care vizează elemente încorporate din anumite site-uri.

Toate videoclipurile menținerea raportului lor de aspect specific, astfel încât nu trebuie să vă faceți griji cu privire la dimensiunile goale. Și SuperEmbed funcționează ca a vanilie JS bibliotecă cu fără dependențe cum ar fi jQuery.

Acum, SuperEmbed acceptă încorporări video de peste 15 ori de la site-uri precum YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me și Archive.org (printre multe altele). Această listă este inca creste, astfel încât așteptați ca mai multe servicii de streaming video să fie adăugate în timp.

Pentru ca această unealtă să funcționeze, trebuie doar să o faceți descărcați biblioteca și adăugați-l în antetul site-ului ca astfel:

Puteți descărca a pe deplin copie de la repo GitHub, care include și specificații pentru site-uri video acceptate și suportul actual al browserului.

În cea mai mare parte, SuperEmbed suportă toate browserele moderne de la FireFox 3.5+, Chrome 4+ și versiuni de Internet Explorer 9 sau mai noi.

Aceasta este o bibliotecă foarte impresionantă având în vedere tot sprijinul pentru browser și cât de bine funcționează funcționează imediat din cutie. Este o soluție mult mai simplă decât hack-urile CSS dacă sunteți bine că vă bazați pe JavaScript.

Puteți găsi mai multe informatii pe GitHub și îl puteți vedea live running în această piesă.