Unkonventionelle design Idee

Hi @Longboard_Ivo,

Iframes lassen sich nicht wirklich responsiv einbinden. Das was oft als responsiv bei iframes bezeichnet wird, ist in wirklichkeit nur eine "zoom lösung". Man könnte also für verschiedene Auflösungen zoom faktoren in der css beschreiben und diese mit media queries einbinden. Wenn man dabei relativ viele Auflösungsbereiche festlegt kann man das fir die meisten Darstellungen relativ gut einbinden.

Man müsste die Webseite und das einzubindende Objekt sehen, da die css dazu genau an die Gegebebheiten angepasst geschrieben werden muss

Ed

 

Mal ne ganz andere Frage: Darfst du das überhaupt? Verlangt Guckel fürs kommerzielle Nutzen seiner Landkarten keine Lizenzgebühr?

 

Hi Eugene,

genau, das ist auch nur zoom. Du musst das so machen wie im Beitrag #4. Da muss man leider für jeden Breakpoint eine angepasste css machen, da sich die Höhe nicht optimal proportional verändern lässt.

ED

 

Macht es doch nicht so kompliziert http://holdirbootstrap.de/komponenten/#responsive-embed

 

Hab bei mir auf der Startseite auch ein iframe von Google Maps zu meinem Laden. Habe das iframe mit dem Tip aus #6 umwickelt. Problem ist, dass von Google im iframe eine width Angabe mitgegeben wird (1200px). Nehme ich die raus, ist das iframe quadratisch (300px x 300px). Sieht dann auch blöd aus. Zu sehen auf www.matchashop.de. Jemand eine Idee?

 

Hi @Kai Schoelzke ,

Dein Vorschlag funktioniert z.B. mit Videos oder Bilder (und da soll er natürlich immer verwendet werden wenns passt), nicht aber wenn du z.B. eine Webseite im Iframe oder ein Formular... anzeigen willst. Dann verändert sich zwar der "Rahmen", der Inhalt wird aber abgeschnitten. Also immer wenn die Bootstrap Variante nicht funktioniert, muss man den Inhalt zusätzlich zoomen und da musst Du die css mit Media Queries ansprechen, die den Zoom Faktor je Auflöung beschreiben. Mann kann das nicht über alle Bereiche dynamisch darstellen, so dass auch die Positionierung, Größe... passt..

ED

 

Hi @Florian (matchashop.de),

So musst du den code einbauen (ich habe Deinen code abgeändert ich will deinen hier nicht posten - du musst Deinen setzen bei src="....)

Code:

<div id="frame_ed">
        <iframe id="iFrame_ed" name="iFrame" scrolling="no" src="https://www.google.com/maps/embed?wmode=transparent&amp;pb=!1m18!1m12!1426.9323946859718!2d13.414536415665346!3d52.53465734289546!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m611eddde4!2se+52%2C+10405"></iframe>
    </div>

Das ist die css für bis 480px, die musst du für verschiedene Auflösungen angepasst mit Media Queries aufrufen

Code:

@media (max-width: 480px){
#frame_ed{
width: 450px;
height: 200px;
}

#iFrame_ed{
transform-origin: 0px 0px 0px;
transform: scale(0.4);
width: 900px;
height: 300px;
margin-top:-33.333%;
}
}

Du hast also einen äußeren container der beschreibt die Position und Größe auf der Webseite und einen inneren, da kannst du über den zoofactor... (scale(0.4) ist 40%) das optimal einpassen.

Und das für verschiedenen Auflösungen!!! Oben ist das Beispiel für bis 480px Bildschirm. Diesen code kopierst Du und legst für 768px, einen für 992px und einen für 1200px an (@media (max-width: 768px){...)

So kannst du (@Longboard_Ivo) das auch lösen.

Falls Ihr doch nicht klar kommt, kann ich das gerne vom Azubi am Montag für Euch schreiben lassen (bitte dann aber PN - Euren Code möchte ich nicht öffentlich posten - ausser Ihr habt nichts dagegen).

@Kai Schoelzke der Florian hat genau das Problem, das die Bootstrap Variante nicht löst.

ED