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%;
}