{"id":74802,"date":"2018-02-08T17:28:12","date_gmt":"2018-02-08T16:28:12","guid":{"rendered":"https:\/\/clubcomputer.at\/?p=74802"},"modified":"2018-02-08T17:28:12","modified_gmt":"2018-02-08T16:28:12","slug":"videos-in-webseiten-einbetten","status":"publish","type":"post","link":"https:\/\/clubcomputer.at\/2018\/02\/08\/videos-in-webseiten-einbetten\/","title":{"rendered":"Videos in Webseiten einbetten"},"content":{"rendered":"

Diese Anleitung richtet sich an Betreiber von Webseiten. Es ist dabei egal, ob die Webseite handgestrickt ist oder mit einem CMS (also mit WordPress). Es geht darum, wie man Video- oder auch Audio-Files auf einer Webseite einbetten kann. Es gibt sehr viele verschiedene Video-Formate. Einigen wir uns der Einfachheit halber darauf, dass mit mit .mp4-Dateien arbeiten.<\/p>\n

Bevor wir \u00fcberhaupt mit dem Einbetten beginnen. In vielen F\u00e4llen gen\u00fcgt ein direkter Link in einem neuen Fenster, dann kann man viel der hier geschilderten Ma\u00dfnahmen vergessen. Daher wurde sowohl im Abschnitt um die „Einbettung in YouTube“ als auch bei der „Einbettung vom eigenen Server“ der direkte Links an den Anfang gestellt.<\/p>\n

Videos auf Webseiten publizieren ist sehr einfach geworden. Es gibt grunds\u00e4tzlich zwei verschiedene Herangehensweisen. Man kann das Video am eigenen Server speichern oder man kann das Video auf einem fremden Server (beliebt ist YouTube) speichern. Letztere Methode hat viele Vorteile, daher empfehlen wir sie grunds\u00e4tzlich.<\/p>\n

Speichert man ein Video auf YouTube<\/strong>, ist das urspr\u00fcngliche Format egal, was downgeloadet wird ist immer im .mp4<\/code>-Format. Die Speicherung ist kostenlos und belastet weder das eigene Webspeicherkonto, noch belastet es unseren Server beim Aufruf. Das ist schon einmal sehr freundlich. Dar\u00fcber hinaus hat man f\u00fcr die eigenen Videos zwei Plattformen: die eigene Homepage, in der das Video mit einm Kommentar versehen werden kann und die auf YouTube gespeicherten Version. Diese \u00f6ffentlichen Versionen kann man gegen unerw\u00fcnschte Einsicht auch sperren, indem man sie nicht „\u00f6ffentlich“ sondern „nicht gelistet“ freigibt. Die Einbettung auf der eigenen Seite erfolgt \u00fcber das Kodeschnipsel eines iframe<\/code>-Konstrukts, das auf der YouTube-Seite kopiert werden kann.<\/p>\n

F\u00fcr das Speichern am eigenen Server<\/strong> spricht, dass man es zum Beispiel aus Gr\u00fcnder der Firmenpolitik nicht m\u00f6chte, dass die eigenen Daten irgendwo auf der Welt verteilt sind. Speichert man also ein Video auf dem eigenen Server (zum Beispiel am ClubComputer-Server) kann das etwas komplizierter sein. Zuerst empfiehlt es sich, alle Videos in ein einheitliches Format zu bringen, es also YouTube gleich zu tun. Dann muss man sich darum k\u00fcmmern, dass die gew\u00e4hlte Endung, also .mp4,<\/code> auch vom Server verstanden wird. Das hei\u00dft, dass bei Anforderung einer Datei mit der Endung .mp4<\/code> der Server mit dem richtigen MIME-Typ\u00a0video\/mp4<\/code> antwortet. Ob das der Fall ist, h\u00e4ngt vom Baujahr des Servers ab. Unser Server zum Beispiel kennt diese Endung noch nicht und man muss sie ihm \u00fcber die Konfigurationskonsole bekannt machen. Schlie\u00dflich bettet man das Video \u00fcber ein video<\/code>-Tag, ein iframe<\/code>-Tag oder bei WordPress-Seiten \u00fcber Einf\u00fcgen -> AddMedia ein.<\/p>\n

In der Folge werden beide M\u00f6glichkeiten Schritt f\u00fcr Schritt beschrieben. Als einzubettendes Video dient uns ein sehr kurzes Video von Pixabay mit dem Namen pixabay-demo.mp4<\/code>.<\/p>\n

Video auf YouTube gespeichert<\/h2>\n

Direkter Link<\/h3>\n

Wenn man ein Video auf YouTube hochl\u00e4dt, kann man es unter einem eindeutigen Link ansprechen. In unserem Beispiel ist es folgender Code:<\/p>\n

[code lang=“html“]
\n<a href="https:\/\/youtu.be\/pXG9EUGJViM" rel="noopener" target="_blank">https:\/\/youtu.be\/pXG9EUGJViM<\/a>
\n[\/code]<\/p>\n

https:\/\/youtu.be\/pXG9EUGJViM<\/code><\/a><\/p>\n

Mit diesem Code \u00f6ffnet sich ein neues Fenster, in dem das Video abgespielt wird.<\/p>\n

Einbettung<\/h3>\n

YouTube-Videos sind entweder \u00d6ffentlich, Nicht gelistet oder Privat. Hat man ein Video \u00fcber den Upload-Button hochgeladen, werden die wichtigsten Angaben \u00fcber „Video bearbeiten“ im Video-Manager eingetragen; das ist ein Name, eine Beschreibung, der Grad der \u00d6ffentlichkeit (\u00f6ffentlich, nicht gelistet, privat). Auf der Seite kann man auch einen eindeutigen Link zu dem Video kopieren.<\/p>\n

Nehmen wir an, wir h\u00e4tten eine Seite, in der in einer Liste auf 10 Videos verzweigt werden soll, dann w\u00fcrde man bei jedem Klick ein neues Fenster (oder Tab) \u00f6ffnen. Das kann schnell un\u00fcbersichtlich werden. Man kann das vermeiden, indem man das Attribut\u00a0target=\"_blank\"<\/code> durch\u00a0target=\"MeinFenster\"<\/code> ersetzt. Der erste Aufruf eines Videos landet in einem neuen Fenster (oder Tab). Dieses Fenster bekommt aber den Namen MeinFenster und alle folgenden Aufrufe \u00fcberschreiben den dortigen Inhalt, wodurch die Browseranordnung \u00fcberschaubar bleibt. Es h\u00e4ngt aber nat\u00fcrlich von der gew\u00fcnschten Wirkung ab, ob man alle Videos in getrennten Fenstern\/Tabs \u00f6ffnet oder im selben.<\/p>\n

Einbettung des YouTube-Videos<\/h3>\n

Wenn man ein Video nach YouTube upgeloadet hat, sieht man die Einstellungen des dortigen Video-Managers:<\/p>\n

\"\"<\/p>\n

Der Unterschied zwischen „\u00f6ffentlich“ und „nicht gelistet“ ist, dass ein zuf\u00e4lliger Besucher nur die auf „\u00f6ffentlich“ eingestellten Videos finden kann. Die „nicht gelisteten“ k\u00f6nnen zwar genau so wie die \u00f6ffentlichen \u00fcber den Link abgerufen werden, sind aber ansonsten nicht zu sehen.<\/p>\n

Um das Video auf anderen Seiten einbetten zu k\u00f6nnen, befindet sich auf dem Video ein „Teilen“-Symbol.<\/p>\n

\"\"<\/p>\n

Klickt man es an, findet man zuerst die popul\u00e4rsten Zielseiten Facebook, Twitter und Google+ aber auch ein „Weiter“-Symbol „…“<\/strong>…<\/p>\n

\"\"<\/p>\n

…das weitere Kan\u00e4le anbietet aber auch den Link „Einbetten“<\/strong>:<\/p>\n

\"\"<\/p>\n

Dieser Link generiert einen kurzen HTML-Code, den man \u00fcber vier Checkboxen noch parametrieren kann.<\/p>\n

\"\"<\/p>\n

Dieser Einbettungscode schaut so aus:<\/p>\n

[code lang=“html“]
\n<iframe width="560" height="315" src="https:\/\/www.youtube.com\/embed\/pXG9EUGJViM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
\n<\/iframe>
\n[\/code]<\/p>\n

Diesen Kode f\u00fcgt man an der gew\u00fcnschten Stelle in die eigene Webseite ein, also zum Beispiel gleich nach diesem Text:
\n