Blog

HomeDesignTruco para que los vídeos de tu página web sean Responsive Design

Truco para que los vídeos de tu página web sean Responsive Design

Inauguramos el blog con un artículo muy útil para que nuestras webs sean Responsive y que consiste en hacer que nuestros vídeos de Youtube sean adaptables a los distintos dispositivos de comunicación.

¿Que es Responsive Design o Diseño Web Adaptativo? Es una técnica que nos permite adaptar nuestro sitio web a los distintos soportes: portátil, tablet y móvil mediante layouts e imágenes fluidas.

Seguramente últimamente estáis viendo páginas web que incluyen esta característica y es imprescindible si deseamos que nuestra página web tenga tráfico pues cada vez más se está utilizando el móvil para navegar por Internet, por lo que es necesario que los contenidos sean adaptables a este.

ResponsiveVideo

Pues bien, hay un aspecto que no debemos olvidar y es el hecho de conseguir que nuestros vídeos sean también adaptables. Para que esto sea posible se requiere un simple y fácil truco que consiste en crear algunos divs y CSS en nuestra página.

Si trabajas con WordPress debes localizar el archivo style.css de tu theme, normalmente a través de la ruta: WordPress/wp-content/themes/tu plantilla/style.css.

Si en cambio trabajas con Joomla solo debes buscar el nombre de la plantilla con la que estás trabajando, localizar la carpeta CSS y dentro de ella localizar el archivo CSS que lleva el nombre de tu plantilla.

Una vez hecho esto introducimos el siguiente código:

.contenedor-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.contenedor-video iframe,
.contenedor-video object,
.contenedor-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Ahora queda la parte más fácil y es embeber tu vídeo de Youtube y colocarlo en un artículo, página o entrada de tu Web añadiéndole el div “contenedor-video”, de esta manera le estaríamos llamando desde el CSS y nuestro vídeo sería flexible. El código que debéis copiar es el siguiente:

<div>
<iframe src="//www.youtube.com/embed/" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
</div>

No olvidéis que deberéis modificar el código de embebido de Youtube por el vuestro 😉

Si queréis ver cómo quedaría, haced la prueba con el vídeo que he colocado en este post y minimizar la ventana de vuestro navegador. Ya veréis que sean cuales sean las medidas el vídeo siempre queda visible.

Y con este paso ya está, a disfrutar de la flexibilidad de vuestra página y a ser Responsive 🙂

The following two tabs change content below.
Apasionada del Marketing Online y el Social Media. Licenciada en Publicidad y Relaciones Públicas por la URV con Máster en Social Media y Community Manager por la UNED. También podéis encontrarme en Google+
Post Tags - ,

Leave a Comment