Incrustaciones de vídeos de YouTube adaptables

Cómo insertar un video de YouTube en su sitio y hacerlo responsivo, de modo que se pueda ver en un dispositivo móvil

El problema con la inserción de videos de YouTube es que son un iframeiframe y se les debe dar una altura y un ancho exactos, de lo contrario se verán raros.

Y debemos mantener las proporciones, basadas en la relación de aspecto del vídeo.

Para que un video de YouTube se muestre de forma responsiva en tu página, primero envuélvelo en un contenedor div:

div iframe src="https://www.youtube.com/embed/...." frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen/iframe/div

Luego agrega este CSS a tu sitio:

.video-container { overflow: hidden; position: relative; width:100%;}.video-container::after { padding-top: 56.25%; display: block; content: '';}.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

¿Ves ese número mágico? 56.25%Es necesario como relleno cuando la relación de aspecto de un vídeo es 16:9 (9 es el 56,25 % de 16).Te recomendamos Significado de los nombres

Si su vídeo es de 4:3, por ejemplo, configúrelo al 75%.

Tips de CSS

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Incrustaciones de vídeos de YouTube adaptables

Cómo insertar un video de YouTube en su sitio y hacerlo responsivo, de modo que se pueda ver en un dispositivo móvil

programar

es

2025-01-02

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente