Incorporar vídeos responsivos facilmente com SuperEmbed.js

A web moderna é totalmente responsivo e mais designers estão percebendo isso todos os dias. Mas há um desafio irritante quando se trata de design responsivo: conteúdo incorporado.

Todo site de vídeos do YouTube para o Vimeo tem código de incorporação padrão fixo a um determinado tamanho. Isso significa que os desenvolvedores precisam usar outras soluções para crie vídeos totalmente responsivos.

No entanto, em vez de usar uma classe de contêiner CSS, você pode usar SuperEmbed.js, uma biblioteca JavaScript gratuita para criando vídeos responsivos.

Este plugin resolve dois problemas de uma vez só. Todos os vídeos incorporados serão esticar para preencher o recipiente principal, ao mesmo tempo, sendo flexível o suficiente para redimensionar com base na janela do navegador.

A melhor parte é que SuperEmbed.js não requer código extra, para que você possa incorpore os arquivos e deixe-os correr. Esta biblioteca JS cuida do resto segmentação de elementos incorporados de determinados sites.

Todos os vídeos manter suas proporções específicas, então você não precisa se preocupar com dimensões instáveis. E SuperEmbed funciona como um biblioteca de baunilha JS com sem dependências como jQuery.

Agora, SuperEmbed suporta mais de 15 vídeos incorporados de sites como YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me e Archive.org (entre muitos outros). Esta lista é ainda crescendo, então espere mais serviços de streaming de vídeo para ser adicionado ao longo do tempo.

Para que esta ferramenta funcione, você só precisa baixar a biblioteca e adicione-o ao cabeçalho do seu site igual a:

Você pode baixar um Copie totalmente do repositório GitHub, que também inclui especificações para sites de vídeo suportados e suporte atual ao navegador.

Na maior parte, SuperEmbed suporta todos os navegadores modernos do FireFox 3.5+, do Chrome 4+ e das versões do Internet Explorer 9 ou superior.

Esta é uma biblioteca muito impressionante, considerando todo o suporte ao navegador e quão bem funciona imediatamente fora da caixa. É uma solução muito mais simples do que os hacks de CSS, se você está bem contando com JavaScript.

Você pode encontrar Mais Informações no GitHub e você pode ver corrida ao vivo neste violino.