如何使响应或可调, 全宽, 从 Youtube 视频嵌入

Si alguna vez has insertado 一个视频的 YouTube en alguna de tus 网站 habrás notado que el vídeo guarda un ancho fijo y que éste no es responsivo cuando cambias el 大小 del navegador o cuando ves tus páginas webs desde otros 设备 con distintos tamaños de pantalla (移动, 平板电脑,…).

Ya en un artículo anterior vimos como podías insertar un vídeo de Youtube directamente en tu página web, y en el caso de que uses WordPress, sin necesidad de ningún tipo de 插件.

Para hacer que el 宽度的一视频 insertado, a partir del código HTML que Youtube nos dá, 是 responsivo, lo primero que haremos será meter dicho código dentro de un DIV.

<div class="contenedor">
   <iframe src="https://www.youtube.com/embed/NUsoVlDFqZg" 
           frameborder="0" 
           allowfullscreen="allowfullscreen" 
           class="video">
   </iframe>
</div>

frameborder="0"

allowfullscreen="allowfullscreen"

class="video">

</iframe>

</div>

Puedes usar el 代码 aquí mostrado, 和替换的路线 por la ruta que te dé YouTube del vídeo que quieras 插入. Ten en cuenta que debes asignar la clase 视频 al elemento IFRAME.

然后, en tu archivo CSS 相应的, o directamente bajo un elemento STYLE en la misma página, 我们要去 asignar los atributos de estilo para la clase 集装箱 和视频.

.contenedor {
   position: relative;
   height: 0px;
   width: 100%;   
   padding-bottom: 56.25%;
}

.video {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

.contenedor {

position: relative;

height: 0px;

width: 100%;

padding-bottom: 56.25%;

}

.video {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

}

Una vez introducido este código, 如果 refrescas de nuevo la página donde hayas insertado el vídeo, comprobarás que ahora éste se ajusta 到宽度的的 DIV que lo contiene. 是的东 DIV está situado directamente sobre el BODY, 你会看到它 reajusta 到 ancho de la pantalla.