Video in HTML einbinden - so geht's
Sie möchten in Ihren HTML-Code eine Videodatei verlinken? Lesen Sie hier, wie das geht.
- Cornelia Möhring
HTML ist ein Format zum Aufbau von Websites. Die Auszeichnungssprache kann sehr modular sein - insofern man die richtigen Befehle kennt. So lassen sich in HTML beispielsweise auch Video-Dateien einbinden. Im Folgenden erklären wir Ihnen hier, wie Sie auf YouTube-Videos verlinken können und eigene Videos einbauen.
Video-Befehl in HTML
Der Befehl zum Einbauen von Videos ist ganz einfach:
<video></video>
Dieses Format wird auch von allen gängigen Browsern unterstützt. Den Bereich dazwischen müssen Sie dann mit den Eingaben und Einstellungen rund um Ihr gewünschtes Video füllen. Dafür gibt es verschiedene Anpassungsoptionen:
- height/width: Damit geben Sie die Höhe und Breite Ihres Videos in Pixeln an.
- controls: Hierüber schalten Sie die Anzeige von Videoeinstellungen während des Schauens an.
- source: Source ist ein eigener Befehl und gibt die Quelle Ihres Videos an. Das kann eine Datei auf Ihrem Computer sein oder ein Video auf einer Internetplattform. Nach <source> müssen Sie per "src=" Ihre Quelle angeben.
- type: Hierüber definieren Sie das Format Ihres Videos. Die aktuelle HTML-Version, HTML5, unterstützt die Videoformate MP4, WebM und Ogg.
Sie können Ihre Videowiedergabe auch mit weiteren Attributen anpassen:
- autoplay: Das Video wird abgespielt, sobald die Seite aufgerufen wird. Auf manchen mobilen Geräten funktioniert das nicht immer.
- loop: Sobald das Video zu Ende ist, wird es erneut gestartet.
- poster: Damit können Sie ein Bild festlegen. Dieses wird so lange angezeigt, bis das Video gestartet wird.
- preload: Das Video muss nicht erst laden, sobald es gestartet wird. Es wird automatisch geladen, sobald die Seite geladen wird.
- volume: Hier muss ein Wert zwischen 0 und 100 eingegeben werden, der die Lautstärke des Videos festlegt.
Ein fertiger Video-Befehl kann also so aussehen:
<video width="320" height="270" controls autoplay>
<source src="beispielvideourl.mp4" type="video/mp4“></source>
</video>
Oder auch so:
<video width="320" height="270" volume=0 loop>
<source src="beispielvideourl.mp4" type="video/mp4“></source>
</video>
Manchmal wird anstelle des oben genannten Video-Befehls auch <iframe> verwendet. Das Besondere an diesem Befehl ist, dass es sich dabei um ein einzelnes Element handelt. Die entsprechenden Einstellungen werden direkt in das erste iframe-Element geschrieben und stehen nicht als einzelnes Element zwischen <iframe> und </iframe>. Ein über dieses Format eingebundenes Video kann dann so aussehen:
<iframe width="560" height="315" src="Quelle" frameborder="0" allow="autoplay" allowfullscreen></iframe>
Anstelle von "Quelle" müssen Sie hier den Verweis auf Ihr gewünschtes Video eintragen, beispielsweise eine Verlinkung zu YouTube.
YouTube-Video einbetten
YouTube macht es Ihnen sehr einfach, das entsprechende Video in Ihre Website zu integrieren. Besuchen Sie ein Video, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Einbettungscode kopieren" aus. Diesen Code können Sie direkt in Ihre HTML-Datei übernehmen.
Alternativ können Sie auf "Teilen" klicken, sodass Ihnen verschiedene Optionen angezeigt werden. Wählen Sie "Einbetten" aus, wird Ihnen auf der rechten Seite ebenfalls der Quellcode ausgegeben.
(como)
