Darstellungsfehler bei Mobil

Hallo, ich glaube es gibt da ein kleines Bug im responsive Template, wenn ich meine Seite unter iPhone aufrufe wird die Beschreibung ausgeklappt und es kommt eine graues Balken auf der rechten Seite. Das Problem besteht aber nur bei Produkte wenn hier Videos eingebunden sind.

Aus dem Kopf geraten ist das Video nicht Responsive eingebunden, so dass der Überstand den Hintergrund anzeigt. Ich könnte wetter das Iframe dazu hat eine feste breite.

1 Like

Vielen Dank für die Antworten… ich hatte die Videos Tatsächlich unter Artikelbeschreibung Kommentare die Youtube links eingebunden, bin aber davon ausgegangen das die shopware das Automatisch hinbekommt :slight_smile:

Also das Problem besteht dennoch graue Balken rechts auch ohne Videos :frowning:

Gepostet über iPhone 6 Plus

Die Ursache wird wahrscheinlich immer noch das iframe-Tag sein. Die Breite ist fix auf 420px gesetzt.

ich habe die fixe breite alles entfernt, wie kommt es wieder dahin? bzw. gibt es bei dem obigem Artikel gar keine Video

ich habe jetzt mal ein Video erstellt mit dem Problem auf einem iPhone 6+ und ich denke nicht das es an einem video liegt das graue Balken Problem, wenn ich Aktualisiere klicke bekomme ich kurzzeitig volles Bildschirm danach wieder Rechte graue Balken :frowning: hier das Video: https://youtu.be/QkoijmiQ1dE

kannst du mir bitte dieses video als Beispiel einbinden?

[quote=“doitauto”]kannst du mir bitte dieses video als Beispiel einbinden?[/quote] <iframe class="video" src="https://www.youtube.com/embed/QkoijmiQ1dE" frameborder="0" allowfullscreen></iframe> In die .less dann: .product--description iframe.video { .unitize-height( 315); width: 100%; .unitize(max-width, 560); } Hast du mehrere Video’s mit unterschiedlichen Höhen und breiten musst du dann neue Class vergeben: z.B.Und dann in der .less .product–description iframe.video–1

2 Likes

sorry wo finde ich den das .less?

Hallo Gemeinde,

ich würde gerne ein Youtube Video in die Kategorieseite bzw. Kategoriebeschreibung einbetten. Das klappt auch. Nur ist das mit dem Youtube Einbettungscode auch nicht responsive.

Beim Desktoprechner passt es. Bei IPad (hochkant) und Smartphone ragt es nach rechts über den Rand hinaus.

Ich habe diesen Thread zwar gelesen, bin aber noch kein Code bzw. .Less Profi.

Kann mir jemand genau anzeigen, wie ich den Einbettungscode (iframe…blablabla…) ändern muss?

Und vor allem wo in welcher Datei auf dem Server ich diese .less Datei wie ändern muss? Ich will das Video nicht in die Artikelseite sondern wie

gesagt auf die Kategorieseite einbetten. Das Video sollte sich dann bei den kleineren Bildschirmen responsive anpassen.

Ein eigenes Template hab ich bereits angelegt.

Schon mal Danke für evtl. Hilfestellungen.

Viele Grüße

Matthias

 

Ich habe dazu folgenden Link entdeckt.

http://www.webgipfel.de/videos-fuer-mobile-geraete-optimieren-in-wordpress-webseiten/

Das ist aber für wordpress. Kann ich das in SW 5 mit dem responsive Template auch so umsetzen? Wenn ja, wie?

Geht das dann über den Tiny Editor im HTML Fenster? Also alles da, wo ich den Iframe Code einbette?

Wenn ich den Div Code usw. einfach nur mit dem Tiny Editor einkopieren muss hätte ich kein Problem damit, da ich nur 10 Videos auf 10 bestimmten Kategorieseiten

einbetten will. 

Weiss jemand wie das geht? Wäre froh über eine kleine Hilfestellung :slight_smile:

 

Wenn gar nichts hilft, könnte ich die Videos alle nur mit 250 px Breite einbauen. Da man ja immer noch den Vollbildmodus aktivieren kann wenns einem zu klein ist.

In der mobilen Ansicht für Smartphone wäre in der Kategorieansicht aber 250 px immer noch zu breit. Da die Kategorie nur eine bestimmte, feste Breite nach links aufklappt. Selbst wenn man das Smartphone Quer stellt, klappt die Kategorieansicht nicht weiter auf. Da wäre es doch gut, wenn diese immer an die aktuelle Bildschirmbreite aufklappen würde. Oder ist das ziemlich komplex umzusetzen?

 

 

Viele Grüße

Matthias

 

@ uwe

hallo,

wenn ich das Video responsive auf der Startseite über den HTML Tiny Editor einbinden will, in welche Less kommt dann die Klasse rein?

Kommt das in die home.less?

Viele Grüße

Matthias

 

@malzfons schrieb:

Hallo Gemeinde,

ich würde gerne ein Youtube Video in die Kategorieseite bzw. Kategoriebeschreibung einbetten. Das klappt auch. Nur ist das mit dem Youtube Einbettungscode auch nicht responsive.

Beim Desktoprechner passt es. Bei IPad (hochkant) und Smartphone ragt es nach rechts über den Rand hinaus.

Ich habe diesen Thread zwar gelesen, bin aber noch kein Code bzw. .Less Profi.

Kann mir jemand genau anzeigen, wie ich den Einbettungscode (iframe…blablabla…) ändern muss?

Und vor allem wo in welcher Datei auf dem Server ich diese .less Datei wie ändern muss? Ich will das Video nicht in die Artikelseite sondern wie

gesagt auf die Kategorieseite einbetten. Das Video sollte sich dann bei den kleineren Bildschirmen responsive anpassen.

Ein eigenes Template hab ich bereits angelegt.

Schon mal Danke für evtl. Hilfestellungen.

Viele Grüße

Matthias

 

Hallo Matthias,

vielleicht ist ja dieses Plugin etwas für dich: http://store.shopware.com/scha127226123341/hinzufuegen-eines-responsiven-videos-youtube-vimeo-html5-beim-kategorie-listing.html . Dieses setzt ja ansich deinen Wunsch um.

Prinzipiell ist das ganze mit „ein bisschen CSS / LESS“ nicht unbedingt getan, prinzipiell brauchst du dafür auch ein bisschen JavaScript für voll responsiv.

In Einkaufswelten könntest du es lösen, indem du halt das Video verschieden groß ziehst.

Beste Grüße

Sebastian

1 Like

Hallo Sebastian,

ich habe mir das Plugin schon angesehen, aber da es ja nur für gewisse Positionen und nur in Kategorien ist, kann ich es nicht so einsetzen wie gewünscht. Ich platziere die Videos an bestimmten Stellen im Fliesstext. Ohne EKW auf der Startseite. Daher habe ich Uwes Lösung bevorzugen müssen. Ich habe die Video Klasse in die home.less eingefügt. Klappt super. Dachte nicht dass ich das hinbekomme. Danke an UWE und Sebastian für die Tipps.

Viele Grüße

Matthias

 

Hallo Matthias,

könntest Du mir verraten wo Du die .less Daten eingefügt hast?

.product–description iframe.video {
 
    .unitize-height( 400);
    width: 100%;
    .unitize(max-width, 640);
}

Ich brauche das responsive für Blogs, Kategorie und Artikel Seiten.

Vielen Dank

Marcel