https://explikate.com/assets/ErklaervideoWebsiteEinbindenView-Dd5j0hjx.js

1import{j as e}from"./main-cbYbdD1t.js";import"./vendor-icons-BKgSHxQe.js";import{A as a,a as i,T as s,K as l,L as o}from"./Artikel-DvoKBlhX.js";import{Q as n,V as u,C as t}from"./Bausteine-CplN_Ioq.js";import"./vendor-react-Dnw9sM6K.js";import"./RatgeberCTA-B_pu5iCR.js";import"./EditorialMedia-yxEfXMLL.js";function k({onOpenOrder:d,onNavigate:r}){return e.jsxs(a,{slug:"erklaervideo-website-einbinden",crumb:"Erklärvideo einbinden",lead:"Das beste Erklärvideo hilft wenig, wenn es die Seite ausbremst, ungefragt mit Ton losläuft oder von Google nicht gefunden wird. Dieser Artikel zeigt, wie du ein Erklärvideo auf deiner Website so einbindest, dass es schnell lädt, gesehen wird und in der Suche auftaucht.",related:["erklaervideo-dauer","erklaervideo-kosten","messekontakte-nachfassen","erklaervideo-mehrsprachig"],cta:{title:"Erklärvideo mit Einbau-Code für deine Website",subtitle:"Im Vertriebspaket für 2.990 € netto: Hauptvideo, Kurzfassung, Hochformat, Quadrat, eingebrannte Untertitel und ein auf Ladezeit optimierter Einbau-Code. Angebot an Werktagen innerhalb von 24 Stunden.",badge:"VERTRIEBSPAKET",paketId:"vertrieb"},onOpenOrder:d,onNavigate:r,children:[e.jsxs(i,{id:"hosting",frage:"Selbst hosten oder YouTube: Wo sollte dein Erklärvideo liegen?",children:[e.jsx("p",{children:"Es gibt zwei Grundwege: Du lädst die Videodatei auf deinen eigenen Server oder ein Speicher-Netzwerk und spielst sie mit dem Video-Element des Browsers ab. Oder du lädst das Video bei einer Plattform wie YouTube oder Vimeo hoch und bettest deren Player ein."}),e.jsx(s,{kopf:["","Selbst gehostet","Plattform (zum Beispiel YouTube)"],zeilen:[["Ladezeit","Gut steuerbar: Posterbild zuerst, Video erst bei Bedarf","Der Player lädt zusätzliche Skripte, außer du lädst ihn erst per Klick"],["Aussehen","Eigener, schlichter Player ohne fremdes Branding","Player der Plattform, am Ende oft Vorschläge für andere Videos"],["Datenschutz","Keine Daten an Dritte beim Abspielen","Inhalte eines Drittanbieters, mit deinem Datenschutz abstimmen"],["Reichweite","Nur auf deiner Website","Zusätzlich auf der Plattform auffindbar"],["Kosten","Speicher und Datenvolumen","Meist kostenlos"]]}),e.jsx("p",{children:"Viele Unternehmen kombinieren beides: auf der eigenen Website selbst gehostet, weil es dort um Ladezeit und einen ruhigen Auftritt geht, und zusätzlich auf YouTube für die Reichweite dort."})]}),e.jsxs(i,{id:"ladezeit",frage:"Wie verhinderst du, dass das Video die Seite langsam macht?",children:[e.jsx("p",{children:"Eine Videodatei ist viel größer als ein Bild. Wenn der Browser sie sofort komplett lädt, wartet die ganze Seite. Die Lösung ist, zuerst nur ein Bild zu zeigen und das Video erst zu laden, wenn es gebraucht wird."}),e.jsx(l,{items:[{titel:"Posterbild",text:"Ein Standbild aus dem Video, das angezeigt wird, bis das Video lädt. Es sollte das Produkt zeigen, nicht das Logo."},{titel:"Nicht vorladen",text:'Mit preload="none" lädt der Browser die Videodatei erst, wenn jemand auf Play klickt.'},{titel:"Plattform-Player per Klick",text:"Bei YouTube oder Vimeo zuerst nur das Vorschaubild zeigen und den Player erst beim Klick nachladen."},{titel:"Passende Dateigröße",text:"Für die Website reicht meist eine kleinere Datei als das 4K-Master. Mehrere Formate wie WebM und MP4 anbieten."}]}),e.jsxs("p",{className:"xr-note",children:['Die Empfehlung, mit preload="none" das Laden des Videos zu verhindern und ein Posterbild als Platzhalter zu nutzen, steht im Leitfaden von Google zu ',e.jsx(n,{href:"https://web.dev/articles/lazy-loading-video",children:"Lazy Loading von Videos auf web.dev"}),". Dort steht auch: Ist das Video das größte Element im sichtbaren Bereich, sollte es nicht verzögert geladen werden."]})]}),e.jsxs(i,{id:"autoplay",frage:"Darf ein Erklärvideo automatisch starten?",children:[e.jsxs("p",{children:["Mit Ton in der Regel nicht. Browser lassen Autoplay mit Ton nur unter bestimmten Bedingungen zu. Laut der ",e.jsx(n,{href:"https://developer.chrome.com/blog/autoplay",children:"Autoplay-Richtlinie von Chrome"})," ist Autoplay ohne Ton immer erlaubt. Ein Erklärvideo lebt aber vom Sprecher. Stumm gestartet verpasst der Besucher genau das, worauf es ankommt."]}),e.jsx(s,{kopf:["Video","Empfehlung"],zeilen:[["Erklärvideo mit Sprecher","Start per Klick, mit großem Play-Symbol auf dem Posterbild"],["Kurzer stummer Loop als Blickfang","Autoplay ohne Ton, in Schleife, mit Möglichkeit zum Anhalten"],["Video mit eingebrannten Untertiteln","Autoplay ohne Ton möglich, Ton per Klick zuschaltbar"]]}),e.jsxs("p",{children:["Wenn ein bewegter Inhalt automatisch startet, länger als fünf Sekunden läuft und neben anderem Inhalt steht, verlangen die Richtlinien für barrierefreie Webinhalte eine Möglichkeit, ihn anzuhalten, zu stoppen oder auszublenden (",e.jsx(n,{href:"https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html",children:"WCAG, Erfolgskriterium 2.2.2"}),")."]}),e.jsx(u,{name:"ratgeber-saas-ui-motion",title:"Stummer Loop als Blickfang (Explikate Produktion)",badge:"Ohne Ton",caption:"So ein kurzer Loop kann ohne Ton automatisch laufen. Das eigentliche Erklärvideo startet per Klick."})]}),e.jsxs(i,{id:"seo",frage:"Wie wird dein Erklärvideo bei Google gefunden?",children:[e.jsxs("p",{children:["Google hat eigene ",e.jsx(n,{href:"https://developers.google.com/search/docs/appearance/video",children:"Empfehlungen für Videos in der Suche"}),". Die wichtigsten Punkte für ein Erklärvideo auf deiner Website:"]}),e.jsx(t,{items:["Das Video in einem üblichen HTML-Element einbinden. Google findet Videos in video, embed, iframe und object.","Ein gültiges Vorschaub

1ild bereitstellen.","Dem Video einen eindeutigen Titel und eine Beschreibung geben, die zum Inhalt passen.","Strukturierte Daten vom Typ VideoObject ergänzen, mit Angaben, die zum tatsächlichen Video passen.","Eine Video-Sitemap anlegen, wenn du mehrere Videos hast.","Die Videodatei und das Vorschaubild unter stabilen Adressen erreichbar halten.","Wenn es für dein Angebot sinnvoll ist, jedem Video eine eigene Seite geben."]}),e.jsx("p",{children:"Der Text auf der Seite bleibt trotzdem wichtig. Eine kurze Zusammenfassung dessen, was im Video erklärt wird, hilft Besuchern, die nicht abspielen, und Suchmaschinen, die den Inhalt einordnen."})]}),e.jsxs(i,{id:"platzierung",frage:"Wo auf der Seite sollte das Erklärvideo stehen?",children:[e.jsx("p",{children:"Dort, wo die Frage entsteht, die es beantwortet. Auf der Startseite ist das meist der obere Bereich, direkt neben der Kernaussage, weil Besucher dort wissen wollen, was du anbietest. Auf Produktseiten gehört es neben die Beschreibung der Funktion, die es zeigt."}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Neben der Kernaussage,"})," nicht unter einem langen Text versteckt."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Mit Laufzeit"})," am Play-Symbol, damit Besucher wissen, worauf sie sich einlassen."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Mit dem nächsten Schritt daneben:"})," Anfrage, Demo oder Kontakt."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Nicht mehrere Videos gleichzeitig"})," im sichtbaren Bereich, die alle abspielen wollen."]})]})]}),e.jsx(i,{id:"untertitel",frage:"Brauchst du Untertitel?",children:e.jsx("p",{children:"Ja, wenn das Video auch stumm geschaut werden könnte. Im Büro, im Zug oder auf LinkedIn schauen viele ohne Ton. Es gibt zwei Varianten: eingebrannte Untertitel, die fest im Bild stehen und überall funktionieren, und Untertitel als separate Datei, die der Player ein- und ausblenden kann. Für Social Media sind eingebrannte Untertitel üblich, auf der eigenen Website ist eine zuschaltbare Datei flexibler. Untertitel helfen außerdem Menschen, die nicht hören können."})}),e.jsx(i,{id:"mobil",frage:"Worauf musst du auf dem Smartphone achten?",children:e.jsx(t,{items:["Das Video mit playsinline einbinden, damit es auf dem iPhone nicht sofort im Vollbild startet.","Das Seitenverhältnis festlegen, damit die Seite beim Laden nicht springt.","Schrift im Video groß genug für kleine Bildschirme halten.","Für Social Media und schmale Bildschirme eine Fassung im Hochformat oder Quadrat bereithalten."]})}),e.jsxs(i,{id:"checkliste",frage:"Checkliste: Ist dein Erklärvideo richtig eingebunden?",children:[e.jsx(t,{items:["Posterbild zeigt das Produkt und ein deutliches Play-Symbol.","Die Videodatei wird erst bei Bedarf geladen.","Das Erklärvideo mit Ton startet per Klick, stumme Loops lassen sich anhalten.","Titel, Beschreibung und strukturierte Daten passen zum Video.","Untertitel sind vorhanden.","Auf dem Smartphone läuft das Video im Seitenlayout und springt nicht.","Neben dem Video steht der nächste Schritt."]}),e.jsxs("p",{children:["Im Vertriebspaket und im Komplettpaket von Explikate ist ein auf Ladezeit optimierter Einbau-Code für deine Website enthalten, dazu Kurzfassung, Hochformat, Quadrat und eingebrannte Untertitel. Welche Länge für welchen Einsatz passt, steht in ",e.jsx(o,{href:"/ratgeber/erklaervideo-dauer/",onNavigate:r,children:"Wie lang sollte ein Erklärvideo sein?"})]})]})]})}export{k as default};