Embed Responsive Videos nemt med SuperEmbed.js

Det moderne web er fuldt lydhør og flere designere realiserer dette hver dag. Men der er en irriterende udfordring, når det kommer til lydhør design: indlejret indhold.

Hvert videofil fra YouTube til Vimeo har en standard embed kode fastgjort til en vis størrelse. Det betyder, at udviklere skal bruge andre løsninger til skabe fuldt lydfulde videoer.

Men i stedet for at bruge en CSS container klasse, kan du bruge SuperEmbed.js, et gratis JavaScript-bibliotek til skabe lydhør videoer.

Dette plugin løser to problemer på en gang. Alle indlejrede videoer vil stræk for at fylde hovedbeholderen, samtidig med at det er fleksibelt nok til Ændre størrelse på basis af browservinduet.

Det bedste er, at SuperEmbed.js kræver ingen ekstra kode, så du kan bare indlejre filerne og lad dem løbe. Dette JS bibliotek tager sig af resten af målretning af indlejrede elementer fra bestemte websteder.

Alle videoer opretholde deres specifikke aspektforhold, så du behøver ikke bekymre dig om wonky dimensioner. Og SuperEmbed fungerer som en vanilje JS bibliotek med ingen afhængigheder som jQuery.

Lige nu, SuperEmbed understøtter 15+ videoindstillinger fra websteder som YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me og Archive.org (blandt mange andre). Denne liste er vokser stadig, så forvent at flere video streaming tjenester skal tilføjes over tid.

For at få dette værktøj til at fungere, behøver du bare at download biblioteket og Tilføj det til dit websteds overskrift ligesom:

Du kan downloade en fuld kopi fra GitHub repo, som også indeholder specs for understøttede videosider og nuværende browser support.

For det meste, SuperEmbed understøtter alle moderne browsere fra FireFox 3.5+, Chrome 4+ og versioner af Internet Explorer 9 eller nyere.

Dette er et meget imponerende bibliotek, der overvejer hele browsersupporten og hvor godt det er fungerer lige ud af boksen. Det er en meget enklere løsning end CSS hacks, hvis du er okay med at stole på JavaScript.

Du kan finde mere information på GitHub og du kan se det Lev løbende i denne fidle.