---
title: "[Vidéo] Intégrer une vidéo hébergée sur Viméo ou Youtube dans votre cours"
description: "En intégrant des **vidéos de Vimeo ou YouTube** dans vos cours en ligne, vous **enrichissez l'expérience** d'apprentissage et **augmentez l'engagement**des étudiants. Cet article explore des méthodes efficaces pour **diffuser des vidéos** dans divers contextes éducatifs, notamment via des activités **pages**,…"
url: "https://pimenko.com/docs/diffuser-des-ressources-et-creer-des-pages-de-contenu-moodle/integration-videos-vimeo-youtube-enseignement-en-ligne/"
updated: "2025-07-29"
category: Diffuser des contenus ou créer des ressources intéractives
---

# [Vidéo] Intégrer une vidéo hébergée sur Viméo ou Youtube dans votre cours

En intégrant des **vidéos de Vimeo ou YouTube** dans vos cours en ligne, vous **enrichissez l'expérience** d'apprentissage et **augmentez l'engagement**des étudiants. Cet article explore des méthodes efficaces pour **diffuser des vidéos** dans divers contextes éducatifs, notamment via des activités **pages**, **forums** et **quizs**.

Apprenez comment**optimiser l'affichage et les fonctionnalités**des vidéos hébergées sur Vimeo et YouTube pour garantir une utilisation optimale et cohérente sur tous les appareils, y compris les smartphones, tablettes et ordinateurs.
Que vous souhaitiez ajouter une vidéo à une activité **page**, enrichir les **descriptions de cours**, dynamiser les discussions de **forums**, ou intégrer du **contenu multimédia dans des quiz**, suivez nos conseils pour une intégration réussie dans votre environnement d'apprentissage en ligne.

Pour choisir votre éditeur de texte par défaut, veuillez [consulter ce guide](https://pimenko.com/docs/choisir-editeur-texte-formation/).

## Intégration d'une vidéo via l'éditeur de texte Atto ou l'éditeur TinyMCE

1) **Récupérez le lien / URL** de votre vidéo sur le site Viméo/Youtube.

2) Rendez-vous dans une activité de type « **page** », un **message de forum** ou toute autre **fonctionnalité permettant l'utilisation de l'éditeur de texte**.

[![Mascotte rouge](https://pimenko.com/content/uploads/2021/03/Mascotte_rouge.png)](https://pimenko.com/content/uploads/2021/03/Mascotte_rouge.png)

Si vous utilisez Atto
 3) Dans l'éditeur de texte, cliquez sur le bouton « **Insérer ou modifier un fichier audio/vidéo** ».
 Si vous souhaitez enregistrer directement une vidéo, vous pouvez cliquer sur le bouton "**Enregistrer une vidéo**" (icône caméra).

 [![bouton vidéo éditeur Atto](https://pimenko.com/content/uploads/2021/03/Atto_video.jpg)](https://pimenko.com/content/uploads/2021/03/Atto_video.jpg)

Si vous utilisez TinyMCE
 3) Dans l'éditeur de texte, cliquez sur l'icône « **Insérer ou modifier un fichier audio/vidéo** ».

 [![bouton vidéo éditeur TinyMCE](https://pimenko.com/content/uploads/2021/03/TinyMCE_video.png)](https://pimenko.com/content/uploads/2021/03/TinyMCE_video.png)

Si vous souhaitez enregistrer directement une vidéo, vous pouvez cliquer sur le bouton "**Menu d'enregistrement vidéo**" (icône caméra) puis sur "**Enregistrer une vidéo**" ou « **Enregistrer l'écran** ».

   [![capture enregistrement vidéo](https://pimenko.com/content/uploads/2021/03/image.png)](https://pimenko.com/content/uploads/2021/03/image.png)

4) Dans la fenêtre surgissante, collez le lien de la vidéo.
**Des options d'affichage** pour la taille de la vidéo sont disponibles dans l'onglet « **Options d'affichage** »

   [![fenêtre insérer vidéo paramètres](https://pimenko.com/content/uploads/2021/03/fenetre_video_option_affichage.png)](https://pimenko.com/content/uploads/2021/03/fenetre_video_option_affichage.png)

Dans l'onglet « **Réglages avancés** », vous pouvez choisir :

- si les commandes du lecteur doivent être disponibles ou non
- si la vidéo doit être lancée automatiquement
- si le son doit être activé de base ou non
- ou encore si la vidéo doit tourner en boucle.

   [![fenêtre insérer vidéo paramètres](https://pimenko.com/content/uploads/2021/03/fenetre_video_option_affichage.png)](https://pimenko.com/content/uploads/2021/03/fenetre_video_option_affichage.png)

Votre vidéo a bien été intégrée au contenu de la page.

     [![](https://pimenko.com/content/uploads/2021/03/Capture-decran-2025-07-28-162858-1.png)](https://pimenko.com/content/uploads/2021/03/Capture-decran-2025-07-28-162858-1.png)

5) Cliquez sur "**Insérer média**" puis sur "**Enregistrer et afficher**" dans les paramètres de la page.

## Intégration d'une vidéo via le code HTML

Bien que l'ajout de médias soit possible via un bouton dans les éditeurs de texte, vous pouvez aussi **insérer directement** des vidéos dans vos cours en utilisant du**code HTML**. Cette méthode offre une **flexibilité supplémentaire** et peut être particulièrement utile pour les enseignants souhaitant personnaliser davantage la présentation de leurs cours.

Voici maintenant les étapes à suivre pour pouvoir voir et ajouter du code HTML dans votre zone de contenu, en fonction de l'éditeur de texte.

Atto
1) Cliquez sur la flèche vers le bas (1) puis sur l'icône **"</>"** (2) pour afficher le code source HTML.

[![bouton code source éditeur Atto](https://pimenko.com/content/uploads/2021/03/Atto_code-1.jpg)](https://pimenko.com/content/uploads/2021/03/Atto_code-1.jpg)

TinyMCE
1) Cliquez sur l'onglet **"Outils"**, puis sur l'icône **"<> Code source"** pour afficher le code source HTML.

[![bouton code source éditeur tinyMCE](https://pimenko.com/content/uploads/2021/03/TinyMCE_code.jpg)](https://pimenko.com/content/uploads/2021/03/TinyMCE_code.jpg)

[![Mascotte bleue](https://pimenko.com/content/uploads/2021/03/Mascotte_bleue.png)](https://pimenko.com/content/uploads/2021/03/Mascotte_bleue.png)

2) Une fois dans le code source HTML, il vous suffit d'**ajouter le code** suivant à l'endroit souhaité :

```
<video width="320" height="240" controls>
  <source src="chemin_de_la_video.mp4" type="video/mp4">
</video>
```

3) Remplacez "**chemin_de_la_video.mp4**" par le lien (URL) de votre vidéo.
Exemple :

```
<video width="320" height="240" controls="">
    <source src="https://www.youtube.com/watch?v=XHmC5MqwHUY" type="video/mp4">
</video>
```

Atto
4) Cliquez sur la flèche vers le bas (1) puis sur l'icône **"</>"** (2) pour afficher le code source HTML.

[![](https://pimenko.com/content/uploads/2021/03/atto_code2-1.png)](https://pimenko.com/content/uploads/2021/03/atto_code2-1.png)

TinyMCE
4) Cliquez sur l'onglet **"Outils"**, puis sur l'icône **"<> Code source"** pour afficher le code source HTML.

[![](https://pimenko.com/content/uploads/2021/03/TinyMCE_code2-1.png)](https://pimenko.com/content/uploads/2021/03/TinyMCE_code2-1.png)

Puis **enregistrez**.

5) Enfin, pour conserver l'intégration de la vidéo et vérifier son rendu sur votre page, cliquez sur « **Enregistrer et afficher** ».
