Créer une iframe réactive est un défi, en particulier pour les vidéos YouTube.
Lorsque vous essayez d'intégrer la vidéo YouTube dans le site Web, vous verrez que la vidéo intégrée ne répond pas correctement en fonction du rapport hauteur/largeur.
Suivez ce tutoriel si vous recherchez une solution pour créer une iframe réactive pour n'importe quel cas d'utilisation, principalement une iframe YouTube.
Avant:
Après:
Iframe réactif (points clés)
- Un conteneur extérieur ou un wrapper autour de l'élément iframe est très important.
- Supprimez la largeur et la hauteur statiques de l'iframe et ajoutez-y une classe CSS.
- Ne définissez pas la largeur ou la hauteur de l'iframe-wrapper.
Pour l'iframe-wrapper, mettez les styles suivants :
- Définir la position sur relative
- Ajoutez 56,25 % de rembourrage sur le dessus (rapport 16:9)
- Masquer le débordement
Pour la classe iframe, mettez les styles suivants :
- Définir la position sur absolue
- Ajouter 100 % de largeur et de hauteur
- propriété gauche et supérieure à 0
Maintenant, placez-le quelque part dans le conteneur parent où vous pouvez définir la largeur appropriée pour votre vidéo intégrée.
Nos guides de codage :
- LE GUIDE ULTIME DU CSS 2023
- LE GUIDE ULTIME DU HTML 2023
- LE GUIDE ULTIME DE SQL ET NOSQL 2023
- LE GUIDE ULTIME DE JAVASCRIPT 2023
- LE GUIDE ULTIME DE PHP 2023
- LE GUIDE ULTIME DU LIQUIDE (SHOPIFY) 2023
- LE GUIDE ULTIME DE PYTHON 2023
- LE GUIDE ULTIME DE JSON 2023
Conclusion
Dans ce didacticiel, vous avez appris à créer une réponse iframe. Vous verrez à quelle fréquence cette solution peut vous aider dans votre carrière de développeur Web.
J'ai un autre guide pour vous sur les grilles CSS . Allez-y et apprenez à créer rapidement des sites Web réactifs.
Pour des solutions plus rapides pour le développement Web. N'oubliez pas de vous inscrire à notre newsletter.
