Les éléments de média

Ajouter un GIF

GIF signifie Graphic Interchange Format (Format d’échange graphique), mais tout ce que tu dois savoir, c’est qu’il s’agit d’un autre type de fichier d’image. La seule différence est que le fichier comporte de nombreuses images. Lorsqu’elles sont affichées dans le navigateur, les images sont lues en séquence, comme les images d’un film. Pense-y comme à l’un de ces livres à feuillets qui donnent l’impression d’une image animée lorsque tu le feuilletes.

Ajouter une vidéo

Outre le texte et les images, les vidéos sont l’un des éléments les plus courants qu’on aime ajouter aux sites Web. Les fichiers vidéo étant très volumineux, il est préférable d’utiliser un service pour télécharger et afficher la vidéo, tel que YouTube. Une fois téléchargée sur YouTube, comment faire pour qu’elle soit diffusée sur notre site web ? On utilise une tag spéciale appelée iframe.

Les iframes affichent le HTML d’autres sites Web à l’intérieur du nôtre. C’est comme une fenêtre, où tu peux voir ce qui se passe à l’extérieur sur Internet à partir du site Web actuel. Ce processus s’appelle “embedding” (l’incorporation).

Par exemple, la vidéo ci-dessous est une iframe provenant de l’Instragram de Benji :

De nombreux sites proposent des iframes à intégrer dans votre site Web. Par exemple, voici comment trouver le code iframe d’une vidéo YouTube :

Voici un exemple d’iframe

Copie le code suivant : <iframe width="560" height="315" src="https://www.youtube.com/embed/lQsqEBSGdyc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

Colle-le dans ton CodePen et il ressemblera à ceci :