Get it on Google Play
02-05-2017
 

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

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

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

    Mil gracias! Me ha sido de mucha utilidad.

Leave a Reply