Legge inn Responsive Videoer enkelt med SuperEmbed.js

Den moderne nettsiden er fullt responsiv og flere designere realiserer dette hver dag. Men det er en irriterende utfordring når det gjelder responsivt design: innebygd innhold.

Hvert videofil fra YouTube til Vimeo har en standard embed kode festet til en viss størrelse. Dette betyr at utviklere trenger å bruke andre løsninger til skape fullt lydhør videoer.

Men i stedet for å bruke en CSS container klasse, kan du bruke SuperEmbed.js, et gratis JavaScript-bibliotek for skaper lydløse videoer.

Dette pluginet løser to problemer samtidig. Alle innebygde videoer vil strekke for å fylle hovedbeholderen, mens det også er fleksibelt nok til endre størrelsen basert på nettleservinduet.

Den beste delen er den SuperEmbed.js krever ingen ekstra kode, så du kan bare legge inn filene og la dem løpe. Dette JS-biblioteket tar vare på resten av målretting av innebygde elementer fra bestemte nettsteder.

Alle videoer opprettholde sine spesifikke aspektforhold, slik at du ikke trenger å bekymre deg for wonky dimensjoner. Og SuperEmbed fungerer som en vanilje JS bibliotek med ingen avhengigheter for eksempel jQuery.

Akkurat nå, SuperEmbed støtter 15 + videoinnstillinger fra nettsteder som YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me og Archive.org (blant mange andre). Denne listen er vokser fortsatt, så forvent at flere video streaming-tjenester skal legges over tid.

For å få dette verktøyet til å fungere, trenger du bare å last ned biblioteket og legg det til i sidens overskrift som så:

Du kan laste ned en full kopi fra GitHub repo som også inneholder spesifikasjoner for støttede videosider og nåværende nettleserstøtte.

For det meste, SuperEmbed støtter alle moderne nettlesere fra FireFox 3.5+, Chrome 4+, og versjoner av Internet Explorer 9 eller høyere.

Dette er et veldig imponerende bibliotek med tanke på all nettleserstøtte og hvor bra det er fungerer rett ut av esken. Det er en mye enklere løsning enn CSS hacks hvis du er ok med å stole på JavaScript.

Du kan finne mer informasjon på GitHub og du kan se det Lev kjører i denne fienden.