Cómo insertar un vídeo de YouTube responsive con CSS

  • Autor Autor sormaria
  • Fecha de inicio Fecha de inicio
S

sormaria

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
8otqSgt.webp

En el siguiente ejemplo podemos ver como insertar un vídeo de youtube responsive con css de una manera sencilla u eficiente, lo que haremos es configurar el iframe o el object que utiliza youtube para insertar sus vídeos.

[table="width: 600, class: outer_border, align: center"]
[tr]
[td]<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/xaR0VnckBNE" frameborder="0" allowfullscreen></iframe>
</div>[/td]
[/tr]
[/table]


Demo: Responsive YouTube videos to scale in all browsers, ipads, iPhones and tablets
 
Última edición:
[MENTION=145067]sormaria[/MENTION] Algún demo?
 
Qué bueno!!!

Voy a mirar si funciona dentro de los comentarios en Wordpress.

Mil gracias!!!
 
[MENTION=145067]sormaria[/MENTION] Gracias por el tutorial 🙂
 
A la orden no es de mi autoria y lo bueno se comparte para que los nuevos aprendan
 
Lo guardo en favoritos para cuando lo necesite, gracias por el aporte :encouragement:.
 
Buen aporta gracias.
 
Atrás
Arriba