Integreer responsieve video's eenvoudig met SuperEmbed.js

Het moderne web is volledig responsief en meer ontwerpers realiseren zich dit elke dag. Maar er is een vervelende uitdaging als het gaat om responsief ontwerp: ingesloten inhoud.

Elke videosite van YouTube tot Vimeo heeft een standaard insluitcode gefixeerd op een bepaalde maat. Dit betekent dat ontwikkelaars andere oplossingen moeten gebruiken maak volledig responsieve video's.

In plaats van een CSS-containerklasse te gebruiken, kunt u deze echter gebruiken SuperEmbed.js, een gratis JavaScript-bibliotheek voor het creëren van responsieve video's.

Deze plugin lost twee problemen op onmiddelijk. Alle ingesloten video's zullen rekken om de hoofdcontainer te vullen, terwijl het ook flexibel genoeg is om formaat wijzigen op basis van het browservenster.

Het beste deel is dat SuperEmbed.js vereist geen extra code, dus je kunt gewoon embed de bestanden en laat ze rennen. Deze JS-bibliotheek zorgt voor de rest van gericht op ingesloten elementen van bepaalde sites.

Alle video's behoud hun specifieke aspect ratio's, dus je hoeft je geen zorgen te maken over onzinnige dimensies. En SuperEmbed werkt als een vanille JS-bibliotheek met geen afhankelijkheden zoals jQuery.

Op dit moment SuperEmbed ondersteunt 15 + video-ingesloten video's van sites zoals YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me en Archive.org (onder vele anderen). Deze lijst is nog steeds aan het groeien, dus verwacht dat er in de loop van de tijd meer video-streamingdiensten zullen worden toegevoegd.

Om deze tool werkend te krijgen, moet je dat gewoon doen download de bibliotheek en voeg het toe aan de header van uw site zoals zo:

U kunt een downloaden volledig kopiëren van de GitHub repo waar ook specificaties voor zijn ondersteunde videosites en huidige browserondersteuning.

Voor het grootste deel SuperEmbed ondersteunt alle moderne browsers van FireFox 3.5+, Chrome 4+, en versies van Internet Explorer 9 of hoger.

Dit is een zeer indrukwekkende bibliotheek die alle browserondersteuning in overweging neemt en hoe goed deze is werkt direct uit de doos. Het is een veel eenvoudigere oplossing dan de CSS-hacks als je oke bent met vertrouwen op JavaScript.

Je kunt vinden meer informatie op GitHub en je kunt het zien live hardlopen in deze viool.