Bädda in Responsive Videos enkelt med SuperEmbed.js

Den moderna webben är fullt mottaglig och fler designers realiserar detta varje dag. Men det är en irriterande utmaning när det gäller responsiv design: inbäddat innehåll.

Varje videosida från YouTube till Vimeo har en standard inbäddningskod fixad till en viss storlek. Detta innebär att utvecklare måste använda andra lösningar till skapa fullt responsiva videor.

Men i stället för att använda en CSS container klass kan du använda SuperEmbed.js, ett gratis JavaScript-bibliotek för skapa responsiva videor.

Denna plugin löser två problem genast. Alla inbäddade videor kommer att sträcka sig för att fylla huvudbehållaren, samtidigt som det är tillräckligt flexibelt ändra storlek baserat på webbläsarfönstret.

Det bästa är att SuperEmbed.js kräver ingen extra kod, så du kan bara bädda in filerna och låt dem springa. Detta JS-bibliotek tar hand om resten av inriktning på inbäddade element från vissa webbplatser.

Alla videoklipp behålla sina specifika bildförhållanden, så du behöver inte oroa dig för wonky dimensioner. Och SuperEmbed fungerar som en Vanilla JS-biblioteket med inga beroenden som jQuery.

Just nu, SuperEmbed stöder 15 + videoinrättningar från webbplatser som YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me och Archive.org (bland många andra). Denna lista är växer ännu, så förvänta dig mer video streaming tjänster att läggas över tiden.

För att få detta verktyg att fungera behöver du bara ladda ner biblioteket och lägg till den i sidans huvudrubrik såhär:

Du kan ladda ner en fullständig kopia från GitHub repo som också innehåller specifikationer för stödda videosidor och aktuellt webbläsarsupport.

För det mesta, SuperEmbed stöder alla moderna webbläsare från FireFox 3.5+, Chrome 4+ och versioner av Internet Explorer 9 eller senare.

Detta är ett mycket imponerande bibliotek med tanke på allt webbläsarsupport och hur bra det är fungerar rätt ut ur lådan. Det är en mycket enklare lösning än CSS hacks om du är okej med att förlita sig på JavaScript.

Du kan hitta mer information på GitHub och du kan se den lev kör i denna fiol.