Media Queries im iFrame nutzen

4 Antworten

Steffile
26.03.2015, 20:19

Den Inhalt des Iframes kannst du nicht veraendern, hoechstens Tricks benutzen, wie Z.B. eine weisse Div ueber einen haesslichen Rahmen platzieren oder so.

Ich verstehe deine Frage nicht ganz... aber falls du den Iframe responsiv haben willst, sodass er auf grossen Bildscirmen weiter ist und auf kleinen Bildschirmen schmaler, kannst du ihn in eine div mit position relative einfuegen und den Iframe selbst mit position absolut einfuegen:

HTML:

<div class="iframe-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
CSS:

.iframe-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.iframe-container {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.iframe-container {
  padding-bottom: 75%;
}
Tim204 
Beitragsersteller
 27.03.2015, 12:56

Vielen Dank für deine Antwort. Aber wie bereits gesagt, kann ich den iframe selber nicht direkt ansprechen.. Ich kann nur den Code meiner, IM iframe liegender, Seite bearbeiten.

Es handelt sich hierbei um die Artikelbeschreibung bei ebay. Dort wird der Inhalt direkt von einem iframe von ebay umgeben.. Diesen kann man logischerweise NICHT manipulieren.. sonst könnte man ja weiß Gott was mit ebay anstellen. Aber es muss doch eine Möglichkeit geben wie ich Elemente in meinem eigenen Bereich je nach Auflösung des Browserfenster selber anpassen kann, sei es auch nur eine Farbe von einem Background oder sonstiges.. 

So das mein CSS Code "einfach" auf die Größe des tatsächlichen Browserfensters achtet und entsprechend dann mit media queries Änderungen innerhalb meines Codes umsetzt. Der iframe selber oder alles weiter außerhalb liegende muss ja dabei nicht mal angerührt werden.

0
Nika2015
20.05.2015, 16:21

Hallo Tim,

hast du mittlerweile eine Lösung gefunden, wie du die von Ebay fest definierte Frame-Größe umgehen kannst? Stehe gerade vor dem selben Problem.

Schau mal hier:
https://evectio.de/ebay-mobile-produkt-template-kostenlos

Das hilft, Beschreibungen werden optimiert angezeigt, aber optisch halt nicht ganz überzeugend...

Tim204 
Beitragsersteller
 21.05.2015, 18:28

Hey Nika,

in allen Referenzen ist zwar die "Shopseite" responsive, aber die eigentlichen Angebotsseiten bzw Artikelseiten sind es nicht. Ich glaube auch, dass die Shopseite gar kein Iframe hat und somit auch total einfach responsive zu programmieren ist.. Ich habe leider noch nicht ein Händler gesehen der die Artikelseite responsive hinbekommen hat.. und ich bin bereits fast überzeugt, es gibt keine wirklich Lösung dafür. Ich werde erstmal bei meiner letzten erwähnten Methode verbleiben.

Grüße Tim

0
willspass
20.04.2015, 16:47

Ebay Beschreibungen sind allerdings auch nochmal ein Spezialfall. Habe gerade erst gehört das da etwas bzgl. responsive von Seiten eBay's geändert wurde, so das auch die Templates der darauf spezialisierten Agenturen teilweise nicht mehr richtig funktionieren. Schau dir einfach an wie andere (Profis!) das machen. Ist sehr kompliziert. Es wird über Tricks per Javascript alles von extern nachgeladen. Schau dir einfach deren Code und Css im iFrame an.  z.B. www.widshop.com
Tim204 
Beitragsersteller
 13.05.2015, 15:04

Vielen Dank für deine Antwort.

Ich habe mir mal die designs von dieser Firma angeschaut, leider konnte ich nicht wirklich ein "responsive" design finden.. Sie benutzen immer einen feste Größe für den Mainframe in den Angebotsseiten.

Ich habe angefangen das Template komplett in % Angaben zu bauen, so garantiere ich wenigstens beim öffnen der Angebotsseite, dass sich das Design der iframe Größe beim öffnen anpasst. Denn ebay setzt die Größe des Iframes beim Aufrufen der Seite, abhängig von der Browsergröße, fest.

Natürlich ist es dann ärgerlich wenn ein Besucher es erst im kleinen Browserfenster öffnet und dann die Seite auf Vollbildschirm stellt.. denn dann bleibt das design immer noch klein, bis der Besucher die Seite einmal refreshed.

0
ostfriesenjung
26.03.2015, 17:19

Da das Frame eine unveränderliche Größe hat, sich also nicht ändert wenn die Größe Browserfenster geändert wird, bleibt die darin angezeigter Inhalt auch entsprechend unverändert.

Darum "WEG MIT IFRAME" ... ;-)
Tim204 
Beitragsersteller
 26.03.2015, 17:25

Es handelt sich hierbei um den Bereich von der Artikelbeschreibung in ebay.. ich glaube kaum, dass ich deren iframe löschen kann ;)

Aber bei den media queries wird immer vom "Browserfenster" gesprochen.. fällt dieses wirklich durch ein iframe weg? Ist das iframe dann so gesehen das Browserfenster? Ich hatte immer angenommen es werden die Werte aus dem tatsächlichen Browserfenster ausgelesen.

0