Adapter une vidéo intégrée aux écrans mobiles

1. Copier le code d’intégration de la vidéo

Sur YouTube, ouvrez la vidéo, puis utilisez Partager et Intégrer pour copier son code HTML.

2. Ouvrir le code HTML de la page

1. Dans l’administration, ouvrez l’éditeur de la page concernée.
2. Cliquez sur le bouton HTML pour accéder au code du contenu.
3. Repérez l’emplacement où vous souhaitez insérer la vidéo.

3. Adapter la largeur et conserver les proportions

Dans la balise iframe de la vidéo, retirez les attributs de largeur et de hauteur fixes, puis ajoutez le style suivant :

style="width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; margin-left: auto; margin-right: auto; border: 0;"

La largeur de 100 % permet à la vidéo d’occuper l’espace disponible. Le réglage aspect-ratio: 16 / 9 conserve les proportions d’une vidéo au format 16:9.

Exemple de code complet

Remplacez IDENTIFIANT_VIDEO par l’identifiant présent dans le code YouTube et adaptez le titre.

<iframe
    src="https://www.youtube.com/embed/IDENTIFIANT_VIDEO"
    title="Titre de votre vidéo"
    style="width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; margin-left: auto; margin-right: auto; border: 0;"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

4. Ajuster la largeur si nécessaire

Pour afficher une vidéo moins large, remplacez width: 100%; par le pourcentage souhaité, par exemple width: 80%;.

Les marges automatiques conservent la vidéo centrée. Le pourcentage correspond à la largeur de la zone de contenu qui contient la vidéo.

5. Enregistrer et vérifier

1. Validez les modifications dans la fenêtre HTML.
2. Enregistrez la page et publiez-la si nécessaire.
3. Ouvrez la page sur votre site.
4. Vérifiez que la vidéo reste dans la zone de contenu et conserve ses proportions.
5. Testez l’affichage et la lecture sur ordinateur et sur téléphone.