# HTML : comment intégrer une vidéo sur son site Web ?

Depuis la mise à jour HTML5, un élément natif permet d’intégrer des vidéos en tant que contenu Web à part entière. Vous avez également la possibilité d’externaliser l’hébergement de la vidéo à des fournisseurs tels que YouTube ou Vimeo. Découvrez ici comment faire !

## Intégrer des vidéos avec HTML5

HTML5 transforme l’intégration de vidéos en un jeu d’enfant. Tout ce dont vous avez besoin est un élément vidéo natif, pouvant être élargi avec des caractéristiques optionnelles. Le code suivant vous montre un exemple d’intégration de ressources vidéo dans le code source de votre site Web :

```html
<video src="exemple.mp4" width="320" height="240" controls poster="vignette.jpg">
    <p>Cette vidéo ne peut être affichée sur votre navigateur.<br>
    Une version est disponible en téléchargement sous <a href="URL">adresse du lien</a>.</p>
</video>
```

L’élément `video` en exemple contient l’URL de la ressource vidéo (`src="exemple.mp4"`) ainsi que les attributs optionnels `width`, `height`, `controls` et `poster`, définissant comment la vidéo est représentée sur le site. Le texte entre la balise d’introduction et de conclusion de l’élément vidéo est seulement affiché si le navigateur ne peut représenter la vidéo. Les administrateurs de sites Web utilisent généralement cette fonction pour proposer à leurs visiteurs une description alternative ainsi qu’un lien pour le téléchargement de la ressource en question.

### Attributs optionnels des éléments vidéo HTML5

Si un attribut est intégré à un élément `video`, ce dernier doit contenir un lien vers la ressource en tant qu’attribut `src` ou élément enfant `source`. L’élément `video` peut être élargi via les attributs présentés ci-dessous :

<table>
  <thead>
    <tr>
      <th>Attribut</th>
      <th>Fonction</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`width`/`height`</td>
      <td>Les attributs `width` et `height` permettent d’indiquer les dimensions de votre vidéo. S’ils ne sont pas spécifiés, l’élément vidéo accède aux informations sur la taille du fichier vidéo. Si vous n’utilisez qu’un seul des deux attributs, le navigateur ajustera automatiquement le rapport hauteur/largeur.</td>
    </tr>
    <tr>
      <td>`controls`</td>
      <td>L’attribut `controls` permet d’afficher la barre de contrôle native du navigateur. Vous pouvez également définir vos propres contrôles via JavaScript.</td>
    </tr>
    <tr>
      <td>`poster`</td>
      <td>L’attribut `poster` vous permet de faire référence à un fichier image qui sera affiché en tant qu’aperçu de la vidéo. Si cet attribut n’est pas présent, la première image de la vidéo sera utilisée comme aperçu.</td>
    </tr>
    <tr>
      <td>`autoplay`</td>
      <td>Cet attribut indique au navigateur de lancer automatiquement les vidéos une fois que la page Web est chargée.</td>
    </tr>
    <tr>
      <td>`loop`</td>
      <td>Si vous utilisez l’attribut `loop`, la vidéo sera lue en boucle.</td>
    </tr>
    <tr>
      <td>`muted`</td>
      <td>L’attribut `muted` permet de mettre en sourdine le son de la vidéo.</td>
    </tr>
    <tr>
      <td>`preload`</td>
      <td>L’attribut `preload` indique au navigateur comment le fichier vidéo doit être préchargé. Trois valeurs sont disponibles : la valeur standard `auto` charge l’ensemble du fichier normalement, la valeur `preload metadata` charge uniquement les métadonnées en avance et la valeur `none` empêche le chargement automatique du fichier vidéo.</td>
    </tr>
  </tbody>
</table>

Note Utilisez des liens texte à l’intérieur de l’élément `video` pour fournir **des fichiers de téléchargement séparés** à la vidéo, pour intégrer des vidéos en HTML et rendre ces contenus vidéo accessibles sur votre site Web aux utilisateurs qui utilisent de très anciennes versions de navigateur !

### Prise en charge du codec HTML5

La spécification HTML5 définit l’élément `video` et l’[interface de programmation](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/quest-ce-quune-api/) correspondante, mais **ne donne aucune indication sur l’encodage vidéo**. Le choix du format vidéo peut donc poser problème. Chaque format vidéo courant, qu’il s’agisse de [WebM](https://www.ionos.fr/digitalguide/sites-internet/creation-de-sites-internet/webm/), Ogg Theora ou H.264, présente des avantages et des inconvénients. Il n’existe pas à ce jour de norme commune à tous les navigateurs. Le tableau ci-dessous résume la prise en charge des codecs vidéo par les principaux navigateurs :

<table>
  <thead>
    <tr>
      <th>Navigateur</th>
      <th>H.264 (AVC)</th>
      <th>H.265 (HEVC)</th>
      <th>AV1</th>
      <th>VP9</th>
      <th>Ogg Theora</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Edge</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td></td>
      <td></td>
      <td>\*</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Chrome</td>
      <td></td>
      <td>\*</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Safari</td>
      <td></td>
      <td></td>
      <td></td>
      <td>\*</td>
      <td></td>
    </tr>
    <tr>
      <td>Opera</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

\*partiellement

Pour éviter les **incompatibilités**, il est donc recommandé de fournir différents formats lorsque vous intégrez une vidéo dans votre site Web. L’élément `video` permet à cet effet d’inclure différentes ressources vidéo via l’élément enfant `source` et de les marquer avec l’attribut `type` pour le navigateur Web :

```html
<video width="320" height="240" controls poster="vignette.jpg">
    <source src="exemple-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="exemple-vp9.webm" type="video/webm; codecs=vp9">
    <source src="exemple.mp4" type="video/mp4; codecs=avc1.42E01E">
    Votre navigateur ne prend pas en charge la balise vidéo.
</video>
```

Lorsque des éléments `source` alternatifs avec un attribut `type` approprié sont intégrés dans l’élément `video`, le navigateur sélectionne automatiquement le format vidéo qu’il préfère lors du chargement de la page. Il est important de noter que, dans ce type d’intégration, l’élément `video` ne doit pas contenir d’attribut `src` avec une ressource directement renseignée.

## Intégrer une vidéo sur un site Web via une plateforme vidéo

Si vous ne souhaitez pas intégrer une vidéo avec HTML, vous pouvez recourir à un [hébergeur vidéo](https://www.ionos.fr/digitalguide/web-marketing/vendre-sur-internet/hebergement-video/) externe spécialisé. Les plateformes telles que YouTube et Vimeo offrent la possibilité de télécharger gratuitement les documents vidéo et d’intégrer ces vidéos à votre site Web grâce à un code embarqué.

Etant donné que les plateformes vidéo s’assurent que vos contenus soient compatibles avec les navigateurs Web les plus courants, les formats utilisés par ces fournisseurs de service sont aussi compatibles avec la plupart des appareils mobiles. L’[externalisation](https://www.ionos.fr/digitalguide/startup/gestion/sous-traitance/) de clips vidéo présente l’avantage que votre serveur ne verra pas sa charge de données augmenter à cause du streaming vidéo. Les administrateurs devraient cependant s’informer sur les conditions d’utilisation de l’hébergement vidéo utilisé au préalable et adapter le code embarqué selon leurs propres exigences.

Si vous souhaitez par exemple intégrer une vidéo YouTube, vous pouvez charger la page correspondante sur YouTube et copier le code embarqué dans votre menu d’intégration d’éléments. Les réglages généraux peuvent y être effectués pour définir les dimensions des vidéos ainsi qu’activer une barre de menu et le titre de la vidéo. Pour empêcher que des contenus étrangers apparaissent sur votre propre page, la fonction de lecture automatique de vidéos recommandées peut être désactivée. Cette plateforme vidéo peut en effet afficher sur le lecteur intégré de votre site des contenus d’autres utilisateurs aux mots-clés similaires, voire afficher des vidéos de concurrents directs.


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/creation-de-sites-internet/comment-integrer-une-video-sur-votre-site-avec-html/](https://www.ionos.fr/digitalguide/sites-internet/creation-de-sites-internet/comment-integrer-une-video-sur-votre-site-avec-html/) for AI/LLM consumption.