En este post vamos a ver como insertar un video en WordPress de manera «Responsive» o compatible con dispositivos móviles. Si pegáis un video de youtube, por ejemplo, en el post, veréis como en la versión móvil el video se sobredimensiona y se sale del formato.
Para evitar esto sin usar un plugin podemos emplear el código que tenemos a continuación.
Se divide en dos partes, una primera que es la que tenéis que introducir en el archivo style.css y el otro es el código que rodea al enlace del video que queremos pegar en el post.
Tenemos que añadir el siguiente código fuente en nuestro archivo style.css (en apariencia abrimos el editor y seleccionamos el archivo style.css)
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
max-width: 100%;
}
Y para insertar los video en el post usamos en siguiente código:
<div class="video-container"> <iframe width="560" height="315" src="https://www.youtube.com/embed/hUIQIA-nDTU" frameborder="0" allowfullscreen></iframe> </div>
El resultado es el siguiente:
Al abrir este post en el móvil, el video se ajusta al ancho preestablecido por nuestro tema y no se sale por ninguno de los lados.
Espero que os sea de utilidad, porque a mi me ha solucionado la integración de los videos sin tener que recurrir a más plugin. No tengo nada en contra del uso, pero no quiero sobrecargar el blog de plugin que puedan quedar desactualizados en un futuro y me provoque problemas de vulnerabilidad.
El próximo post que estará colgado en breve explicaré como actualizar la bios de un portatil en caso de desastre total, bien por corrupción o por un fallo en la actualización de la misma. El tutorial va a ser para un modelo de Acer concreto, el Aspire 5740, aunque el proceso es idéntico para el 90% de portátiles.
Un saludo y hasta la próxima.
