Wie Sie in Websites Videos einbinden - mit HTML5, YouTube & Co

Ob Produktpräsentationen, Imagevideos, Tutorials oder ein Film über das soziale Engagement eines Unternehmens ­ – eines haben gut gemachte Videos gemein: Sie halten Besucher länger auf der Seite, erhöhen den Traffic und werden gerne in den sozialen Medien geliked. Indem sie so auf relevante Kennzahlen der Suchmaschinenoptimierung einzahlen, sind sie auch eine gute Möglichkeit, mit vergleichsweise kleinem Budget das Ranking einer Seite zu verbessern.

In diesem Beitrag erfahren Sie, welche Möglichkeiten es zur Integration von Videos in Websites gibt und welche Vor- und Nachteile damit verbunden sind.

Video in die Website einbinden: Welche Möglichkeiten gibt es?

Die Zeiten, in denen man auf Adobe Flash und entsprechende Browser-Plugins angewiesen war, die manuell auf dem Endgerät installiert und regelmäßig aktualisiert werden mussten, sind glücklicherweise vorbei. Und damit auch das Problem von Inkompatibilitäten, Sicherheitslücken und komplizierten Einbettungscodes.

HTML5 bietet mit dem <video>-Element eine Möglichkeit, ein Video ohne Player und Plugin in die Website einzubinden. Nutzer der beiden verbreitetsten CMS-Systeme WordPress und Joomla! können sich das Leben noch leichter machen, indem sie auf Video-Plugins zur Integration von Clips zurückgreifen.

Wer die Videos nicht direkt auf den eigenen Server laden möchte, kann fremdhosten lassen. Die Videos werden dann zunächst auf eine Videoplattform wie Vimeo oder YouTube hochgeladen und anschließend per iFrame in die Webseite eingebunden.

Wenn es darum geht, ein Video in eine Website einzubinden, stellt sich also zunächst die Frage, ob das Video auf dem eigenen Webspace oder auf einem fremden Server gehostet werden soll. Die Entscheidung richtet sich dabei nach den Anforderungen, denn beide Varianten haben unterschiedliche Stärken und Schwächen.

Domain - schon ab 0,08 € /Monat

Große Auswahl an günstigen Domain-Endunge

Jetzt Domain-Check starten

Die Vorteile von Videoplattformen

Der größte Trumpf von Videoplattformen ist wohl ihre Einfachheit. Um ein Video auf YouTube oder Vimeo hochzuladen, brauchen Sie nur ein Nutzerkonto und das Video selbst. Spezielle HTML-Kenntnisse oder Kenntnisse zu Videoformaten, Codecs oder Bildformaten sind nicht nötig. Nach einem erfolgreichen Upload muss lediglich ein Einbettungs-Code im Quelltext der eigenen Seite hinterlegt werden, damit der Clip auch dort zu sehen ist.

Videos können zudem im Nachhinein ganz einfach um Zusatzinformationen wie Untertitel oder Links ergänzt werden. Vimeo bietet sogar die Möglichkeit, gehostete Videos unter Beibehaltung des ursprünglichen Links bzw. Einbettungscodes zu ändern oder zu aktualisieren.

Ein weiterer Vorteil von YouTube und Co liegt im Speicherplatz und den Ladezeiten. Ein fremd-gehostetes Bewegtbild blockiert keinen Platz auf Ihrem Server und bremst auch nicht die Ladezeiten Ihrer Website aus, was bei größeren selbstgehosteten Videodateien durchaus der Fall sein kann.

Auch die Reichweite spricht für ein Hosting auf den großen Videoplattformen, da die Videos nicht nur für die Besucher Ihrer Seite zu sehen sind, sondern auch für die Millionen Nutzer von YouTube und Vimeo. Ein gutes Video kann so schneller eine größere Zahl von Nutzern erreichen, in sozialen Netzwerken geteilt werden und z. B. Unternehmen und Produkten schneller zu größerer Bekanntheit verhelfen.

Nachteile von Fremdhosting

Den Vorteilen stehen allerdings einige Nachteile gegenüber: Zum einen müssen für das erforderliche Kundenkonto bei Fremdhostern sensible persönliche Daten angegeben werden. Zum anderen haben Sie keine volle Kontrolle über fremdgehostete Videos.

Es besteht immer ein Risiko, dass ein Video plötzlich von einer Plattform verschwindet – und somit auch nicht mehr auf Ihrer Webseite zu sehen ist. Die Plattform-Anbieter prüfen regelmäßig, ob die Inhalte der Clips ihren AGBs entsprechen. YouTube löscht Videos, die es für gefährlich, gewalttätig oder pornografisch hält. Werbliche Inhalte werden dagegen nicht grundsätzlich ausgeschlossen. Auch bei Vimeo können Werbeclips gehostet werden, allerdings ist dafür eine kostenpflichtige Mitgliedschaft erforderlich.

Bei YouTube wird der Service darüber hinaus damit erkauft, dass die eigenen Clips mit fremden Werbeeinblendungen kombiniert werden. Diese in letzter Zeit immer häufigeren Einblendungen können nicht nur lästig sein und Performance-Vorteile beim Fremdhosting zunichtemachen, sondern auch sehr kontraproduktiv sein, wenn z. B. Ihr Imagevideo durch die Werbeeinspielung eines Mitbewerbers eingeleitet oder unterbrochen wird.

Hosting auf dem eigenen Webserver: Die Vorteile

Self-Hosting punktet vor allem mit der vollen Kontrolle über das, was auf Ihrer Webseite zu sehen ist. Zum einen können Sie Ihre Videos veröffentlichen, ohne auf Nutzungsbedingungen einer Videoplattform Rücksicht nehmen oder damit rechnen zu müssen, dass das Video plötzlich nicht mehr zu sehen ist.

Sie haben auch mehr Einfluss auf den Verbreitungsweg und die Adressaten des eigenen Videos, da es nur auf Ihrer eigenen Website abrufbar ist und nicht nahezu unbegrenzt im Internet verbreitet werden kann. Die Videos vom eigenen Webspace bleiben zudem frei von unerwünschten Werbeeinblendungen. Die Besucher Ihrer Seite sehen nur das Video, was sie auch angeklickt haben und springen nicht ab, weil sie von ungewünschten Inhalten genervt sind.

Darüber hinaus gibt es mehr Möglichkeiten das Video auf der Website einzusetzen, so können die Clips z. B. in eine Slideshow integriert oder als Hintergrundvideo abgespielt werden.

Nachteile bei Self-Hosting

Die vielleicht größten Nachteile von Videos, die auf dem eigenen Webserver gehostet sind, liegen im Speicherplatzverbrauch und darin, dass größere Clips die Ladezeiten der Webseiten ausbremsen können – insbesondere dann, wenn die Clips automatisch abgespielt werden. Auch kann es zu Performance-Einbußen kommen, sobald eine größere Zahl an Webseitenbesuchern auf dasselbe Video zugreift.

Self-Hosting ist darüber hinaus etwas aufwendiger und erfordert ein wenig mehr technische Kenntnisse – auch zu Videoformaten – als der Weg über die Videoplattformen. Allerdings ist mit den Möglichkeiten von HTML5, oder den Video-Plugins für WordPress und Joomla! der Aufwand deutlich geringer als noch vor einigen Jahren.

Videos in Websites einbinden mit HTML5

Mit dem <video>-Element in HTML5 gelingt das Einbetten von Videos auch ohne tiefgreifende HTML-Kenntnisse und ohne Browser-Kompatibilitätsprobleme. <video> lässt sich dabei durch zusätzliche Attribute erweitern, die definieren, wie das Video auf der Website dargestellt wird. So fügen Sie ein Video in den Quellcode Ihrer Website ein:

<video src="beispielordner/beispielvideo.mp4" width="640" height="480" controls poster="vorschaubild.jpg" type ="video/mp4">Ihr Browser kann dieses Video leider nicht wiedergeben.</video>

Die Attribute height und width geben das Format des Videoplayers in Pixeln an. controls initiiert die Anzeige von Steuerelementen wie Start/Stopp, Pause und der Lautstärkeregelung. poster verweist auf den Speicherort einer Bilddatei, die als Vorschaubild angezeigt wird. Mit weiteren Attributen wie autoplay oder loop können das automatische Abspielen des Clips oder die Wiedergabe in Endlosschleife gesteuert werden. Das optionale Attribut type gibt das Format des Videos an – mehr zu geeigneten Videoformaten im nächsten Abschnitt.

Jüngere Versionen der verbreitetsten Webbrowser unterstützen HTML5. Für den Fall, dass ein Seitenbesucher doch einmal einen Browser nutzt, der das Video nicht anzeigt, können dem Video-Element weitere Inhalte hinzugefügt werden, die statt des Clips angezeigt werden, z. B: Ihr Browser kann dieses Video leider nicht wiedergeben.

Welche Video-Formate eignen sich für Webseiten?

Leider haben nicht alle Browser die gleichen Vorlieben hinsichtlich der Videoformate. Für Firefox, Chrome und Opera sind traditionell Videos im OGV/OGG-Format die beste Wahl, inzwischen werden aber auch MP4-Videos wiedergegeben. Safari spielt MP4, M4V und MOV problemlos ab. Auch der Internet Explorer gibt ab Version 9 MP4-Videos ohne Plugin wieder. Ältere Versionen des Microsoft-Browsers erfordern allerdings ein Plugin, um MP4-Videos anzuzeigen. Für Smartphones und Tablets mit Android oder iOS ist MP4 das geeignetste Format.

Das universellste Videoformat ist zurzeit also MP4. Mit einem zusätzlichen Video im OGV/OGG-Format für Firefox, Chrome und Opera gehen Sie zudem sicher, dass auch diese Browser Ihr Video ohne Probleme abspielen. Das HTML5-Video-Element erlaubt dazu mehrere <source>-Tags, sodass Sie problemlos Videos in mehreren Formaten angeben können, aus denen sich der Browser das passende aussuchen kann:

<video width="640" height="480" controls poster="vorschaubild.jpg">
<source src="beispielordner/beispielvideo.mp4" type ="video/mp4">
<source src="beispielordner/beispielvideo.ogg" type ="video/ogg">
Ihr Browser kann dieses Video leider nicht wiedergeben.
</video>

WordPress und Joomla! – Videos einbinden per Plugin

Nutzer der beiden verbreitetsten CMS-Systeme WordPress und Joomla! können darüber hinaus Videos ganz einfach per Video-Plugin in die Website einbauen. Wordpress-Plugins wie der Easy Video Player ermöglichen sowohl die Einbindung von selbst- als auch von fremdgehosteten Videos. Soll das Video als Hintergrund abgespielt werden, kann dies über das Plugin Video Background realisiert werden. Joomla!-Nutzer können z. B. mit der Extension AllVideos fremd- und selbstgehostete Videos in Ihre Website einbinden. Noch leichter und direkter ist die Videoeinbindung über die WordPress-Mediathek. Dabei muss man allerdings auf Zusatzfunktionen und besondere Wiedergabemöglichkeiten verzichten. Das Thema „Videos und WordPress“ werden wir in einem eigenen Beitrag ausführlicher beleuchten.

Die 10 bekanntesten Video-Hosting-Anbieter

Die Einbindung von Videos auf Ihrer Website wird immer wichtiger, gerade in Anbetracht dessen, dass Videoinhalte Nutzern einen echten Mehrwert liefern können. Den richtigen Anbieter für das Hosting Ihrer Videos auszuwählen ist jedoch nicht leicht. Bei der Auswahl sollten Sie nicht nur auf den Preis, sondern vor allem darauf achten, welche Funktionen Sie benötigen.

Kostenlose Video-Hosting-Lösungen zur Einbindung von Videos in HTML

Der Markt bietet einige kostenfreie Video-Hosting-Lösungen, die jedoch Vor- und Nachteile mit sich bringen:

Videos in HTML einbinden mit YouTube 

Einer der wohl bekanntesten Online- Video-Hosting-Anbieter ist die Plattform YouTube. Ihr größter Vorteil ist die kostenlose Nutzung für jeden. YouTube stellt einen unbegrenzten Cloud-Speicherplatz zur Verfügung, auf welchem Sie Ihre Videodateien ablegen können. Gleichzeitig haben Sie nicht nur die Möglichkeit, Videos ganz einfach per iframe-Code in das HTML Ihrer Website einzubinden, sondern erreichen über die Videoplattform auch eine große Anzahl an Nutzern. 

Zusätzlich gibt es die Möglichkeit, Videos nicht zu veröffentlichen, sondern lediglich privat einzustellen, sodass sie nicht für alle Nutzer sichtbar sind. Doch neben all den Vorteilen bringt der Video-Hosting-Anbieter auch Nachteile mit sich. So ist die Integration der Videos in HTML nur mit grundlegenden Optionen möglich. 

Des Weiteren werden Werbeanzeigen automatisch abgespielt, nicht nur auf der Plattform selbst, sondern auch, wenn Sie Videos in Ihre Website einbetten. Dies stellt für Unternehmen den wohl größten Nachteil bei der Nutzung von YouTube dar.

Online-Video-Hosting mit Dailymotion

Neben YouTube stellt auch Dailymotion eine kostenlose Video-Hosting-Lösung dar. Die Vorteile der Plattform sind der unbegrenzte Upload von Videos und die Möglichkeit, Inhalte als privat und nicht für andere sichtbar einzustellen. Nachteilig ist das im Vergleich zu YouTube wesentlich geringere Publikum, das hierüber erreicht werden kann. 

Und auch bei Dailymotion werden Werbeanzeigen während der Videos automatisch abgespielt. 

Vimeo – die Video-Plattform für Fachleute

Im Gegensatz zu den beiden zuvor genannten Social-Sharing-Videoplattformen richtet sich Vimeo gezielt an Fachleute. Entsprechend arbeitet es mit einer begrenzten Anzahl an verwendbaren Videoformaten. Auch gibt es in der kostenfreien Version ein Upload-Limit. 

Ein großer Vorteil ist jedoch, dass die Video-Integration in HTML flexibler ist als bei YouTube und Dailymotion. Auch werden keine Werbeanzeigen in, vor oder nach den Videos abgespielt. 

Videos in HTML einbinden mit kostenpflichtigen Video-Hosting-Anbietern

Neben kostenlosen Anbietern gibt es natürlich auch zahlreiche kostenpflichtige Video-Hoster auf dem Markt. Diese bieten meist umfangreichere Funktionen für ihre Nutzer.

Wistia nutzen, um Videos in HTML einzubetten

Wistia ist nicht nur ein Video-Hoster, sondern bietet zugleich viele weitere Funktionen an, z. B. die Einbettung von Formularen im Videoplayer selbst. Auch hier werden keine Werbeanzeigen eingespielt. Des Weiteren ist der Player sehr flexibel auf Ihre Bedürfnisse anpassbar. Der Nachteil von Wistia ist jedoch der Preis. Dieser liegt bei $99 pro Monat.

Video-Integration mit SproutVideo

Auch der kostenpflichtige Anbieter SproutVideo bietet Möglichkeiten, Leads direkt aus Ihrem Video heraus zu erfassen. Vorteilig sind hierbei die bereitgestellte Videoanalyse und der sehr flexibel anpassbare Player. 

Zusammen liefern sie die optimale Basis für die Integration von Videos in Ihren Website-Code. Dafür ist die SproutVideo-Plattform jedoch sehr komplex, und über die Plattform selbst können, anders als bei YouTube oder Dailymotion, keine Nutzer erreicht werden. SproutVideo bietet unterschiedliche Pakete an, wobei das kleinste bereits für monatlich $24,99 erworben werden kann.

VooPlayer zur Video-Einbindung in HTML

Auch dieser Anbieter verzichtet auf das Einspielen von Werbeanzeigen. Das Branding ist anpassbar, ebenso wie die gesamte Oberfläche, mit der Sie Videos in Ihre Website einbetten können. 

VooPlayer liefert zudem tiefe Videoanalysen, wodurch Sie wertvolle Insights über Ihre Zielgruppen sammeln können. Der einzige Nachteil an diesem Video-Hosting-Anbieter ist die Komplexität der Plattform, resultierend aus der großen Menge an Zusatzfunktionen, die geboten werden. Die Nutzung von VooPlayer ist bereits ab $14 pro Monat möglich.

Titelmotiv: Photo by Jakob Owens on Unsplash