Cómo hacer videos tipo "responsive" en joomla usando css

Videos responsive

Nivel Intermedio

Cómo hacer que los videos de youtube de nuestra pagina web se ajusten al celular. Hola gente, les dejamos un corto tutorial realmente fácil para hacerlo, recuerda que tu template de joomla puede que ya sea responsive pero la mayoría de las veces cuando incrustamos un video estas propiedades pueden pasar por alto y hacerte perder todo el trabajo bien logrado

Sigue los pasos

  • Configura en version código el administrador de joomla. Global Configuration > Site > Default Editor > None
  • Copia el código del video que deseas incrustar y sólo pégalo en el lugar del artículo que deseas que se muestre
  • Al código que acabas de pegar lo encierras con las etiquetas "video wrapper"   Quedará algo como esto:
<div class="videoWrapper">
    <!-- Aquí va el código de YouTube: quedaría como lo ves en la siguiente línea -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
  • Finalmente copias el siguiente código y lo pegas al final de la hoja de estilos del template que estás usando:
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


Eso es todo..

El video quedará listo para adaptarse a cualquier pantalla de tablet o celular.

Si estas navegando desde la versión de escritorio puedes ver cómo funciona en tu celular directamente escaneando el siguiente QR

 

 

Video demostrativo tipo "responsive"

Add comment