Youtube Video "responsive" einbinden

DirkL

Gut bekanntes Mitglied
13. Oktober 2012
288
6
Hallo zusammen,

da dieses Thema immer mal wieder hier im Forum aufkommt möchte ich euch die von mir umgesetzte Möglichkeit Youtube Videos im Shop einzubinden nicht vorenthalten. Bis jetzt habe ich noch nicht gesehen, dass Videos "responsive" eingebunden wurden, dass heißt auch bei der mobile Version des Shops werden die Videos sauber angezeigt ohne dabei das Template zu versauen :) Nach einiger Recherche bin ich auf nachfolgenden Code gekommen, der beim Shop4 einwandfrei funktioniert.

Die Videos habe ich bis jetzt nur auf den Artikeldetailseiten eingebunden, sollten aber an allen möglichen Stellen im Shop funktionieren. Über die Wawi lässt sich das Video wie folgt einfügen. Gehe in die Artikelbeschreibung in den HTML-Editor, schreibe hier an der Stelle an der das Video erscheinen soll einen kleinen Vermerk, z. B. das Wort Video. Wechsle nun in die Ansicht mit dem HTML-Code. Suche den Vermerk Video, nun das Wort markieren und an dieser Stelle den nachfolgenden Code einfügen.

Wichtig ist noch, dass der Link zum Video angepasst wird. Hier gehst du auf dein Video bei Youtube, anschließend auf Teilen und dann den Tab "Einbetten" wählen. Hier findet sich der passende Link, diesen bzw. die VideoID kopieren und im Code entsprechend anpassen. Nach dem Speichern und einem Abgleich siehst du das Video in passender Größe in deinem Shop ;)

HTML:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/VideoID' frameborder='0' allowfullscreen></iframe>
</div>

Ich würde mich über Rückmeldungen freuen ob es bei euch funktioniert oder nicht.


Viel Spaß und Gruß
Dirk

PS: Falls jemand eine Verbesserungsmöglichkeit findet, der darf sich natürlich gerne melden :)
 
  • Gefällt mir
Reaktionen: ellen und chriddl

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.701
1.612
Berlin
AW: Youtube Video "responsive" einbinden

Bootstrap bringt auch schon die Möglichkeiten, Videos responsive einzubinden, hierfür bereitgestellte Klassen sind "embed-responsive embed-responsive-4by3".

bei diesem Beispiel nehme ich die in der Wawi bereitgestellten Videolinks von Youtube, die normal unter media zu finden wären und binde sie oben in der Galerie als klickbares Thumbnail ein in der sie dann auch angeschaut werden können.
Aschenputtel | Mawi Spiele - Sinnvolle Geschenke und Spielgeräte - für Kindergarten, Krippe und Tagespflege


hier eine Erklärung und ein Demo wie es geht:
https://codepen.io/ncerminara/pen/zbKAD/
 
  • Gefällt mir
Reaktionen: Xantiva

HQS Shop

Aktives Mitglied
26. April 2016
18
0
AW: Youtube Video "responsive" einbinden

Alles klar, sehr geile Sache das klappt bei Youtube Videos einwandfrei ;)

Wie stelle ich jetzt das gleiche Prinzip für Bilder her ? Den Dort wird das Bild in voller Größe angezeigt aber in dem Bildfenster muss ich nach oben und unten scrollen damit ich alles sehen kann. Also sprich das Bild ist in einem seperatem Fenster.
 

HQS Shop

Aktives Mitglied
26. April 2016
18
0
Kann mir jemand den Code so optimieren das ich in die Kategorien meine Youtube Videos nebeneinander bekomme? Und die dann auch responsive sind?

Hier die Bilder:

upload_2016-9-8_10-13-24.png
 

HQS Shop

Aktives Mitglied
26. April 2016
18
0
Ok nächste Frage ich bekomme auf der Startseite die Videos nicht nebeneinander, kannst du mit bei der Anpassung des Codes helfen?

Was mache ich da falsch?

1e667230-33da-4337-858b-7b0f772a6f1b
upload_2016-9-8_17-58-55.png


caa0b0c3-6ddb-4b78-a91c-cd21dc2ca195
 

HMM

Aktives Mitglied
23. Februar 2015
55
3
Eine Frage haben wir hier. Wir haben nicht für jedes Produkt ein Video. Kann man so einstellen, dass abhängig von der Inhalte der Mediendateien dann das Video erscheint. Wir benötigen hier ein wenig Hilfe.

Danke
 

HMM

Aktives Mitglied
23. Februar 2015
55
3
Hallo css. Wir brauchen mehr info wie das am bestens geht. Wir sind nicht ganz firm in der Materie können aber ein Paar Vorschläge umsetzen.

Danke für die Hilfe.
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.701
1.612
Berlin
Es gibt ja in der wawi die Möglichkeit Medien Dateien für Produkte einzubinden, dort habt Ihr ja auch die Möglichkeit urls zu hinterlegen.
Im Template selbst gibt es bei productdetails die Datei mediafile.tpl die müsste dann nur angepasst werden das sie auf eure Youtube videos reagiert..

Hier habe ich es beispielsweise so gemacht das wenn Medienfiles eingebunden sind, ich diese oben in der Galerie hinzufüge, denn unten am Ende der Seite schaut ja keiner.
http://bit.ly/2dXgUP4
 

HMM

Aktives Mitglied
23. Februar 2015
55
3
Das ist genau was wir auch machen wollen, die Videos in der Gallerie einzusetzen. Können Sie uns die Anpassung senden. Wir sind bereit auch dafür zu zahlen. Es wird uns viel Zeit kosten, bis wir die Anpassung machen können. Wir möchten eventuell mehr als ein Video pro Produkt einstellen.

Danke
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.701
1.612
Berlin
Ja das kann ich, kommt aber auch darauf an, welches Template und welches Javascript Framework für die Galerieansicht verwendet wird, bei dem Beispiel baue ich auf das originale EVO mit seiner Galerie auf, herauszufinden wie es geht war extrem nervenaufreibend, da JTL hier keine Einstiegsmöglichkeiten zulässt.

Schreibt oder ruft mich einfach an, damit ich vorab den Shop sehen kann, dann werden wir und schon einig, meine Daten sind ja in der Signatur.
 

chriddl

Gut bekanntes Mitglied
23. Dezember 2007
112
2
21376 Garlstorf
Ich habe den Code von DirkL eingebunden. Das Video wird responsive angezeigt. Leider wird dann in der Spalte links für die Boxen nichts mehr angezeigt und unter dem Video erscheint nun das Kontaktformular und das Hintergrund-Bild. Gibts da noch einen Trick?
 
Zuletzt bearbeitet:

chriddl

Gut bekanntes Mitglied
23. Dezember 2007
112
2
21376 Garlstorf
OK, habs gefunden. Hatte 4 Videos untereinander. Jeden Code einmal getauscht und am letzten lags, obwohl eigentlich identisch mit den anderen.
Danke für's Teilen deiner Idee Dirk!
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.701
1.612
Berlin
Ist natürlich recht trafficlastig das ganze wenn du da die Menge an Videos einbindest, es gibt Techniken die die Videos erst bei bedarf laden.

HQS etwas weiter oben hier im Thread ist seit dem Beitrag ein Kunde und hatte ein Plugin in Auftrag gegeben, dass die Videos aus allen eingetragenen Channels auslesen und automatisch per Funktionsattribute und Artikelnummern auf den Artikelseiten einbinden kann.

Der Vorteil ist zum einen dass vorab nur die Bilder gezeigt werden, und es bei bedarf für weitere Videos einen platzsparenden Slider gibt.

https://hqs-shop.de/Rupes-BigFoot-LHR-15-ES
 

aaha

Sehr aktives Mitglied
11. Januar 2007
531
60
Zuletzt bearbeitet:

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.701
1.612
Berlin
na dann warte mal ab :)
das wird bald veröffentlicht und wird sich für jeden lohnen der viel mit videos arbeitet bzw. seinen eigenen channel hat oder sich bei anderen Channels bedienen darf.

Es gibt nun auch eine Box mit Video News die man über die Boxenverwaltung wo auch immer einbinden kann und man kann die eingelesenen Channels um interne Tags erweitern die dann nur im Shop gültig sind um diese eben mit Artikelnummern oder keywörter zu befüllen.

https://css-umsetzung.de/shop/demo/youtubeTags01.jpg
 

mark3232

Aktives Mitglied
27. Dezember 2016
41
0
Perfekt!!
Genau das habe ich gesucht. Dank deiner tollen Beschreibung habe auch ich das ohne Probleme hin bekommen. Danke dafür!!