Haga que todo el contenido incrustado responda con Reframe.js
La parte más complicada de incrustar videos está consiguiendo el ancho y la altura correcta. Estos números define la relación de aspecto y cuando estén fuera podrás obtener un reproductor de video no deseado.
Esto es cierto para todos los elementos incrustados tales como iframes y widgets de redes sociales. Y estas cosas pueden ser incluso más complicadas con un diseño responsivo porque generalmente son elementos no sensibles.
Pero con Reframe.js, puedes hacer Cualquier elemento sensible para cualquier relación de aspecto..
Este es quizás uno de los complementos JS más simples pero más valiosos en la web. Fue en realidad creado por Dollar Shave Club Que sorprendentemente tiene su propia página de GitHub..
Replantear es uno de sus complementos gratuitos construido para desarrolladores que quieren una forma más sencilla de manejo de contenido integrado responsivo.
El culpable obvio es el video incrustado de sitios como YouTube y Vimeo. Es notoriamente Difícil hacer estos elementos sensibles sin hacks CSS.
Con Reframe.js, acabas de seleccionar cualquier elemento que quieras apuntar y replantearlo utilizando la replantear () función.
Comience agregando el complemento Reframe.js a su página web. Usted puede descargar una copia de GitHub, y solo se reduce 1KB.
Entonces tu solo pasar la función un selector para cualquier elemento que quieras replantear. Cargar la pagina ¡y bum! Deberías estar todo listo.
Por ejemplo, supongamos que tiene algunos videos incrustados en su sitio. Usted puede agrega la clase .vídeo al embed, y usar eso como el selector. Replantear Añade automáticamente un div y una clase a su alrededor. para crear el estilo de respuesta.
Entonces tus Código JavaScript se vería así:
reencuadre ('. video'); Bastante simple derecha?
Este código apunta a todos los elementos con la clase. .vídeo y los hace receptivos. Sin hacks extra, sin CSS extra. Por supuesto, no hay nada de malo en usar el método CSS, pero necesitarás envolver manualmente Todos los videos incrustados con la clase extra.
Reencuadre solo te ahorra ese paso extra y lo trae todo a través de JavaScript. A echa un vistazo a una demostración y encuentra algunos fragmentos de código básicos, Visita la página de inicio de Reframe.js. Usted puede descargar una copia del código directamente desde el repositorio de GitHub.
