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.
  • Sie haben Zugriff auf die Bearbeitung Ihrer Website (Back-Office, Theme-Editor oder HTML-Dateien).

Zugang zum OVHcloud Kundencenter

  • Direktlink:
  • So gelangen Sie zu Ihren Diensten: Web Cloud > Video Center

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
Schritt 2
Schritt 3

Rufen Sie die Seite in Ihrem OVHcloud Kundencenter auf.

Video Center-Seite mit den auf dem Konto gehosteten Videos

Wählen Sie Ihr Angebot aus der Liste aus.

Der Code sieht wie folgt aus:

<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: File Transfer Protocol, Deployment usw.).

Beispielergebnis in Ihrer HTML-Datei:

<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 +, 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 Vorschau, um die Darstellung vor der Veröffentlichung zu überprüfen.
  • Veröffentlichen: Klicken Sie auf Aktualisieren oder Veröffentlichen.
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:

<!-- 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:

<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:

<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 Einstellungen > Lesen 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

Für spezialisierte Dienstleistungen (SEO, Entwicklung usw.) wenden Sie sich an unsere OVHcloud Partner.

Treten Sie unserer User Community bei.

War diese Seite hilfreich?