Video in Magento Shop einbinden

Wie ich bereits letzten Donnerstag geschrieben habe, sind wir wieder mitten in unserem Shop-Projekt. In diesem Projekt bauen Tarik und ich einen eigenen Shop. Unsere Domain ist Retter-Rob.de. Seit gestern ist der Shop endlich wieder online! In dem Shop gibt es alles für den Rettungssanitäter, Notarzt und für den kleinen Unfall im Haushalt.
Der Shop sollte Ursprünglich schon seit dem 1. Juni live sein, doch leider waren ein paar Voraussetzungen nicht gegeben um den Shop live zu stellen.

Die eine Voraussetzung war das Startseiten-Video, dieses beschreibt die Idee aufgrund derer unser Shop entstanden ist. Der Videodreh selbst lief nur schleppend, da wir beide sozusagen das erste Mal mehr oder weniger professionell vor der Kamera standen. Nachdem wir innerhalb von mehreren Sunden das Video endlich im Kasten hatten, musste dieses noch vom Band auf den PC überspielt werden.

Gestern ging es dann endlich daran das Video in unserem Magento-Shop einzubinden. Als erstes habe ich das Video bei dem allseits bekannten Videoportal YouTube hochgeladen. Zuerst muss man sich registrieren, danach genügt ein Klick auf "Video hochladen". Dies ist innerhalb von wenigen Sekunden geschehen.





Im Anschluss daran muss man lediglich den Einbettungs-Code von YouTube kopieren, diesen findet man rechts vom Video. Den Code habe ich mir dann noch ein wenig zu Recht bearbeitet, da die kleinste Größe für das Video 320 x 265 px war. Hierzu muss man ausschließlich an zwei Stellen die Größe aussuchen. (Hierbei ist es nicht nötig auf das Seitenverhältnis zu achten, da YouTube automatisch schwarze Balken in der richtigen Größe einpasst.)

Da wir das Video anstelle von einem Bild auf unserer Startseite einsetzen möchten, habe ich die Datei new.phtml geöffnet. Diese findet man auf dem Pfad : html - app - design - frontend - rob - rob - template - catalog - product. In dieser Datei habe ich das div gesucht, in dem das Bild ist, welches ich ersetzten wollte. Nun habe ich den Image-tag entfernt und an diese Stelle den Code von YouTube eingebaut.



Nun hatten wir nur das Problem, dass das Video nicht genau an der Stelle stand, an der das Bild vorher war. Nach kurzer Überlegung ist uns aufgefallen, dass alle Images einen ID haben, der für die css Datei wichtig ist. Also haben wir dem Object noch den ID des Bildes gegeben. Nun ist unser Shop einsatzbereit!