# HTML: Video einbinden auf der eigenen Website

Seit HTML5 existiert ein natives Element, mit dem sich Videos als vollwertige Webinhalte einbinden lassen. Alternativ haben Sie die Möglichkeit, das Video-Hosting an Anbieter wie YouTube oder Vimeo auszulagern. Wir zeigen Ihnen, wie das funktioniert.

## HTML5 – Videos einbinden leicht gemacht

HTML5 macht das Einbinden von Videos kinderleicht. Alles, was Sie dazu benötigen, ist das native Element `video`, das sich um optionale Attribute erweitern lässt. Wie Sie **Videoressourcen dem Quellcode Ihrer Website hinzufügen**, zeigt folgendes Codebeispiel:

```html
<video src="beispiel.mp4" width="320" height="240" controls poster="vorschaubild.jpg">
    <p>Dieses Video kann in Ihrem Browser nicht wiedergegeben werden.<br>
    Eine Download-Version steht unter <a href="URL">Link-Adresse</a> zum Abruf bereit.</p>
</video>
```

Das `video`-Element im Beispiel enthält die **URL zur Videoressource** (`src="beispiel.mp4"`) sowie die **optionalen Attribute** `width`, `height`, `controls` und `poster`, die definieren, wie das Video auf der Website dargestellt wird. Text, der zwischen dem einleitenden und dem abschließenden Tag des Video-Elements steht, wird nur dann angezeigt, wenn ein Browser das Video nicht darstellen kann. Webseitenbetreibende nutzen diese Funktion in der Regel, um eine alternative Beschreibung sowie einen Download-Link zur Ressource anzubieten.

### Optionale Attribute des HTML5-Video-Elements

Wird eine Ressource über das `video`-Element eingebunden, muss dieses den Link zur Ressource entweder als `src`-Attribut oder in einem Kindelement `source` enthalten. Darüber hinaus lässt sich das `video`-Element um folgende Attribute erweitern:

<table>
  <thead>
    <tr>
      <th>Attribut</th>
      <th>Funktion</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`width`/`height`</td>
      <td>Die Attribute `width` und `height` ermöglichen Ihnen, die Abmessungen Ihres Videos anzugeben. Fehlt die Angabe, greift das video-Element auf die Größeninformation der Videodatei zu. Nutzen Sie nur eines der beiden Attribute, passt der Browser das Seitenverhältnis automatisch an.</td>
    </tr>
    <tr>
      <td>`controls`</td>
      <td>Mit dem `controls`-Attribut aktivieren Sie die native Steuerleiste des Browsers. Alternativ lassen sich eigene Steuerelemente per JavaScript definieren.</td>
    </tr>
    <tr>
      <td>`poster`</td>
      <td>Mithilfe des `poster`-Attributs verweisen Sie auf eine Grafikdatei, die als Vorschaubild für das Video angezeigt werden soll. Fehlt dieses Attribut, wird der erste Frame des Videos für die Vorschau verwendet.</td>
    </tr>
    <tr>
      <td>`autoplay`</td>
      <td>Mit dem `autoplay`-Attribut weisen Sie den Browser an, Videos nach dem Website-Aufbau automatisch zu starten.</td>
    </tr>
    <tr>
      <td>`loop`</td>
      <td>Verwenden Sie das `loop`-Attribut, wird das Video in Dauerschleife abgespielt.</td>
    </tr>
    <tr>
      <td>`muted`</td>
      <td>Mit dem `muted`-Attribut stellen Sie den Ton des Videos auf stumm.</td>
    </tr>
    <tr>
      <td>`preload`</td>
      <td>Das `preload`-Attribut gibt dem Browser eine Empfehlung, wie die Videodatei vorgeladen werden soll. Dabei stehen Ihnen drei Werte zur Verfügung: Beim Standardwert `auto` wird normalerweise die gesamte Datei geladen, mit dem Wert `metadata` lädt der Browser lediglich Metadaten vor und der Wert `none` unterbindet das Vorladen von Videodaten.</td>
    </tr>
  </tbody>
</table>

Hinweis Stellen Sie über Textlinks innerhalb des `video`-Elements **separate Download-Dateien** zum Video bereit, um in HTML Videos einzubinden und diese Videoinhalte auf Ihrer Website auch für jene Nutzerinnen und Nutzer zugänglich zu machen, die mit sehr alten Browserversionen arbeiten!

### HTML5-Codec-Support

Die HTML5-Spezifikation definiert das `video`-Element und die zugehörige [Programmierschnittstelle](https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-eine-api/), macht jedoch **keine Vorgaben zur Videocodierung**. Die Wahl des Videoformats stellt Webseitenbetreibende daher vor Probleme. Jedes der gängigen Videoformate wie [WebM](https://www.ionos.de/digitalguide/websites/webseiten-erstellen/webm/), Ogg Theora oder H.264 hat Vor- und Nachteile. Einen gemeinsamen, browserübergreifenden Standard gibt es daher bis dato nicht. Die nachfolgende Tabelle fasst die Video-Codec-Unterstützung der wichtigsten Browser zusammen:

<table>
  <thead>
    <tr>
      <th>Browser</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>

\*nur teilweise

Um **Inkompatibilitäten vorzubeugen**, empfiehlt es sich aus diesem Grund, unterschiedliche Formate bereitzustellen, wenn Sie ein Video in Ihre Website einbinden. Das `video`-Element erlaubt zu diesem Zweck, verschiedene Videoressourcen durch das Kindelement `source` einzubinden und mit dem `type`-Attribut für den Webbrowser auszuzeichnen:

```html
<video width="320" height="240" controls poster="vorschaubild.jpg">
    <source src="beispiel-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="beispiel-vp9.webm" type="video/webm; codecs=vp9">
    <source src="beispiel.mp4" type="video/mp4; codecs=avc1.42E01E">
    Ihr Browser unterstützt das Video-Tag nicht.
</video>
```

Werden alternative `source`-Elemente mit entsprechendem `type`-Attribut ins `video`-Element eingebunden, wählt ein Browser beim Website-Aufbau automatisch das bevorzugte Videoformat. Dabei ist zu beachten, dass das `video`-Element bei dieser Art der Videoeinbettung kein `src`-Attribut mit Ressource enthalten darf.

## Video in Homepage einbinden via Video-Plattform

Wer Videos nicht per HTML einbinden, sondern das [Video-Hosting](https://www.ionos.de/digitalguide/online-marketing/verkaufen-im-internet/video-hosting/) an einen externen Provider auslagern möchte, hat bei Plattformen wie YouTube und Vimeo die Möglichkeit, Videomaterial kostenlos hochzuladen und Clips via **Einbettungscode** in die eigene Website zu integrieren.

Da beliebte Video-Plattformen sicherstellen, dass ihre Inhalte mit allen wichtigen Browsern kompatibel sind, werden die Formate dieser Anbieter auf den meisten Endgeräten unterstützt. [Outsourcing](https://www.ionos.de/digitalguide/startup/unternehmensfuehrung/outsourcing/) von Videoclips hat zudem den Vorteil, dass der eigene Server durch das Streaming nicht zusätzlich belastet wird. Man sollte sich im Vorfeld jedoch über die **Nutzungsbedingungen** des Video-Hostings informieren und den Einbettungscode den eigenen Ansprüchen entsprechend anpassen.

Möchten Sie beispielsweise ein YouTube-Video einbinden, rufen Sie den entsprechenden Clip über die Plattform auf und entnehmen den Code dem Einbettungsmenü. Hier lassen sich auch zentrale Einstellungen vornehmen, um die Abmessungen des Videos zu definieren sowie Steuerelemente und Videotitel zu aktivieren. Um zu verhindern, dass Fremdinhalte auf der eigenen Seite erscheinen, empfiehlt es sich außerdem, die Vorschaufunktion für alternative Videos zu deaktivieren. Andernfalls präsentiert die Video-Plattform **im eingebundenen Player** Inhalte anderer User, denen ähnliche Keywords zugeordnet wurden – im schlimmsten Fall die Videos eines direkten Wettbewerbers bzw. einer direkten Wettbewerberin.

Tipp Lesen Sie in unserem separaten Artikel, wie Sie ein [Video bei YouTube hochladen](https://www.ionos.de/digitalguide/online-marketing/social-media/youtube-video-hochladen/), um dieses anschließend in Ihre Website einzubetten.


This is a markdown version of: [https://www.ionos.de/digitalguide/websites/webseiten-erstellen/mit-html-ein-video-einbinden-so-wirds-gemacht/](https://www.ionos.de/digitalguide/websites/webseiten-erstellen/mit-html-ein-video-einbinden-so-wirds-gemacht/) for AI/LLM consumption.