Cómo hacer un iframe responsivo en CSS (2023)

Crear un iframe responsivo es un desafío, especialmente para los videos de YouTube.

Cuando intenta incrustar el video de YouTube dentro del sitio web, verá que el video incrustado no responde correctamente según la relación de aspecto.

Siga este tutorial si está buscando una solución para crear un iframe responsivo para cualquier caso de uso, principalmente un iframe de YouTube.

Antes:

Después:

iframe responsivo (puntos clave)

• Es muy importante un contenedor exterior o envoltorio alrededor del elemento iframe.
• Elimine el ancho y alto estáticos del iframe y agréguele una clase CSS.
• No establezca el ancho o alto del iframe-wrapper.

Para el iframe-wrapper coloque los siguientes estilos:

• Establecer posición en relativa
• Agregue un 56,25% de acolchado superior (Relación 16:9)
• Hacer que el desbordamiento esté oculto

Para la clase iframe, coloque los siguientes estilos:

• Establecer posición en absoluta
• Agregue 100% ancho y alto
• propiedad izquierda y superior a 0

Ahora, colócalo en algún lugar dentro del contenedor principal donde puedas establecer el ancho adecuado para tu vídeo incrustado.

Nuestras guías de codificación:

• LA GUÍA ÚLTIMA PARA CSS 2023
• LA GUÍA ÚLTIMA DE HTML 2023
• LA GUÍA ÚLTIMA PARA SQL Y NOSQL 2023
• LA GUÍA ÚLTIMA DE JAVASCRIPT 2023
• LA GUÍA ÚLTIMA PARA PHP 2023
• LA GUÍA ÚLTIMA DE LÍQUIDO (SHOPIFY) 2023
• LA GUÍA ÚLTIMA DE PYTHON 2023
• LA GUÍA ÚLTIMA DE JSON 2023

Conclusión

En este tutorial, aprendió cómo crear una respuesta de iframe. Verás con qué frecuencia esta solución puede ayudarte en tu carrera de desarrollo web .

Tengo otra guía para ti sobre cuadrículas CSS . Continúe y aprenda a crear sitios web responsivos rápidamente.

Para soluciones más rápidas para el desarrollo web . No olvides suscribirte a nuestra newsletter.