Embed Responsive Videos Jednostavno s SuperEmbed.js

Moderni web je potpuno odgovarajući i više dizajnera to ostvaruje svaki dan. Ali postoji jedan dosadan izazov kada je u pitanju odgovarajući dizajn: ugrađeni sadržaj.

Svaki video site s YouTubea na Vimeo ima zadani ugrađeni kod određene veličine. To znači da programeri trebaju koristiti druga rješenja stvorite potpuno prihvatljive videozapise.

Međutim, umjesto upotrebe CSS kontejnerske klase, možete koristiti SuperEmbed.js, besplatnu JavaScript biblioteku za stvaranje pozitivnih videozapisa.

Ovaj dodatak rješava dva problema odjednom. Svi ugrađeni videozapisi bit će istegnuti kako bi se napunio glavni spremnik, dok je također dovoljno fleksibilan promijenite veličinu na temelju prozora preglednika.

Najbolji dio je taj SuperEmbed.js ne zahtijeva dodatni kôd, tako da možete samo ugradite datoteke i pusti ih da trče. Ova knjižnica JS-a brine o ostatku putem ciljanje ugrađenih elemenata s određenih web-lokacija.

Svi videozapisi održavaju svoje specifične omjere, tako da ne morate brinuti o gadnim dimenzijama. A SuperEmbed radi kao vanilla JS knjižnica s nema ovisnosti kao što je jQuery.

Upravo sada, SuperEmbed podržava 15 videozapisa s web-mjesta kao što su YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me i Archive.org (između ostalih). Ovaj popis je i dalje raste, stoga očekujte da će tijekom vremena biti dodano više usluga video streaminga.

Da biste dobili ovaj alat radi, samo trebate preuzmite knjižnicu i dodajte ga u zaglavlje svoje web-lokacije ovako:

Možete preuzeti a u potpunosti kopirati od repo GitHub koji također uključuje naočale za podržane web-lokacije videozapisa i trenutačnu podršku preglednika.

Većinom SuperEmbed podržava sve moderne preglednike od FireFox 3.5+, Chrome 4+ i verzija programa Internet Explorer 9 ili novije verzije.

Ovo je vrlo impresivna biblioteka s obzirom na podršku i preglednost preglednika radi izravno iz kutije. To je mnogo jednostavnije rješenje od CSS hakiranja ako se slažete s JavaScriptom.

Možeš naći više informacija na GitHubu i možete ga vidjeti živjeti trčanje u ovoj violini.