Vídeos de YouTube, Vimeo responsive

Añada vídeos de YouTube escalable en todos los navegadores y dispositivos móviles, las tabletas y también los teléfonos de diseño de respuesta.

Lo primero que necesita es el código de inserción iframe YouTube, podemos obtener desde sus opciones sobre compartir de vídeo desde el sitio YouTube.

Colocar el código iframe tu página, el div contenedor del iframe (div.youtubevideowrap) tiene 2 declaraciones CSS para el ancho, tiene una anchura de 80% y un max-width: 640px .

lo que debemos de realizar es añadir en un contenedor div HTML al iframe de todo el vídeo y declarar la CSS.

HTML

<div class="youtube-container"><iframe.......></iframe></div>

AÑADIR ESTILOS CSS

.youtube-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.youtube-container iframe, .youtube-container object, .youtube-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

Espero haberte servidor este tutorial, No olvides comentar.

(1 votos, average: 5,00 out of 5)

Loading...