In diesem Tutorial lernst du, wie du ein Video so in deine Website einbettest, dass es responsive ist - also auch auf mobilen Geräten korrekt angezeigt wird.
Für alle, die lieber lesen, hier die Transkription des Videos. Du findest ganz am Ende auch den Link auf das Webtool, das ich im Beitrag erwähne.
Hallo und herzlich willkommen zu einem neuen Tutorial von web2use.ch. Mein Ziel ist, dass dir das Pflegen der Inhalte auf deiner Website wieder richtig Spass macht, denn nur eine regelmässig gepflegte Website hat im Internet auch Erfolg. Und das soll mit viel Spass und vor allem - viel Effizienz verbunden sein.
Was ich dir heute zeige, ist der Umgang mit Youtube-Videos. Generell mit iFrames, mit Inhalte, die via iFrames von externen Websites eingebunden werden, natürlich, aber ganz konkret gehts hier um Youtube.
Es gibt Studin, die sagen, dass bis in wenigen Jahren Videos rund 80% aller konsumierten Webinhalte ausmachen. Bewegtbilder haben in den letzten Jahren eine norme Bedeutung erlangt und trotzdem ist es so, dass das Einbetten von Videos eine etwas mühsame Sache ist.
Wenn ich nämlich ein Video von Youtube einbetten will, gehe ich auf youtube und hole so wie bei diesem Tutorial hier, den Einbettungscode mit "Teilen" --> "Einbetten". Den kopiere ich und füge ihn in den Quelltext meiner Website ein. Wenn ich das speichere und mir meine Website mit dem eingebetteten Video dann anschaue, stelle ich fest, dass das Video eine fixe Breite hat und nicht wirklich responsive ist, das heisst, es passt sich nicht an die Breite des Bildschirms an. Genau das sollte das Video aber können.
Mit einem kleinen Hack ist das aber möglich. Ich zeige dir in diesem Tutorial wie.
Es gibt nämlich ein kleines Tool, das heisst www.embedresponsively.com. Mit diesem Tool kannst du das ganz einfach lösen.
Gehe wieder auf Youtube, dort beim gewünschten Film auf Teilen und dann kopierst du aber statt des Einbettungscodes den Link auf das Video. Diesen Link fügst du auf Embedresponsively in die Maske ein und klickst auf "embed". Jetzt erstellt dir das Tool einen neuen Einbettungscode.
Diesen Code kopiere ich jetzt mit Ctrl+C oder übers Kontext Menu (Rechtsklick --> Kopieren) und gehe wieder in meinen Beitrag. Dort füge ich diesen neuen Code wiederum an der gewünschten Stelle in den Quelltext ein. Dann speichere und schliesse ich diesen Beitrag und schaue mir das im Frontend an.
Und jetzt sehe ich auf den ersten Blick: Das Video nutzt nun die ganze Breite des zur Verfügung stehenden Raums aus. Zusätzlich passt sich das Video an die Breite des Raums an, der zur Verfügung seht, wenn ich das Fenster schmaler mache. Damit wird das Video auch auf mobilen Geräten stets korrekt angezeigt.
Das funktioniert sehr gut, ich mache das auch auf meiner eigenen Website so.
Deshalb unbedingt daran denken: Videos einbetten ist eine tolle Sache und ein wichtiges Gestaltungselement und ist auch sehr einfach, aber mit den Bordmitteln von Youtube nicht sehr elegant. Mit embedresponsively holst du da sehr viel mehr raus.
Ich konnte dir damit hoffentlich etwas zeigen, das du so noch nicht gewusst hast und das dir wirklich mehr Effizienz und auch mehr Spass beim Aktualisieren deiner Website gibt.
Wie immer würde ich mich freuen, wenn du meinen Kanal abonnierst. Ich würde mich auch sehr freuen, wenn du auch die einen oder anderen Tutorials auf meiner Website anschaust und wie üblich gilt: Du kannst auch, falls du eine konkrete Frage hast, ein Tutorial bei mir in Auftrag geben. Ich werde das dann sehr gerne für dich realisieren. Oder auch - auch das kommt immer wieder vor - stell doch eine einfache Supportfrage, dann schaue ich mir dein Problem an - und wenn das mit vertretbarem Aufwand möglich ist - dann liefere ich dir auch sehr gerne eine Antwort.
Und hier für alle, die nicht alles durchgelesen haben noch der Link separat:
Weitere Tutorials in der Kategorie "Advanced":
- Grundkurs zum SP Pagebuilder 4 - Video 1: Worum gehts überhaupt?
- Grundkurs zum SP Pagebuilder 4 - Video 2: Den Pagebuilder installieren
- Grundkurs zum SP Pagebuilder 4 - Video 3: Die wichtigsten Steuerelemente des Pagebuilders
- Grundkurs zum SP Pagebuilder 5 - Video 1: Worum gehts überhaupt?
- Grundkurs zum SP Pagebuilder 5 - Video 10: Grundeinstellungen von Addons
- Grundkurs zum SP Pagebuilder 5 - Video 2: Den Pagebuilder installieren
- Grundkurs zum SP Pagebuilder 5 - Video 3: Die wichtigsten Steuerlemente
- Grundkurs zum SP Pagebuilder 5 - Video 4: Der Backend-Editor
- Grundkurs zum SP Pagebuilder 5 - Video 5: Der Frontend-Editor
- Grundkurs zum SP Pagebuilder 5 - Video 6: Eine Seite erstellen und ins Menu einbinden
- Grundkurs zum SP Pagebuilder 5 - Video 7: Aufbau einer Seite mit Zeilen (Sections), Spalten und Addons
- Grundkurs zum SP Pagebuilder 5 - Video 8: Einstellungen einer Zeile im Detail
- Grundkurs zum SP Pagebuilder 5 - Video 9: Einstellungen einer Spalte im Detail
- Joomla 4 - ein erster Blick auf die neue Version
- Joomla verstehen lernen - Sprachoverrides
- Joomla Video-Tutorial: Beitragsinfo bei Beiträgen ausblenden
- Joomla Video-Tutorial: Den Joomla Content Editor (JCE) installieren
- Joomla Video-Tutorial: Joomla mod_custom
- Joomla Video-Tutorial: Modul in Beitrag anzeigen
- Joomla Video-Tutorial: Modulpositionen in Templates anzeigen
- Joomla Video-Tutorial: Registrierung abschalten
- Joomla Video-Tutorial: Videos responsive in Websites einbetten
- Login - Logout-Navigationspunkt und Modul für eingeloggte und nicht eingeloggte Benutzer
- Mit dem SP Pagebuilder Dateien verlinken
- Responsive Webdesign mit dem SP Pagebuilder 4 von Joomshaper
- SP Pagebuilder 4 - eine Neubeurteilung
- SP Pagebuilder 4 - Wie man Joomla-Beiträge in den Pagebuilder überführt
- SP Pagebuilder und Joomla Content Editor - Sie können es doch, miteinander!
- SP-Pagebuilder 4 von Joomshaper - Addons einfügen und bearbeiten
- SP-Pagebuilder 4 von Joomshaper - Erweiterte Einstellungen von Addons
- SP-Pagebuilder 4 von Joomshaper - Erweiterte Zeileneinstellungen
- SP-Pagebuilder 4 von Joomshaper - Umgang mit Zeilen und Spalten
- SP-Pagebuilder 4 von Joomshaper - Umgang mit Zeilen und Spalten
- SP-Pagebuilder von Joomshaper - ein erster Blick auf den Pagebuilder 4
- SP-Pagebuilder von Joomshaper - Upgrade von Version 3 auf Version 4
- SP-Pagebuilder von Joomshaper Nr. 1: Worum gehts überhaupt?
- SP-Pagebuilder von Joomshaper Nr. 10: Text-Block-Addon
- SP-Pagebuilder von Joomshaper Nr. 11: Bild-Addon
- SP-Pagebuilder von Joomshaper Nr. 12: Galerie-Addon
- SP-Pagebuilder von Joomshaper Nr. 13: Joomla-Modul-Addon
- SP-Pagebuilder von Joomshaper Nr. 14: Formatiertes Addon als eigene Vorlage speichern
- SP-Pagebuilder von Joomshaper Nr. 15: Formatierte Zeile (Section/Row) als eigene Vorlage speichern
- SP-Pagebuilder von Joomshaper Nr. 16: Seiten kopieren bzw. exportieren und importieren.
- SP-Pagebuilder von Joomshaper Nr. 17: Was tun, wenn Plugins im Pagebuilder nicht funktionieren?
- SP-Pagebuilder von Joomshaper Nr. 18: Den Pagebuilder in Beiträgen nutzen
- SP-Pagebuilder von Joomshaper Nr. 2: Den Pagebuilder installieren und konfigurieren
- SP-Pagebuilder von Joomshaper Nr. 3: So erstellst du eine Seite und baust sie in die Navigation ein
- SP-Pagebuilder von Joomshaper Nr. 4: Zeilen und Spalten einfügen und verschieben
- SP-Pagebuilder von Joomshaper Nr. 5: Zeilen, Spalten, Addons formatieren - die Grundlagen
- SP-Pagebuilder von Joomshaper Nr. 6: Zeilen formatieren im Detail
- SP-Pagebuilder von Joomshaper Nr. 7: Spalten formatieren und verschachteln
- SP-Pagebuilder von Joomshaper Nr. 8: Inhaltselemente (Addons) einfügen
- SP-Pagebuilder von Joomshaper Nr. 9: Überschriften-Addon (Kopfzeile)
- Wie "Sperren fehlgeschlagen. Fehler" oder "Checked out" mit der globalen Freigabe gelöst werden können
- Zusammenspiel zwischen SP Pagebuilder, Template, Beiträgen und Modulen