Haga que todo el contenido incrustado sea receptivo con Reframe.js
La parte más delicada de la incrustación de videos es corregir el ancho y la altura. Estos números definen la relación de aspecto y cuando están apagados obtendrás un reproductor de video wonky .
Esto es cierto para todos los elementos incrustados, como iframes y widgets de redes sociales. Y estas cosas pueden ser incluso más complicadas con un diseño receptivo porque generalmente no son elementos receptivos .
Pero con Reframe.js, puede hacer que cualquier elemento responda por cualquier relación de aspecto .
Este es quizás uno de los plugins JS más simples pero más valiosos en la web. En realidad, fue creado por Dollar Shave Club, que sorprendentemente tiene su propia página de GitHub.Reframe es uno de sus complementos gratuitos creados para desarrolladores que desean una forma más sencilla de manejar contenido integrado receptivo .
El culpable obvio es el video incrustado de sitios como YouTube y Vimeo. Es notoriamente difícil hacer que estos elementos respondan sin hacks CSS.
Con Reframe.js, solo selecciona el elemento al que desea orientar y lo replantea utilizando la función de reframe()
.
Comience por agregar el complemento Reframe.js a su página web. Puedes descargar una copia de GitHub, y solo se ha reducido 1 KB.
Luego, simplemente transfiere la función a un selector para los elementos que quieras replantear. Cargue la página y boom! Deberías estar todo listo.
Por ejemplo, supongamos que tiene algunos videos incrustados en su sitio. Puede agregar la clase .video
a la .video
, y usar eso como selector. Reframe agrega automáticamente un div y una clase a su alrededor para crear un estilo receptivo.
Entonces su código JavaScript se vería así:
reframe ('video');
Bastante simple ¿verdad?
Este código se dirige a todos los elementos con la clase .video
y los hace receptivos . Sin hacks extra, sin CSS adicional. De acuerdo, no tiene nada de malo utilizar el método CSS, pero deberá envolver manualmente todos los videos incrustados con la clase adicional.
Reformular simplemente te ahorra ese paso extra y lo trae todo con JavaScript. Para ver una demostración y encontrar algunos fragmentos de código básicos, visite la página de inicio de Reframe.js. Puede descargar una copia del código directamente desde el repositorio de GitHub.
10 usos creativos e innovadores de Microsoft Kinect
El Kinect fue lanzado en 2010 como un periférico para la Xbox 360 y se comercializó como una forma de agregar controles de movimiento a los juegos. Microsoft incluso lo agregó como un periférico al comercializar Xbox One, aumentando las funciones, como el control por voz para la consola. Mientras que algunos ven que no es más que un complemento de videojuegos, Microsoft Kinect utiliza tecnologías que amplían el uso práctico más allá del mundo de los videojuegos .Después d
Los 10 pecados de los adictos a dispositivos móviles que molestan a todos
Es difícil negar el hecho de que los teléfonos inteligentes y las tabletas se han convertido en una parte esencial de nuestra vida cotidiana, cada vez más conectada . Sin embargo, esto no nos da a ninguno de nosotros una excusa para dejar que nuestros dispositivos móviles dominen nuestras vidas y olvidemos algunos aspectos básicos de la decencia y los modales. No