Video auf Website einbinden: So geht es richtig

Einleitung

Videos sind auf Websites unverzichtbar geworden. Sie erhöhen die Verweildauer und verbessern das Nutzererlebnis erheblich. In diesem Artikel zeigen wir dir, wie du Videos richtig auf deiner Website einbindest, welche Methoden es gibt und worauf du bei der Ladezeit achten musst.

Die kurze Antwort vorweg: Ein Video bindest du entweder über die URL des Videos ein (bei Baukastensystemen wie WordPress, Wix oder Webflow reicht Kopieren und Einfügen) oder über den Einbettungscode, den dir Plattformen wie YouTube und Vimeo fertig liefern. Selbst gehostete Videos bindest du per HTML-Video-Tag ein. Entscheidend für eine schnelle Website: Videos unterhalb des sichtbaren Bereichs erst laden lassen, wenn der Besucher dorthin scrollt.

Warum Videos auf Websites einbinden?

Vorteile von Videos

• Höhere Engagement-Raten: Videos ziehen die Aufmerksamkeit der Besucher auf sich und fördern die Interaktion.
• Bessere SEO: Ein eingebundenes Video erhöht die Verweildauer messbar, und das wirkt sich positiv auf dein Google-Ranking aus.
• Verbesserte Nutzererfahrung: Videos vermitteln Informationen auf verständliche und ansprechende Weise.
• Verständliche Erklärung des Angebots: Komplexe Produkte oder Dienstleistungen lassen sich durch Videos einfacher erklären.
• Vertrauensaufbau zu Kunden: Authentische Videos stärken das Vertrauen und die Beziehung zu deinen Kunden.

Video auf Website einbinden mit HTML

Die erste Möglichkeit ist, direkt im HTML-Code deiner Website zu arbeiten und das Video an der gewünschten Stelle einzubinden. Hol dir dafür den Einbettungscode des Videos (wo du den findest, zeigen wir weiter unten). So gehst du Schritt für Schritt vor:

1. Geh in den Bearbeitungsmodus der Seite und such die Stelle im Code, an der das Video erscheinen soll.
2. Kopiere den Einbettungscode des Videos und füge ihn an der gewünschten Stelle ein.
3. Speichere deine Änderungen und veröffentliche sie.

Jetzt sollte das Video an der gewünschten Stelle auf deiner Website erscheinen.

Video einbinden in WordPress

Wenn deine Website mit WordPress läuft, ist das Einbinden besonders einfach. Du hast zwei Wege:

• Über die URL: Für Videos von YouTube oder Vimeo reicht es, die URL in den visuellen Editor zu kopieren. Das Video wird automatisch eingebunden.
• Über den Einbettungscode: Falls das mit der URL nicht klappt, geh in den Texteditor (nicht den visuellen Editor) und füge den Einbettungscode ein, wie im HTML-Abschnitt beschrieben.

Video einbinden in Wix oder Squarespace

• Wix: Auch hier kannst du einfach die URL des Videos verwenden. Alternativ nutzt du Wix Video, wenn du eine eigene Datei hochladen willst. Im Editor klickst du auf „Video hinzufügen“ und wählst deine Methode.
• Squarespace: Hier arbeitest du mit Videoblöcken. Füge einen Videoblock zur Seite hinzu und gib die URL (für YouTube oder Vimeo) oder den Einbettungscode ein, wähle ein Vorschaubild, fertig.

Video einbinden in Webflow

In Webflow gibt es drei Wege: das Video-Element für YouTube- und Vimeo-Links (URL einfügen, fertig), das Hintergrundvideo-Element für stumme Deko-Videos und das HTML-Embed für volle Kontrolle über den Code. Für eingebettete Kundenvideos empfehlen wir Vimeo, weil die Qualität beim Einbetten sichtbar besser ist als bei YouTube und der Player werbefrei bleibt. Welche Plattform wofür passt, zeigt unser Vergleich YouTube vs Vimeo.

Wo du den Einbettungscode findest: YouTube, Instagram und HTML

• YouTube: Auf der Seite des Videos unter „Teilen“ auf „Einbetten“ klicken, Code kopieren, auf deiner Website einfügen.
• Instagram: Das Video im Webbrowser öffnen, oben rechts auf die drei Punkte klicken, „Einbetten“ wählen und den Code kopieren.
• HTML: Selbst gehostete Videos bindest du mit dem Video-Tag ein: <video src=„beispiel.mp4“ controls poster=„beispiel.jpg“></video>. Über weitere Attribute steuerst du Breite (width), Höhe (height), automatisches Abspielen (autoplay) oder eine Dauerschleife (loop).

Ladezeit: der Fehler, den fast alle machen

Videos sind die schwersten Dateien deiner Website. Wer sie falsch einbindet, macht seine Seite langsam und verliert Besucher, bevor sie das Video überhaupt sehen. Drei Regeln dafür: Erstens, binde Videos unterhalb des sichtbaren Bereichs mit loading=„lazy“ ein oder lade sie erst, wenn der Besucher dorthin scrollt. Zweitens, nutze bei selbst gehosteten Videos preload=„none“ oder „metadata“ und eine komprimierte Fassung, 720p reicht für die meisten Einsatzzwecke auf der Website völlig aus. Drittens, Autoplay nur stumm und nur für Deko-Videos, nie für Inhalte. Wir haben auf unserer eigenen Website allein durch dieses Prinzip mehrere Megabyte pro Seitenaufruf eingespart.

Fazit: Ein Video auf deiner Website einzubinden ist leichter als gedacht

Ein Video einzubinden ist keine Raketenwissenschaft, aber eine der effektivsten Methoden, um Nutzererlebnis und Verweildauer deutlich zu steigern. Prüfe dein eingebundenes Video trotzdem regelmäßig: Es kann vorkommen, dass ein Video auf der Plattform entfernt wird und dann auf deiner Website ein leerer Rahmen bleibt.

Die Grundlage sind immer hochwertige, professionelle Videos mit Mehrwert, die deinen potenziellen Kunden weiterhelfen oder dein Angebot erklären. Genau solche Videos produzieren wir bei filmkey für Unternehmen in Ulm und ganz Süddeutschland. Was das kostet, zeigt dir unser Ratgeber zu den Videoproduktion Kosten, und im kostenlosen Strategiegespräch klären wir, welches Video deine Website braucht.