Devis Gratuit - Entretien préalable sans engagement

Contacter les Tontons Codeurs, le gang complice de vos projets de communication :

09 51 25 19 77
06 51 01 56 70
nous écrire

Obliger YouTube à suivre votre page responsive

11 mai 2016

Vous avez pu constater que les articles du site sont parfois agrémentés d'une vidéo venant de YouTube. Récemment j'ai planché sur le problème que ça représentait de la faire loger (entière) dans la page quelle que soit sa largeur. Pour ceux qui auraient pas suivi ce qu'est le responsive web design, je l'ai déjà raconté ici.

Comme de nombreux sites vous proposant de répercuter leur exact contenu (un morceau, hein !) YouTube vous fournit une ligne de code qui consiste en une iframe.

Toute la difficulté va être de lui faire avaler des dimensions dictées par le contexte de la page dans laquelle on l'enchâsse (embed en anglais) alors que l'iframe a ses propres paramètres. En effet, notre feuille de style est impuissante sur du contenu qui, en l'occurrence est contrôlé par YouTube.

Après quelques minutes de recherche, j'ai pu voir plusieurs confrères en arriver à la même conclusion : placer l'iframe dans un conteneur dont on maîtrise les dimensions.
<div class="iframe_container"></div>

Premier cas de figure : un champ exprès

Là, c'est facile.

Le rendu du champ par Drupal va nous fournir une div pour y loger notre iframe. On connait sa classe grâce au nom machine du champ donc pourra donc lui appliquer les styles nécessaires. C'est parti !
position: relative;
Ça mange pas de pain, ça laissera notre div dans le flux normal et surtout c'est utile comme repère pour tout ce qui sera dedans.
padding: 35px 0 56.25%;
Là ça devient étrange, 35px en haut, c'est un paramètre arbitraire spécifique à YouTube, soit. Autant le savoir. Les côtés restent à zéro et le bas c'est le rapport 16:9 de sorte à s'assurer que même vide, juste via sa marge interne, notre div est toujours haute de 56,25% de sa largeur. Vous suivez ? Pour un ratio de 3:4 il vous faudra indiquer 75%.
Partant de là, on peut se permettre de ne plus avoir de hauteur du tout
height: 0;
En prime, on ajoute
overflow: hidden;
pour que «ça dépasse pas». Ce qui nous donne :

  1. .field-name-mon_champ_expres,
  2. .iframe_container_16-9 {
  3. height: 0;
  4. overflow: hidden;
  5. padding: 35px 0 56.25%;
  6. position: relative;
  7. }

L'intérieur du dedans

Passons maintenant à ce qui nous intéresse : le contenu enchâssé.

  1. .field-name-mon_champ_expres iframe,
  2. .iframe_container_16-9 iframe {
  3. height: 100%;
  4. left: 0;
  5. position: absolute;
  6. top: 0;
  7. width: 100%;
  8. }

Notre iframe enchâssée va automatiquement occuper tout l'espace disponible et pas davantage vu que le conteneur la contraint à des proportions que nous avons déjà établies. Un contenu dont la position est absolute ne peut occuper 100% de la largeur de son conteneur que si sa position est spécifiée. Par ailleurs, la position absolute, exige un point de repère. Or on s'est assuré que le parent immédiat a la position relative spécifiée, donc il est remplissable en entier et il sert lui-même de point de repère, ancré dans le flux, sans risque pour son rejeton de remonter tout en haut de la page.
Elle est pas belle la vie ?

Et c'est tout. Notre video YouTube va se placer dans son conteneur adaptatif et occuper toute la place disponible et rien que la place qu'on lui laisse.

Plus complexe : une iframe dans le corps de texte

Rien de très sorcier. Il suffit de nous assurer que la div qui nous fait besoin encadre bien l'iframe qu'on va coller. Problème cependant. Si CKEditor nous fournit un bouton réceptacle à ce qu'on a copié de YouTube, il nous faut encore taper manuellement <div class="container_chose"> au bon endroit.
Pas très ergonomique pour le rédacteur qui met rarement le nez dans le code. Difficilement défendable vis-à-vis d'un client qui veut du «clefs en main». On va donc leur simplifier la tâche avec un bouton à cliquer.
CKEditor nous permet déjà de sélectionner un bout de texte pour le passer en gras ou en faire un titre (h1,h2 …) Nous allons mettre ces fonctionnalités à profit pour ajouter notre div à la gamme. Vous pouvez consulter ma source en VO ici.

On commence par s'assurer d'avoir parmi les boutons le déroulant «Styles».

Dans un nouvel onglet, allez à Configuration > Rédaction de contenu > CKEditor
Choisissez un profil et cliquez sur «modifier» (dans mon cas «Full HTML», j'utilise rien d'autre)
Dans la page qui s'ouvre, dépliez «Apparence de l'éditeur» et là glissez le déroulant «Styles» où bon vous semble parmi les boutons. Enregistrez vos changements et gardez l'onglet ouvert, on y reviendra.

Vous allez maintenant personnaliser le fichier ckeditor.styles.js. L'original se trouve (vraissemblablement) dans /sites/all/modules/ckeditor/ckeditor.styles.js (je vois aussi indiqué /sites/all/modules/contrib/ckeditor/ckeditor.styles.js). Vous le recopiez à la racine de votre thème avant la moindre modification.
En l'ouvrant vous découvrez le contenu du déroulant indiqué dans un format JSON très intelligible. On y apprend l'existence d'une série de gadgets comme “Blue Title” que vous êtes libres de commenter.

  1. { name : 'nom_dans_le_déroulant' ,
  2. element : 'balise' ,
  3. attributes : {
  4. 'attribut' :
  5. 'valeur'
  6. }
  7. },

on va donc y mettre le notre :

  1. { name : 'Conteneur YouTube 16/9' ,
  2. element : 'div' ,
  3. attributes : {
  4. 'class' :
  5. 'iframe_container_16-9'
  6. }
  7. },

Vous enregistrez (et téléversez à la racine de votre thème en distant, naturellement).

Maintenant il va falloir que Drupal vous montre le déroulant avec votre ajout.

Vous retournez dans l'onglet de modification de votre profil CKEditor (que vous avez soigneusement laissé ouvert, n'est-ce pas ?) Cette fois vous dépliez «CSS». On laisse de côté les deux premiers champs, on n'interviendra que sur les deux derniers.

  • Styles prédéfinis, choisissez «Définir le chemin de ckeditor.styles.js», c'est l'option qui fonctionne le mieux si vous faites des modifications ultérieures.
  • Chemin des styles prédéfinis, vous venez de demander à l'utiliser, il faut donc donner une adresse. Tapez %t (pour renvoyer à la racine de votre thème) suivi du nom du fichier, assorti de ?v1parce que c'est la première version.

%t/ckeditor.styles.js?v1

Si vous tâtonnez et revenez changer quelque-chose, n'oubliez pas de venir indiquer v2 et ainsi de suite.

Vous videz les caches, juste pour être sûr, et c'est prêt. Dans le corps de texte, vous pouvez sélectionner votre iframe (elle sera mise en évidence comme une image) et l'encadrer des balises adéquates grâce à un clic sur votre déroulant tout neuf.

Mars de Cheissoux, un fondu qui travaille qu'à l'éditeur de texte (avec coloration syntaxique)