---
title: "Video Center - Ein Video auf Ihrer Website einbetten"
description: "Kopieren Sie den Einbettungscode Ihres Videos aus dem Video Center und integrieren Sie es in weniger als 5 Minuten per iframe, CMS-Editor oder WordPress-HTML-Block."
url: https://docs.ovhcloud.com/de/guides/web-cloud/video-center/website-integration
lang: de
lastUpdated: 2026-05-27
---
# Video Center - Ein Video auf Ihrer Website einbetten

## Ziel

**OVHcloud Video Center** ist eine Videohosting-Plattform, die einen Einbettungscode (iframe) erzeugt, mit dem Sie Ihre Videos auf jeder beliebigen Website anzeigen können.

**Diese Anleitung zeigt Ihnen, wie Sie Ihr im Video Center gehostetes Video auf Ihrer Website sichtbar machen, mit responsiver Darstellung auf Mobilgeräten und Desktop.**

Je nach Umgebung werden 3 Methoden behandelt:

- **Einbettungscode (iframe)**: zu verwenden, wenn Sie Zugriff auf den HTML-Code Ihrer Website haben.
- **CMS-Editor (Content Management System)**: geeignet für Wix, Squarespace, Webflow, Joomla und andere gängige CMS.
- **WordPress ohne Plugin**: über den nativen HTML-Block des Gutenberg-Editors.

**Geschätzte Dauer: weniger als 5 Minuten.**

## Voraussetzungen

- Sie verfügen über ein aktives [OVHcloud Video Center](https://www.ovhcloud.com/de/video-center/).
- Sie haben Zugriff auf die Bearbeitung Ihrer Website (Back-Office, Theme-Editor oder HTML-Dateien).


***

### Zugang zum OVHcloud Kundencenter

- **Direktlink:** <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink>
- **So gelangen Sie zu Ihren Diensten:** <code className="action">Web Cloud</code> > <code className="action">Video Center</code>

***


## In der praktischen Anwendung

### Den Einbettungscode Ihres Videos abrufen

Beginnen Sie unabhängig von der gewählten Methode damit, den Einbettungscode aus dem Video Center zu kopieren.

Der Einbettungscode wird vom Video Center automatisch für jedes Video erzeugt und ist auf der jeweiligen Detailseite verfügbar. Klicken Sie auf die Tabs unten, um die **3** Schritte nacheinander anzuzeigen.


**Schritt 1**

Rufen Sie die Seite <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink> in Ihrem OVHcloud Kundencenter auf.
![Video Center-Seite mit den auf dem Konto gehosteten Videos](/images/guides/web-cloud/video-center/website-integration/video-center-selection-plan.png)Wählen Sie Ihr Angebot aus der Liste aus.


**Schritt 2**

Klicken Sie auf der angezeigten Seite auf <code className="action">Zum Video Center</code>.
![Schaltfläche „Zum Video Center“ auf der Angebotsseite](/images/guides/web-cloud/video-center/website-integration/access-video-center.png)

**Schritt 3**

Klicken Sie auf das Video, das Sie einbetten möchten, um dessen Detailseite zu öffnen.
![Schaltfläche Teilen / Einbettungscode mit dem iframe-Code eines Videos im Video Center](/images/guides/web-cloud/video-center/website-integration/integrate-video.png)Klicken Sie auf <code className="action">Teilen</code> oder <code className="action">Einbettungscode</code> und kopieren Sie anschließend den angezeigten Code.


Der Code sieht wie folgt aus:

```html
<iframe
  src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
  width="640"
  height="360"
  frameborder="0"
  allowfullscreen>
</iframe>
```

:::info
Halten Sie diesen Code bereit: Sie benötigen ihn für die 3 nachfolgend beschriebenen Methoden.
:::

### Das Video auf Ihrer Website einbinden

**Wählen Sie die Methode, die zu Ihrer Umgebung passt.**


Methode 1 — Einbettungscode (iframe) in reinem HTML

Verwenden Sie diese Methode, wenn Sie direkten Zugriff auf den HTML-Code Ihrer Seite haben.
- **HTML-Datei Ihrer Seite öffnen**: Öffnen Sie in Ihrem Code-Editor (Visual Studio Code, Dreamweaver usw.) die Seite, auf der Sie das Video anzeigen möchten.
- **Cursor positionieren**: Setzen Sie ihn an die gewünschte Stelle für das Video.
- **Einbettungscode einfügen**: Fügen Sie den aus dem Video Center kopierten Code ein.
- **Speichern und veröffentlichen**: Speichern Sie Ihre Datei und aktualisieren Sie Ihren Server (**FTP**: **F**ile **T**ransfer **P**rotocol, Deployment usw.).
Beispielergebnis in Ihrer HTML-Datei:
```html
<section class="ma-section-video">
  <h2>Ma présentation</h2>

  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    width="640"
    height="360"
    frameborder="0"
    allowfullscreen>
  </iframe>
</section>
```


Methode 2 — CMS-Editor (Wix, Squarespace, Webflow, Joomla…)

Die meisten CMS bieten einen **benutzerdefinierten HTML-Block**, um Code von Drittanbietern in die Seite einzufügen.
- **Den Seiteneditor öffnen**: Öffnen Sie die Seite, auf der Sie das Video anzeigen möchten, zur Bearbeitung.
- **Einen HTML-Block hinzufügen**: Verwenden Sie je nach Ihrem CMS den nachfolgend angegebenen Block.
- **Den Einbettungscode einfügen**: Fügen Sie den aus dem Video Center kopierten iframe-Code in das Feld des HTML-Blocks ein.
- **Bestätigen und veröffentlichen**: Bestätigen Sie die Einfügung und veröffentlichen Sie die Seite.
Zu verwendender Block je nach CMS:
- **Wix**: **Wix App** > **HTML-Code**.
- **Squarespace**: **Block** > **Code**.
- **Webflow**: **Element** > **Embed**.
- **Joomla**: **Editor** > HTML-Filter deaktivieren > Code einfügen.
- **PrestaShop**: **Modul** > **Benutzerdefiniertes HTML**.
:::info
Wenn Ihr CMS iframes aus Sicherheitsgründen filtert, suchen Sie in dessen Einstellungen nach der Option **"Rohes HTML erlauben"** oder **"Inhaltsfilter deaktivieren"**.
:::


Methode 3 — WordPress ohne Plugin (HTML-Block)

WordPress enthält im Gutenberg-Editor nativ einen Block **Benutzerdefiniertes HTML**. Es ist kein Plugin erforderlich.
- **Die Seite oder den Beitrag öffnen**: Öffnen Sie in Ihrem WordPress-Dashboard die Seite oder den Beitrag zur Bearbeitung.
- **Einen Block „Benutzerdefiniertes HTML" hinzufügen**: Klicken Sie auf <code className="action">+</code>, um einen Block hinzuzufügen, und suchen Sie dann **Benutzerdefiniertes HTML** und wählen Sie es aus.
- **Den Einbettungscode einfügen**: Fügen Sie den aus dem Video Center kopierten iframe-Code in den HTML-Block ein.
- **Vorschau anzeigen**: Klicken Sie auf <code className="action">Vorschau</code>, um die Darstellung vor der Veröffentlichung zu überprüfen.
- **Veröffentlichen**: Klicken Sie auf <code className="action">Aktualisieren</code> oder <code className="action">Veröffentlichen</code>.
:::info
Wenn Sie den alten WordPress-Editor (TinyMCE / Klassisch) verwenden, wechseln Sie vor dem Einfügen des Codes in den Modus **Text** (nicht Visuell) und wechseln Sie anschließend wieder in den visuellen Modus, um die Darstellung zu überprüfen.
:::

### Den eingebetteten Videoplayer anpassen


Wie kann ich die Videogröße ändern?

Passen Sie die Attribute `width` und `height` im iframe-Code an:
```html
<!-- Standard fixed size (16:9) -->
<iframe src="..." width="640" height="360" ...></iframe>

<!-- Larger size -->
<iframe src="..." width="1280" height="720" ...></iframe>

<!-- 100% of the container width -->
<iframe src="..." width="100%" height="400" ...></iframe>
```


Wie kann ich das Video auf Mobilgeräten responsiv darstellen?

Umschließen Sie den iframe mit einem CSS-Container für eine flüssige Darstellung auf allen Bildschirmen:
```html
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>
```
:::info
Das Verhältnis `padding-bottom: 56.25%` entspricht dem Format **16:9** (das gängigste). Für ein 4:3-Format verwenden Sie `75%`.
:::


Wie deaktiviere ich den Vollbildmodus?

Entfernen Sie das Attribut `allowfullscreen`, wenn Sie den Vollbildmodus verhindern möchten:
```html
<iframe src="..." width="640" height="360" frameborder="0"></iframe>
```

### Die Integration Ihres Videos überprüfen

Bevor Sie die Integration als abgeschlossen betrachten, überprüfen Sie die folgenden Punkte:

**Auf dem Desktop:**

- Das Video wird auf der Seite korrekt angezeigt.
- Der Player lädt ohne Fehlermeldung.
- Die Wiedergabe startet beim Klick auf Play.
- Der Vollbildmodus funktioniert (falls aktiviert).

**Auf Mobilgeräten:**

- Das Video passt sich der Bildschirmbreite an (responsiv).
- Die Wiedergabe funktioniert unter iOS (Safari) und Android (Chrome).
- Das Video wird nicht von den Bildschirmrändern abgeschnitten.

:::info
Testen Sie auf einem echten Gerät und nicht über den Simulationsmodus Ihres Browsers — das Verhalten kann unter iOS abweichen.
:::

## Häufige Probleme


Warum wird mein Video nicht angezeigt?

Je nach Ursache:
- **Die Einbettungs-URL ist falsch**: Gehen Sie zurück zum Video Center und kopieren Sie den Einbettungscode erneut.
- **Das Video wird noch verarbeitet**: Warten Sie, bis die Kodierung im Video Center abgeschlossen ist, bevor Sie es einbetten.
- **Das CMS filtert iframes**: Aktivieren Sie die Berechtigung für iframes in seinen Einstellungen.
- **Die Website verwendet HTTPS, aber die Einbettungs-URL verwendet HTTP**: Stellen Sie sicher, dass die URL im iframe mit `https://` beginnt.


Warum funktioniert der Ton nicht?

Einige Browser blockieren die automatische Wiedergabe mit Ton. Die manuelle Wiedergabe (Klick auf Play) funktioniert wie erwartet.


Warum ist das Video schlecht dimensioniert oder läuft über?

Verwenden Sie die im Abschnitt **Den eingebetteten Videoplayer anpassen** oben beschriebene responsive Technik mit dem relativen CSS-Container.


Wie behebe ich eine Meldung „Inhalt blockiert" in WordPress?

Gehen Sie in WordPress zu <code className="action">Einstellungen</code> > <code className="action">Lesen</code> und überprüfen Sie, ob externe iframes nicht blockiert sind. Einige Sicherheits-Plugins (Wordfence, iThemes Security) können iframes filtern.
:::warning
Deaktivieren Sie niemals die Sicherheitsfilter Ihres CMS vollständig. Fügen Sie nur die Domain `streaming.media.ovhcloud.com` zur Liste der zulässigen Quellen hinzu, falls diese Option verfügbar ist.
:::

## Weiterführende Informationen

[Verwalten Sie Ihre Videos im OVHcloud Video Center](/de/guides/web-cloud/video-center/manage-videos.md)

Für spezialisierte Dienstleistungen (SEO, Entwicklung usw.) wenden Sie sich an unsere [OVHcloud Partner](https://partner.ovhcloud.com/de/directory/).

Treten Sie unserer [User Community](https://community.ovhcloud.com/) bei.