Incrustar un vídeo de Youtube dentro de una página web es muy fácil, simplemente hacemos click en la opción compartir y seleccionamos ‘Insertar’:
De aquí copiamos el código HTML y lo pegamos en cualquier página web. El problema es que esté código no es responsive. Si queremos que este vídeo que colguemos en la web sea Responsive(Se haga mas grande o mas pequeño en función de la pantalla) lo podemos hacr en dos simple pasos:
Quitar el alto y el ancho
Hay que quitar el ancho y alto del código. Básicamente así:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/fWmO9bHU_fg” frameborder=”0″ allowfullscreen></iframe>
Incrustarlo como
En la web, insertarlo dentro de un div con los siguientes estilos:
<div class="video-responsive"> <iframe src="https://www.youtube.com/embed/fWmO9bHU_fg" frameborder="0" allowfullscreen></iframe> </div>
El código CSS necesario para que se vea responsive es el siguiente:
.video-responsive { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative; } .video-responsive iframe, .video-responsive object, .video-responsive embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
De esta manera vuestros vídeos de Youtube siempre se verán perfectos en todos los dispositivos.
Mil gracias! Me ha sido de mucha utilidad.
tremendo amigo…se agradece
crack! … muchas gracias me fue de mucha ayuda
Gracias!!! simple y de mucha ayuda
Gracias, justo lo que necesita ya que mi vídeos se veían un poco grandes en dispositivos.
Mil gracias simple y sin rodeos mire varios tutos y nada, Este de 1000 maravillas me sirvio amigo al primer intento.
Muchas gracias hermano!
Para mí ha funcionado fácilmente el siguiente código: y así me ha resultado reponsivo
Muchas gracias por el post, el codigo me funciono perfectamente
Que dios te vendiga. Perfecto en Blogger.
Genial mil gracias!!!!
muy buena gracias, y salu2
¡Muchas gracias! Funciona perfecto.
Muy bueno, funciona en WordPress. Gracias!