iframe - responsive - Höhe automatisierbar?

  • Hallo!

    Habe erstmals versucht über iframe fremde Daten einzubinden und stoße mit meinem Wissen dabei an Grenzen.

    Link der fremden Daten (Wetter):
    https://www.meteoblue.com/de/wetter/widg…erreich_2771277


    Link zur Versuchsseite:
    http://www.bi-mo.at/bi/wetter-fuer-das-mondseeland.html


    Quelltext vom Dienstanbieter:

    Code
    <iframe src="https://www.meteoblue.com/de/wetter/widget/daily/mondsee_%c3%96sterreich_2771277?days=7&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&pictoicon=1&maxtemperature=1&mintemperature=1&windspeed=1&winddirection=1&humidity=1&precipitation=1&precipitationprobability=1&pressure=1&layout=light"  frameborder="0" scrolling="NO" allowtransparency="true" style="width: 378px;height: 295px"></iframe><div><!-- DO NOT REMOVE THIS LINK --><a href="https://www.meteoblue.com/de/wetter/vorhersage/woche/mondsee_%c3%96sterreich_2771277" target="_blank">meteoblue</a></div>


    Probleme:

    • Auf der https://community.zeta-producer.com/www.metoblue.com Widget Seite zur Codeerzeugung steht "Das Widget ist anpassbar (responsive) und Sie können die iframe-Eigenschaften (außer "src") ändern, sodass es am besten in Ihre Webseite passt.", aber die angezeigte Größe ändert sich nicht und wird bei schmalem Fenster seitlich abgeschitten.
      Eingabe als "Quelltext" Artikel.
    • Habe versuchsweise "width = 100%" eingetragen. Dann wird der fremde Inhalt perfekt auf die Spaltenbreite vergrößert bzw. verkleinert.
      Das Problem dabei: Die Höhe der Darstellung ändert sich mit, aber die Höhe des Artikels bleibt gleich und wird deshalb der fremde Inhalt unten abgeschitten.

    Die Variante mit style="width: 100%;..." hätte mir gefallen, aber wie kann ich erreichen dass sich die Artikelhöhe (fremder Inhalt) automatisch an die geänderte Größe anpasst?

    Mir ist klar, dass das kein Zeta Problem ist! Vielleicht erhalte ich trotzdem einen Tipp.

    Freundliche Grüße
    Walter
    Zeta Producer 14.3.3, 15.4.1 und 16.8.6.0 Express

  • Hallo Walter,

    da ich gerade nicht vor meiner "Arbeitsmaschine" sitze, kann ich es selbst nicht testen, aber wie sieht es denn aus, wenn du bei "Width" deine gewünschten 100% einstellst und bei "Height" einen festen Wert eingibst, wie z.B. statt 295px dann 315px.

    Wird es dann besser?

    100% bei "Height" hast du vermutlich schon versucht? (Bringt wahrscheinlich nichts,oder?)

    Evtl. hilft dir auch folgendes vom Mario dazu: http://zella.de/code/iframe-responsive.html

    Gruß
    Jochen

  • Hallo Jochen,

    ja ich hatte davor schon rumprobiert und nun speziell dazu eine Testseite mit Varianten erstellt.
    Link zur veröffentlichten Testseite:
    http://www.bi-mo.at/zptest/test-iframe-wetter.html

    Ich verwende selber üblicherweise Firefox und damit sah das Original, wenn es rechts nicht abgeschnitten wurde, ganz OK aus. Mit anderem Browser und vor allem Internet Explorer ist sogar mit Originalcode verstümmelt.

    Dieses Wetter iframe ist kein Inhalt der auf unseren Seiten wichtig ist und ich kann die ganze im Aufbau befindliche Seite wieder entfernen.

    Allerdings kann ich mir vorstellen, dass die (responsive) iframe Größe für fehlerfreie Darstellung ein generelles Problem sein könnte und deshalb allgemeine Bedeutung hat.

    Freundliche Grüße
    Walter
    Zeta Producer 14.3.3, 15.4.1 und 16.8.6.0 Express

    Einmal editiert, zuletzt von Walter (17. August 2015 um 18:30)

  • Hallo!

    Habe mit etwas größerem height Wert und width 100% eine für diesen Fall brauchbare Lösung gefunden.
    Für Tests war die Auskunft des Dienstanbieters auch interessant. Dieser hat u.a. auf diesen Link aufmerksam gemacht:
    http://maddesigns.de/responsive-iframes-2417.htm

    Für meinen speziellen Fall war das zwar wegen wechselnder Seitenverhältnisse unbrauchbar, aber könnte vielleicht in anderem Fall mit gleichbleibenden Seitenverhältnissen hilfreich sein.

    Freundliche Grüße
    Walter
    Zeta Producer 14.3.3, 15.4.1 und 16.8.6.0 Express

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!