Le TP long : d'autres exemples

Section "en vedette" avec flexbox

L'utilisation de flexbox permet dans cet exemple de disposer les éléments vedettes sur une, deux ou trois colonnes, selon la largeur de la fenêtre du navigateur.

Vidéo fluide et réactive

Dans le cadre du TP long, vous devez insérer au moins deux vidéos dans votre site. Comme le reste des éléments, ces vidéos doivent être fluides et éventuellement réactives.

Vidéo imbriquée avec video

Il est assez simple de rendre une vidéo fluide lorsqu'elle est insérée à l'aide de la balise <video> tel que nous l'avons fait pour l'entête du TP9.

            <video controls poster="images/poster.jpg">
              <source src="video.mp4" type="video/mp4">
              <source src="video.webm" type="video/webm">
              Votre navigateur ne peut lire cette video. 
            </video>
          

Il s'agit d'utiliser la propriété width avec une valeur en pourcentage; la hauteur sera ajustée automatiquement en fonction du ratio initial de la vidéo :

            video {
              width: 100%;
              height: auto;
              vertical-align: bottom;
            }
          

Vidéo imbriquée avec iframe

Vous pouvez imbriquer dans vos pages HTML des vidéos en povenance de Youtube ou Vimeo (la taille de cette vidéo est ensuite ajustée par une règle de style):

Il suffit de:

1. Cliquer sur le bouton «Partager» sous une vidéo Youtube par exemple;
2. Cliquer ensuite sur le bouton «Intégrer» dans la fenêtre qui s'ouvre;
3. Copier le code d'intégration, et le coller dans votre document HTML à l'endroit voulu;
4. Pour rendre la vidéo fluide, vous devez retirer du code les attributs width et height et gérer le tout par CSS.

Dans le cas d'une vidéo imbriquée avec iframe, la solution pour la fluidité est cependant plus élaborée qu'avec l'élément video.

Précisons d'abord que la hauteur d'un élément iframe ne s'ajuste pas automatiquement en proportion de sa largeur, comme c'est le cas des éléments video et img.

En conséquence, s'il est facile de rendre la largeur de l'élément iframe fluide en utilisant l'unité %, il en va autrement de sa hauteur.

Nous devons en effet utiliser une astuce pour rendre la hauteur du iframe fluide afin de respecter le ratio naturel de la vidéo.

Cette astuce met à profit les propriétés suivantes de la marge interne (padding) :

1. la taille d'une marge interne, dans n'importe quelle direction, peut être relative à la largeur de l'élément auquel elle est rattachée ;
2. le contenu d'un élément peut déborder dans la marge interne s'il est positionné en absolu.

Dans un premier temps, il faut créer un conteneur parent (div) pour l'élément iframe, et l'identifier avec une classe, comme le montre cet exemple :

            <div class="video-enveloppe">
              <iframe src="[adresse de la vidéo imbriquée]" allowfullscreen></iframe>
            </div>
          

La mise en forme correspondante :

            .video-enveloppe {
                position: relative; /* Devient la référence pour le positionnement de iframe */
                padding-bottom: 56.25%; /* Produit un ratio de 16:9 par rapport à la largeur */
                height: 0; /* Assure que la hauteur de l'élément = padding-bottom seulement */
              }
              
            .video-enveloppe iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%; /* 100% du parent dont la hauteur = padding-bottom */
              }
            

Voir cet exemple sur Code Pen :