Vidéo responsive sans conteneur parent

1- Avec conteneur - La façon "commune"

Pour intégrer une iframe vidéo d'un site d'hébergement de vidéos (YouTube, Vimeo, DailyMotion...) et qu'elle s'adapte automatiquement de façon responsive sur des écrans de tailles différentes, on la place en règle générale dans un conteneur parent qui fera en sorte de la rendre responsive, en utilisant padding-bottom pour maintenir le rapport hauteur/largeur, avec un code HTML de ce genre :

<div class="conteneur-video">
	<iframe ici-le-code-à-copier-du-site-hébergeant-la-vidéo-a-intégrer></iframe>
</div>
 

Puis en ajoutant dans la feuille de style du site, ce code CSS :

.conteneur-video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
}
.conteneur-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Et cela fonctionne très bien. Mais que faire si l'on ne peut pas ajouter ce "conteneur-video" ?

2- Astuce - Sans conteneur parent

En effet si vous récupérez un vieux site ou blog qui intègre historiquement beaucoup de vidéos (et qui n'était pas conçu en responsive), ou encore si vous ne souhaitez pas obliger les rédacteurs à devoir "entourer" la vidéo dans un div "conteneur-vidéo" chaque fois qu'ils devront intégrer une vidéo dans un article, la solution ci-dessus n'est pas envisageable.

Il serait, dans le premier cas, hors de question de devoir modifier des centaines d'articles à la mano et dans le second, soyons lucides, un jour ou l'autre (plutôt très souvent) les rédacteurs n'y penseront pas. Les vidéos seront alors sur des smartphones ou tablettes souvent trop large (même en mode paysage).

Pour y remédier, voici une astuce de Pedro Pimenta, librement interprété ici par votre serviteur pour la faire fonctionner avec Joomla!

Nous allons donc analyser comment Joomla englobe les articles et se servir de ce conteneur. Nous constatons alors que Joomla se sert d'un div "item-content".

Nous pouvons donc l'utiliser pour que cette astuce fonctionne en ajoutant à notre feuille de style CCS, ces trois règles :

/* ==== VIDEO RESPONSIVE POUR JOOMLA ==== */
:root {
  --margin: .1rem;
}

div.item-content {
  padding: 0 var(--margin);
  max-width: 100%;
}

iframe[src*="youtube"],
iframe[src*="vimeo"],
iframe[src*="dailymotion"],
iframe[src*="allocine"],
object[data*="youtube"],
object[data*="vimeo"],
object[data*="franceculture"],
object[data*="bpi.fr"],
object[data*="franceinter"] {
  max-width: calc(100vw - (var(--margin) * 2));
  max-height: calc((100vw - (var(--margin) * 2)) * 0.5625);
}

Ainsi dans l'éditeur de Joomla, sans besoin d'ajouter un plugin, ni demander aux rédacteurs d'englober leur vidéo dans un conteneur spécial, il leur suffira :

1. D'aller sur la vidéo à intégrer sur YouTube (par exemple) ;
2. De cliquez sur le bouton "Partager" puis "Intégrer" ;
3. Choisir leur options d'intégration en cochant ou non les cases voulues ;
4. Copier le code <iframe ...... /><iframe>  ;
5. Ouvrir l'éditeur de Joomla dans l'article à éditer ;
6. Cliquer sur "Insérer" > "Média" > "Intégrer" ;
7. Coller le code (copié sur YouTube) ;
8. Puis sur le bouton "Enregistrer" ;
9. Enfin sauvegarder l'article par le bouton "Enregistrer" ou "Enregistrer et Fermer".

Explications

• Cette astuce repose sur l'analyse les marges du conteneur "item-content" déjà présent et en créant une variable :root --margin
  Ainsi nous pouvons recalculer la taille de la vidéo en 16:9 ;

• Remarquez également que j'ai intentionnellement mis la valeur de :root --margin à 0.1 em pour que les articles ne souffrent pas de trop de marge ;
• J'ai également appliqué ce style à d'autres sites que YouTube et Vimeo, à savoir dailymotion, allocine, franceculture, la bpi (la bibliothèque publique d'information) et franceinter, mais aussi les vielles balises "object" (pour de vieux sites). Libre à vous d'en supprimer ou de modifier ces règles selon les vos besoins.

Quelques liens pour aller plus loin

• Comment créer un Template enfant sous Joomla 4
• Comment insérer des vidéos dans des articles sous Joomla 4
• X[Y*="foo"] le sélecteurs CSS
• La pseudo-classe :root
• Les propriétés personnalisées CSS : Les variables CSS
• L'élément iframe
• Source de cette astuce : Responsive iframe without a parent container

3- Et pour Wordpress ?

Bien sûr vous pouvez utiliser cette astuce sur Wordpress et d'autres CMS, en identifiant le div ou le tag contenant les articles et en adaptant ces instructions CSS.
Par exemple en l'appliquant sur le tag <article> tout simplement. Ce qui donnerait :

/* ==== VIDEO RESPONSIVE POUR WORDPRESS ==== */
:root {
  --margin: .1rem;
}

article {
  padding: 0 var(--margin);
  max-width: 100%;
}

iframe[src*="youtube"],
iframe[src*="vimeo"],
iframe[src*="dailymotion"],
iframe[src*="allocine"],
object[data*="youtube"],
object[data*="vimeo"],
object[data*="franceculture"],
object[data*="bpi.fr"],
object[data*="franceinter"] {
  max-width: calc(100vw - (var(--margin) * 2));
  max-height: calc((100vw - (var(--margin) * 2)) * 0.5625);
}