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:

www.embedresponsively.com

 

Weitere Tutorials in der Kategorie "Advanced":