Video ohne Youtube in Webseite oder Onlineshop einbauen

Zuletzt geändert am von kai.s.

Wie auch bereits bei Audio Dateien ist es mit Videos ebenfalls ziemlich einfach geworden Videos in die eigene Webseite einzubauen. Schaut euch mal den Code an

<video width="100%" height="auto" controls>
<source src="https://www.agentur-schoelzke.de/wp-content/uploads/2022/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
Ihr Browser kann dieses Video leider nicht wiedergeben.
</video>

Das Beispielvideo habe ich von hier https://file-examples.com/index.php/sample-video-files/sample-mp4-files/

Solltet Ihr Videos in mehreren Formaten zur Verfügung haben. dann könnt Ihr die auch einbinden.

<video width="100%" height="auto" controls>
<source src="https://www.agentur-schoelzke.de/wp-content/uploads/2022/04/file_example_MP4_480_1_5MG.mp4" type ="video/mp4">
<source src="https://www.agentur-schoelzke.de/wp-content/uploads/2022/04/file_example_MP4_480_1_5MG.ogg" type ="video/ogg">
Ihr Browser kann dieses Video leider nicht wiedergeben.
</video>

Wenn Ihr jetzt noch ein eigenes Vorschaubild hinterlegen möchtet, dann am besten in der ersten Zeile hinter controls einsetzen

poster="ein-vorschaubild.jpg"

Der gesamte Code mit Vorschaubild

<video width="100%" height="auto" controls poster="ein-vorschaubild.jpg">
<source src="https://www.agentur-schoelzke.de/wp-content/uploads/2022/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
Ihr Browser kann dieses Video leider nicht wiedergeben.
</video>

Das hier sollte ein kleiner Einblick sein, was mittlerweile alles so geht ohne das man groß anfangen muss irgendwelche Javascripte oder Player oder sonnst was in die Webseite oder Onlineshop einbauen zu müssen. Bei CMS Systemen immer daran denke das Ihr in Eurem Admin Bereich immer in den Quelltext oder html Modus wechseln müsst, wenn Ihr das einbauen möchtet.

Strukturierte Daten einbinden

Noch was, damit das Video besser gefunden wird von den Suchmaschinen, könnt Ihr euch noch paar strukturierte Daten einbinden. So was, Ihr müsst das natürlich anpassen auf Euch mit in den Quellcode einbinden. Google hätte das ganze zwar zwischen <head> und </head> da ist aber in CSM Systemen wie z.B. einem Gambio Shop schwer umzusetzen, daher am besten direkt in die Artikelbeschreibung ganz oben platzieren. Bitte aber darauf achten das es im HTML Modus eingefügt wird.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Title des Videos",
  "description": "Video Beschreibung",
  "thumbnailUrl": "Pfad zum Vorschaubild",
  "contentUrl": "Pfad zum Video",
  "uploadDate": "2022-01-01T00:00:00Z",
  "duration": "PT1M33S"
}
</script>

Bei Fragen, stehen wir gern zur Verfügung.

Nach oben scrollen