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

[pastacode lang=”markup” message=”HTML” highlight=”” provider=”manual”]

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

[/pastacode]

 

Intégration CSS :

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

[pastacode lang=”css” message=”Feuille de style” highlight=”” provider=”manual”]

.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%;
}

[/pastacode]

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

[pastacode lang=”markup” message=”HTML” highlight=”” provider=”manual”]

<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 -->

[/pastacode]

Intégration CSS :

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

[pastacode lang=”css” message=”Feuille de style” highlight=”” provider=”manual”]

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

[/pastacode]

 

Exemple :

[ABs_youtube id=”https://www.youtube.com/watch?v=yRWY9UogMJA” fullscreen_button=”1″ modestbranding=”1″ controls=”1″]

 

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.