Chapitre 90 | Intégration d’une vidéo YouTube

Intégration d’une vidéo YouTube dans une page web

Objectifs

Comprendre comment intégrer une vidéo YouTube sur une page web.
Utiliser un code CSS pour rendre l’intégration responsive.
Tester le résultat dans un environnement en ligne comme CodePen pour créer une toolbox personnelle.

Introduction : à quoi sert un iframe ?

Un iframe est un élément HTML qui permet d’intégrer un contenu externe à une page web. Par exemple, vous pouvez afficher une vidéo, un document ou une autre page web à l’intérieur de votre site.

Dans ce chapitre, nous allons apprendre à intégrer une vidéo YouTube de manière responsive. Nous utiliserons la vidéo suivante comme exemple : https://youtu.be/UCRi8niBIbA.

Récupérer le code d’intégration

Rendez-vous sur la page YouTube de la vidéo : Vidéo exemple.
Cliquez sur le bouton Partager sous la vidéo.
Sélectionnez Intégrer.
Copiez le code HTML proposé par YouTube.

Vous pouvez aussi survoler la vidéo et cliquez droit et sectionner « copy embed code«

Exemple de code :

<iframe width="1163" height="654" src="https://www.youtube.com/embed/UCRi8niBIbA" title="Placeholder Video Muybridge by VPG" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Intégration sur une page HTML

Dans VS Code, créez un fichier HTML minimal :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intégration Vidéo</title>
</head>
<body>
    <h1>Intégration d’une vidéo YouTube</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/UCRi8niBIbA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>

Testez la page dans votre navigateur.

Vous remarquerez que la vidéo n’est pas responsive : elle conserve des dimensions fixes (560×315).

Ajouter un code CSS pour rendre la vidéo responsive

Nous allons utiliser une technique basée sur un conteneur parent pour gérer les proportions de l’iframe.

Ajout du CSS responsive

Ajoutez le style suivant dans une balise <style> dans l’en-tête de votre fichier HTML ou dans un fichier CSS externe :

<style>
.responsive-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

Modification du code HTML

Encapsulez l’iframe dans un conteneur avec la classe .responsive-video :

<div class="responsive-video">
    <iframe src="https://www.youtube.com/embed/UCRi8niBIbA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

Testez à nouveau

Rechargez la page dans votre navigateur. La vidéo est maintenant responsive et s’adapte à la largeur de l’écran.

Finalisation

Maintenant il reste à contraindre le parent pour donner la largeur souhaité. Nous allons englobé le conteneur « responsive-video » dans un conteneur parent « le-conteneur-de-la-video ».

Et nous donnerons la valeur souhaitée dans le CSS.

Voici le code :

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intégration Vidéo</title>
</head>
<body>
    <h1>Intégration d’une vidéo YouTube</h1>

    <div class="le-conteneur-de-la-video">
        <div class="responsive-video">
            <iframe 
                src="https://www.youtube.com/embed/UCRi8niBIbA" 
                title="YouTube video player" 
                frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                allowfullscreen>
            </iframe>
        </div>
    </div>
</body>
</html>

Voici le CSS

.responsive-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.le-conteneur-de-la-video {
  max-width:600px;
}

Tester sur CodePen

Pour garder une trace de votre travail et créer une toolbox accessible, ouvrez CodePen et reproduisez votre code HTML et CSS. Sauvegardez le projet pour une utilisation future.

Tester sur Chrome via VsCode

Passer sur VScode pour visualiser sur navigateur et modifier la taille de la fenêtre pour vérifier le responsive. Pour vraiment apprécier la solution, changez la taille du conteneur vidéo et passer la à 1500px.

.le-conteneur-de-la-video {max-width: 1500px;}

Bien sur le mieux est de tester sur son mobile !

Dès que possible, il faudra travailler en ligne pour faire les tests de responsive sur un terminal réel de type smartphone. Vous pouvez tester en attendant avec la console F12.

Récapitulatif

Iframe : Permet d’intégrer des contenus externes, comme une vidéo YouTube.
Code CSS responsive : Utilisation d’un conteneur parent avec des proportions calculées pour adapter la vidéo à toutes les tailles d’écran.
CodePen : Un outil idéal pour sauvegarder et partager vos exemples de code en guise de ToolBox HTML CSS.

N’oubliez pas de conserver ce code dans votre toolbox pour réutiliser cette technique dans vos futurs projets !