Hacer vídeos responsive de youtube
Hace unos días me vi en la tesitura de tener que poner un video de youtube en wordpress, algo realmente sencillo, pero ocurría que la red social no nos da la posibilidad de introducir los vídeos con responsive directamente, por ello voy a contaros como hacerlo usando solamente css y un div….
Para empezar lo primero que debemos de hacer es introducir el iframe que nos da youtube dentro de un div tal y como vemos aquí:
<div class="video-responsive"> <iframe src="https://www.youtube.com/embed/CBoG4QNDX5U" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div>
Después tenemos que crear el siguiente código css para hacer que el responsive funcione correctamente:
/*Videos responsive*/ .video-responsive { position: relative; padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; } .video-responsive iframe, .video-responsive object, .video-responsive embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Con esto simplemente podremos lograr hacer nuestros videos embebidos de youtube responsive.
Hola , ¿podrias decirme por ejemplo para prestashop si serviria para introducir un video en el slider?.En que archivos habria que introducir cada uno ?
Gracias, un saludo.
No toco demasiado prestashop, pero supongo que si tienes acceso al código del slider y te permite ponerle el div con el video, luego solo tienes que hacer que lea el css, así que a priori sí sería posibe. otro tema es ver cuanto tiempo tienes que pelearte con el cms en cuestión.
Vaya!!! buscando el script «fitvid.js» por casualidad vi la entrada de esta página en Google, nada más símple que unas cuantas líneas de CSS.
Gracias!!!
me alegra que te haya servido!!!