Tornar todo o conteúdo incorporado responsivo com o Reframe.js

A parte mais complicada sobre incorporando vídeos está ficando a largura e a altura corretas. Esses números definir o formato e quando eles saírem você obter um player de vídeo ruim.

Isto é true para todos os elementos incorporados como iframes e widgets de mídia social. E essas coisas podem ser ainda mais complicadas com o design responsivo, porque elas geralmente são elementos não responsivos.

Mas com Reframe.js, você pode fazer qualquer elemento responsivo para qualquer proporção.

Esse talvez seja um dos plug-ins JS mais simples e valiosos da web. Foi realmente criado por Dollar Shave Club que surpreendentemente tem sua própria página do GitHub.

Reframe é um de seus plugins gratuitos construído para desenvolvedores que querem uma maneira mais simples de Manipulando conteúdo incorporado responsivo.

O culpado óbvio é o vídeo incorporado de sites como o YouTube e o Vimeo. É notoriamente difícil tornar esses elementos responsivos sem hacks CSS.

Com Reframe.js, você apenas selecionar qualquer elemento que você deseja segmentar e reframe usando o reformular() função.

Comece adicionando o plugin Reframe.js à sua página da web. Você pode baixe uma cópia do GitHub, e é apenas 1KB minificado.

Então você apenas passar a função um seletor para quaisquer elementos que você queira reformular. Carregue a página e boom! Você deve estar tudo pronto.

Por exemplo, digamos que você tenha alguns vídeos incorporados em seu site. Você pode adicione a classe .vídeo para a incorporação, e use isso como o seletor. Reformular adiciona automaticamente um div e classe em torno dele para criar o estilo responsivo.

Então seu Código JavaScript ficaria assim:

reframe ('. video');

Bem simples?

Este código segmenta todos os elementos com a classe .vídeo e faz com que eles respondam. Sem hacks extras, sem CSS extra. Concedido não há nada de errado com o uso do método CSS, mas você precisará embrulhar manualmente todos os vídeos incorporados com a classe extra.

Refrescar apenas poupa-lhe esse passo extra e traz tudo isso com JavaScript. Para confira uma demonstração e encontrar alguns trechos de código básicos, visite a página inicial do Reframe.js. Você pode baixar uma cópia do código direto do repositório do GitHub.