Video in Website einbinden – So funktioniert es
Es ist schon längst kein Geheimnis mehr, dass das Einbinden von Videos in die Website Ihnen und Ihren Besuchern einen unvergleichlichen Nutzen bringt. Angefangen bei der Verbesserung des Nutzererlebnisses bis hin zu SEO-Vorteilen für Ihre Website. Während auf den meisten Websites noch immer Texte und Bilder dominieren, spielen Videos eine immer wichtigere Rolle, wenn es darum geht, die Aufmerksamkeit Ihrer Besucher zu gewinnen. Eine längere Verweildauer auf der Website, höhere Klickraten, mehr Konversionen und eine größere Reichweite gehören zu den klaren Vorteilen der Einbindung von Videos auf Ihrer Website.
Die Einbindung von Videos mag wie eine Routineaufgabe erscheinen, aber es gibt trotzdem einige Dinge, die beachtet werden müssen. In diesem Beitrag haben wir Ihnen einen Leitfaden zusammengestellt, der die wichtigsten Informationen zum Thema Einbindung von Videos auf Ihrer Website abdeckt.
Das Wichtigste in Kürze
- Vorteile: Eingebettete Videos können Verweildauer, Klickraten, Conversions und Reichweite einer Website erhöhen.
- Einbindung: Videos lassen sich per URL, Einbettungscode oder HTML-Video-Element in eine Website integrieren.
- Plattformen: WordPress, Wix und Squarespace bieten einfache Möglichkeiten zur Video-Einbettung.
- Hosting: Externe Videoplattformen entlasten den eigenen Server und stellen meist direkt einen Einbettungscode bereit.
- Kontrolle: Eingebettete Videos sollten regelmäßig geprüft werden, damit sie weiterhin korrekt verfügbar und abspielbar sind.
Was ist eine Video-Einbettung?
Wenn Sie ein Video einbetten, heißt das eigentlich nur, dass Sie ein eigenes oder fremdes Video von einer anderen Plattform auf Ihrer Website einbinden und dieses Video auf Ihrer Website angeschaut werden kann. Der Zuschauer wird dabei auch nicht auf eine andere Plattform geführt, um das Video zu streamen. Ein spezialisierter Video-Dienstleister fungiert als Host und stellt einen Einbettungscode bereit, den Sie ganz einfach auf Ihrer Website einfügen können.
Darüber hinaus gibt es ebenfalls die Möglichkeit, das Video auf dem eigenen Server zu hosten, um potenzielle Probleme bezüglich der Datenschutzrichtlinien eines Video-Dienstleisters zu vermeiden. Jedoch ist diese Option um einiges komplizierter als eine Video-Einbettung und die Geschwindigkeit des Servers und Ihr Speicherplatz können enorm eingeschränkt werden.
Natürlich ist es wichtig zu verstehen, was sich hinter dem Hauptelement einer Videoeinbindung verbirgt – und zwar ein Einbettungscode. Ein Einbettungscode ist ein Schnipsel des HTML-Code, den Sie verwenden können, um Videos und andere Arten von Inhalten Ihrer Website hinzuzufügen. Dieser Codeschnipsel holt das Video aus seiner ursprünglichen Quelle, ohne Sie zu zwingen, es auf Ihrer Website hochzuladen. Das bedeutet, dass Sie sich keine Sorgen machen müssen, dass ein Video die Ladezeit Ihrer Website beeinträchtigt. Somit können Sie sich zwischen verschiedenen Video-Hosting-Diensten für eine Plattform entscheiden, die Ihren Bedürfnissen entspricht.
Warum sollten Sie Videos auf Ihrer Website einbinden?
Videoinhalte helfen Ihnen besonders dabei, mit Ihrer Zielgruppe in Kontakt zu treten und dienen Unternehmen als ein besonders ausschlaggebendes Marketinginstrument. Durch den Einsatz von Videos können Sie Informationen präsentieren, die die Aufmerksamkeit des Besuchers erregen und ihn dazu bringen, mehr zu erfahren.
Da die Aufmerksamkeitsspanne von Nutzern immer kürzer wird, ergibt sich eine perfekte Möglichkeit, den Besuchern Ihrer Website eine kurze Botschaft im Videoformat zur Verfügung zu stellen. Dabei reicht es bereits vollkommen aus, wenn das Video nur 10 bis 15 Sekunden lang ist, denn selbst in dieser Zeit können Sie wichtige Informationen zu vermitteln.
Außerdem können Sie somit auch qualitativ hochwertige Landing Pages erstellen, die für eine gute Konversionsrate unerlässlich sind. Wenn Ihre aktuellen Landing Pages nur aus Text bestehen, könnten Sie einige potenzielle Kunden vertreiben. Sie können ein individuelles Video gestalten, das eine Botschaft Ihres Produkts oder Ihrer Dienstleistung beinhaltet und das auf Ihrer Landing Page einbinden, um ein breiteres Publikum anzusprechen und mehr Verkäufe zu erzielen.
Ihr Anbieter Nr. 1 für
Film- und Videoproduktionen
Sie sind auf der Suche nach einer professionellen Film- und Videoproduktion für Ihr nächstes Projekt? Jetzt mehr über die Videoprodukte von muthmedia erfahren!
Unsere Film- und VideoprodukteSo binden Sie Videos auf Ihrer Website ein
Das Einbinden eines Videos auf Ihrer Website dauert überhaupt nicht lange und scheint für manche auch vollkommen unkompliziert zu sein. Jedoch müssen Sie trotzdem einige Punkte beachten: Je nach eingesetzten Methoden sollten Sie vor allem Dateigröße, responsives Verhalten per CSS und Tests auf verschiedenen Geräten im Blick behalten. Ein kurzer Überblick über sinnvolle Einstellungen hilft dabei, die Darstellung sauber zu konfigurieren und die maximale Dateigröße nicht aus den Augen zu verlieren. Für die Video Einstellungen und die Optimierung können Tools wie HandBrake helfen; außerdem verbessern Lazy Loading und ein Poster-Bild die wahrgenommene Ladezeit. Beim Export sind die richtigen Formate wichtig, damit Videos in 16:9 oder 4:3 vorliegen, wobei sie in der Regel im 16:9-Format eingebunden werden.
HTML
HTML ist ein Format zum Aufbau von Websites, das man bearbeiten oder verändern kann, wenn man die passenden Attribute und den richtigen befehl kennt. Heute ist html5 der Standard, mit dem sich Videos über das <video>-Tag direkt in eine html seite einbinden lassen – ganz ohne Plugins. Wenn Sie direkt mit dem HTML-Code Ihrer Website arbeiten, können Sie ein Video ganz einfach an der gewünschten Stelle einbetten. Holen Sie sich den Einbettungscode von der Plattform, auf der das Video gehostet wird, und fügen Sie ihn in Ihre HTML-Datei ein.
Schritt-für-Schritt Anleitung:
Schritt 1 – Bearbeiten Sie Ihr HTML:
Gehen Sie in den Bearbeitungsmodus für die Seite, den Beitrag oder den Abschnitt ihrer Website, in den Sie das Video einbetten möchten. Suchen Sie die Stelle im Code, an der das Video erscheinen soll, und bewegen Sie den Cursor dort hin.
Schritt 2 – Kopieren Sie den Einbettungscode:
Als nächstes kopieren Sie den Einbettungscode, den Sie auf verschiedenen Plattformen finden können. Diesen Schritt erläutern wir Ihnen in diesem Beitrag noch genauer. Wenn Sie ein selbst gehostetes MP4 Video nutzen, kann das Video-Element mehrere Source-Elemente enthalten, damit Browser automatisch das passende Format auswählen.
Schritt 3 – Fügen Sie den Einbettungscode in Ihr HTML ein:
Im nächsten Schritt fügen Sie den Code an der Stelle ein, die Sie im ersten Schritt in Ihrem HTML-Code gefunden haben. Speichern oder veröffentlichen Sie den Code, und schon kann es losgehen! Das Video sollte genau an der Stelle angezeigt werden, an der Sie den Code platziert haben. Für breite Kompatibilität in verschiedenen Browsern sollten Video Formate wie MP4 und WebM bereitgestellt werden, das <video>-Element unterstützt mehrere Formate, auch wenn je nach Video Codec Unterschiede bei der Wiedergabe möglich sind. Typische Attribute bzw. Befehle innerhalb der HTML-Einbindung sind Source SRC, Poster, Controls und Loop. Controls blendet dabei die Steuerelemente ein, während Autoplay in modernen Browsern blockiert werden kann.
WordPress
Wenn Sie einen Blog oder eine Website über das beliebteste Contentmanagement-System WordPress führen, gibt es verschiedene Möglichkeiten, ein Video einzubinden. Während das allgemeine Konzept der Einbettung eines Ortes zum anderen gleich ist, können die Details variieren.
Einbetten von Videos durch das Kopieren und Einfügen der URL:
Für diese Methode benötigen Sie nur die URL des Videos. Für viele beliebte Video-Hosting-Plattformen wie YouTube oder Vimeo, benötigen Sie nicht den vollständigen Einbettungscode. Durch das einfache Kopieren und Einfügen der URL des Videos in den visuellen Editor wird das Video automatisch eingebunden. Ein kurzer Hinweis: Bei externen Plattformen sollten Sie im fall der Einbindung auch die Datenschutz-Grundverordnung berücksichtigen, da sonst schnell ein Problem mit der Datenübertragung an Dritte entsteht.
Videos mit Einbettungscode einbinden:
Die automatische Einbettungsmethode ist einfach, aber in manchen Fällen möchten Sie mehr Kontrolle darüber haben, wie Ihr Video angezeigt wird. In diesen Fällen oder auch beim Einbetten von Videos in Websites, die nicht über die automatische Einbettungsfunktion verfügen, verwenden Sie den Einbettungscode des Videos. Für diesen Ablauf müssen Sie sicherstellen, dass Sie sich im Texteditor und nicht im visuellen Editor in WordPress befinden. Danach können Sie die Schritte, die in dem Abschnitt über das Einbetten von Videos in HTML beschrieben wurden, ebenfalls anwenden. Bei YouTube ist die Frage wichtig, ob der Standard-Embed genutzt wird, denn dieser überträgt Daten ohne Zustimmung; etwas datenschutzfreundlicher ist youtube-nocookie.com. Vimeo bringt für den User ähnliche DSGVO-Herausforderungen mit sich, daher sind für eine DSGVO-konforme Einbindung meist eine Zwei-Klick-Lösung und Consent-Management-Tools sinnvoll.
Wix und Squarespace
- Wix
Für diejenigen, die eine Website auf Wix betreiben, ist das Einbinden von Videos genauso einfach wie auf WordPress. Sie können ebenfalls die URL eines Videos verwenden, das auf einer Video-Hosting-Plattform veröffentlicht wurde oder Sie können Wix Video verwenden. Wenn Sie den Editor Ihrer Website geöffnet haben, können Sie auf „Video hinzufügen“ klicken und die Methode auswählen, die Sie verwenden möchten. Dazu gehört das Einbetten eines Videos von YouTube oder das Hochladen des Videos direkt auf Ihre Website.
- Squarespace
Um ein Video in Ihre Squarespace-Website einzubetten, müssen Sie Videoblöcke verwenden. Sie können diese Videoblöcke zu Ihren Seiten hinzufügen und Squarespace dann die notwendigen Informationen zur Verfügung stellen, um das Video zu finden. Entweder können Sie die URL allein verwenden, wenn das Video auf YouTube oder Vimeo gehostet wird, oder Sie müssen einen Einbettungscode zur Verfügung stellen. Sobald Sie den Videoblock hinzugefügt haben, können Sie die entsprechende URL oder den Einbettungscode eingeben und ein Vorschaubild oder eine Beschriftung hinzufügen.
Wo Sie Einbettungscodes für Video-Player finden
Nun müssen Sie nur noch wissen, wo genau Sie überhaupt die wichtigen Einbettungscodes finden, um diese von der jeweiligen Hosting-Plattform auf Ihrer Website streamen zu lassen. Wir zeigen Ihnen anhand der Beispiele YouTube und Instagram, wo Sie die Einbettungscodes finden können. Auf Plattformen wie Facebook und TikTok können die Einbettungscodes ähnlich wie auf Instagram gefunden werden.
Sie möchten ein YouTube Video in Ihre Website einbinden? Dafür finden Sie den Einbettungscode auf der YouTube-Wiedergabenseite unter „Teilen“. Danach müssen Sie auf „Einbetten“ klicken und haben direkt die Möglichkeit, den Einbettungscode zu kopieren und einige Optionen anzupassen. Diese Anpassungsoptionen beinhalten die Einstellung der Steuerelemente des Players sowie eine Option, mit der Sie die Videoeinbettung so einstellen können, dass die Wiedergabe an einer bestimmten Stelle des Videos beginnt.
Sie möchten ein YouTube Um ein Instagram Video in Ihrer Website einzubinden, müssen Sie den gewünschten Beitrag in einem Webbrowser aufrufen und dann auf das „…“ in der unteren rechten Ecke anklicken.
Es gibt auch die Möglichkeit, ein Video auf einer Webseite einzubinden, ohne eine Social Media Plattform nutzen zu müssen. Im HTML gibt es hierfür ein spezielles Video-Tag, das man einfach in den HTML-Code des Inhaltsbereichs der Seite einfügen kann, um eine selbst hochgeladene Video-Datei verfügbar zu machen, die dann vom browsereigenen Videoplayer abgespielt werden kann.
Ein Beispiel hierfür wäre:
{video src=““beispiel.mp4″“ poster=““beispiel.jpg““ controls=“controls“}{/video}
(Anstelle der geschweiften Klammern müssen < und > gesetzt werden.)
Für Hintergrundvideos reicht oft schon ein kurzes 10-Sekunden-Video in 720p aus, was auch als kleiner Guide für eine bessere Ladezeit dienen kann.
Das Video-Element enthält im src-Attribut also den Pfad zur Videoressource und im Attribut poster den Pfad zum gewünschten Vorschaubild. Darüber hinaus können auch noch weitere Attribute hinzugefügt werden, um Informationen wie die Breite (width) und Höhe (height) des Videos anzugeben sowie ob es automatisch (autoplay) oder in Schleife (loop) abgespielt werden soll. Falls das Video nicht inline abgespielt werden soll, kann zusätzlich ein direkter Link zur Datei ergänzt werden.
Fazit – Es beginnt mit einem guten Video
Nachdem Sie Ihr Video erfolgreich auf Ihrer Website eingebunden haben, sollten die Besucher die Videos problemlos abspielen können. Jedoch ist es ratsam, von Zeit zu Zeit die Videos zu kontrollieren, um sicherzustellen, dass noch alles richtig funktioniert. Es gibt einige Probleme, die dazu führen könnten, dass Ihr Video nicht abgespielt werden kann. Zum Beispiel kann die Plattform, auf der Sie das Video hosten, es aus einem beliebigen Grund vom Netz nehmen. Aus diesem Grund ist eine regelmäßige Überprüfung eine gute Lösung, um herauszufinden, ob alle Videos noch online sind.
Bevor Sie aber ein Video auf Ihrer Website einbinden können, müssen Sie dieses Video erst einmal produzieren und genau dabei können wir Sie unterstützen! Eine erfahrene Filmproduktion wie muthmedia, die bereits seit über 10 Jahren jegliche Art von Videos produziert, hilft Ihnen nicht nur bei der Produktion Ihres Videos, sondern auch bei der Konzeption und Planung. Sie erhalten eine hochwertige Videoproduktion, die von der Story über das Bild bis ins Sounddesign komplett überzeugt. Wir unterstützen Sie mit unserer Erfahrung aus mehr als 4.500 abgeschlossenen Videoprojekten für über 1.500 begeisterte Kunden aus unterschiedlichen Branchen.
Sie möchten ein Erklärvideo, Imagefilm, eine 3-D Animation oder ein 360 Grad Video produzieren lassen? Dann sind Sie bei uns richtig! Besuchen Sie einfach unsere Videoproduktionsseite, um sich ein Bild von unserer Arbeit zu machen, oder nehmen Sie unverbindlich Kontakt mit uns auf, um sich jetzt Ihre kostenlose Erstberatung zu sichern! Wir freuen uns auf Sie.
-
Barrierefreie Videos
Was barrierefreie Videos sind, welche Merkmale sie ausmachen und für wen es aufgrund einer EU-Richtlinie keinen Weg mehr daran vorbei gibt!
10 April, 2025 -
YouTube Videos erstellen lassen
Warum es sich für Sie auszahlt, wenn Sie Ihre YouTube Videos von einem professionellen Anbieter erstellen lassen!
20 Februar, 2025 -
Filmproduktion für Imagefilme finden
Die richtige Filmproduktion ist entscheidend für den Erfolg Ihres Imagefilms. Hier erfahren Sie, wie Sie ganz einfach den richtigen Anbieter finden!
26 November, 2024 -
3D Animation erstellen
Sie wollen eine eigene 3D Animation erstellen (lassen)? Hier erfahren Sie alles, was Sie wissen müssen!
13 November, 2024
Bereit für Ihre eigene Videoproduktion?
muthmedia zählt zu den führenden Anbietern im Bereich Video: von Beratung und Strategie über Konzeption und Produktion bis hin zu Publikation und Digital Marketing sind wir für Sie da.
Jetzt anfragen