Tutos

Comment rendre vos intégrations iframe youtube Responsive ?

L’intégration d’une vidéo Youtube ou Vimeo via iframe peut vous poser problème sur votre site en Responsive Design.

Initialement les vidéo Youtube et Vimeo ne s’adapte pas à toutes les devices.

Pour remédier à ce problème et afin que votre vidéo s’adapte automatiquement à la résolution de votre écran, il suffit d’ajouter les quelques lignes CSS  et HTML.

Vidéos Responsive via Iframe

Intégration HTML :

Ajout de la <div class=video-container> sur votre iframe

<div class="video-container">
 <iframe src="https://www.youtube.com/embed/yRWY9UogMJA" frameborder="0" width="560" height="315"></iframe> 
</div>

 

Intégration CSS :

Ajout de ces lignes de code CSS dans votre feuille de style


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

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

Comment créer une vidéo Responsive avec largeur fixe

Pour limiter et fixer la largeur de la vidéo, il suffit de rajouter une autre <div > et spécifiez une valeur de largeur fixe avec max-width : 100 %

Intégration HTML :

Ajout d’une <div class=video-wrapper> supplémentaire autour de votre iframe

<div class="video-wrapper">
	<div class="video-container">
		<iframe src="https://www.youtube.com/embed/yRWY9UogMJA" width="800" height="450" frameborder="0"></iframe>
	</div>
	<!-- /video -->
</div>
<!-- /video-wrapper -->

Intégration CSS :

Ajout d’une nouvelle classe CSS dans votre feuille de style


.video-wrapper {
	width: 600px;
	max-width: 100%;
}

 

Exemple :

YouTube

En chargeant cette vidéo, vous acceptez la politique de confidentialité de YouTube.
En savoir plus

Charger la vidéo

 

Compatibilité :

Cette astuce fonctionne sur les navigateurs suivants : Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone et iPad.

Crédits :

Cette astuce a été trouvée sur tjkdesign.com.

Article précédent
Supprimer la mention “propulsé par Prestashop” dans votre boutique
Article suivant
Comment trouver la version de WordPress installée ?
Menu