Get it on Google Play
Tu partner Freelance para tus proyectos IT

Como incrustar un vídeo de youtube y que se vea responsive

02-05-2017

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’:

Vídeo Youtube Responsive

Vídeo Youtube Responsive

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.

Si te ha servido, por favor comparte
 

Comments

11 Responses to “Como incrustar un vídeo de youtube y que se vea responsive”
  1. Vicente says:

    Mil gracias! Me ha sido de mucha utilidad.

  2. lucas says:

    tremendo amigo…se agradece

  3. Henry marca says:

    crack! … muchas gracias me fue de mucha ayuda

  4. Hugo says:

    Gracias!!! simple y de mucha ayuda

  5. Gracias, justo lo que necesita ya que mi vídeos se veían un poco grandes en dispositivos.

  6. Gustavo says:

    Mil gracias simple y sin rodeos mire varios tutos y nada, Este de 1000 maravillas me sirvio amigo al primer intento.

  7. Muchas gracias hermano!

  8. Luis says:

    Para mí ha funcionado fácilmente el siguiente código: y así me ha resultado reponsivo

  9. Muchas gracias por el post, el codigo me funciono perfectamente

  10. Que dios te vendiga. Perfecto en Blogger.

  11. aclis says:

    Genial mil gracias!!!!

Leave a Reply