iframe einbinden (oder doch nicht)

Auf meiner letzten Radreise im Frühjahr 2019 habe ich zu jedem Reisetag die Tourdaten meines Garmin GPS-Geräts in den jeweiligen Blogeintrag integriert. Ein Beispiel davon sieht man weiter unten, im erweiterten Beitrag.

Generell bin ich von der integrierten/eingebetteten Lösung nicht mehr überzeugt. Einerseits verursacht die Einbettung recht lange Ladezeiten und andererseits werden mir durch das Garmin-Snippet gleich 4 Tracker auf meine Seite geschleust. Das mag ich eigentlich gar nicht.

Die einfachste Lösung wäre ein Textlink auf die Garmin-Seite. Die schönere (aber natürlich aufwendigere) Lösung wäre, ein Screenshot von Garmin als JPG abzuspeichern, in die Mediendatenbank hochladen, in den Beitrag einfügen und von da auf die Garminseite zu verlinken. Ich mach das hier mal als Beispiel:

Ein weiterer Vorteil dieser Lösung ist, dass der Screenshot "ewig" verfügbar ist. Ob in z.B. 10 Jahren das Garmin-Snippet noch angezeigt wird oder die Linkadresse auf die Garmin-Seite noch stimmt, weiss ja niemand so wirklich...

Aufgrund dieses Kommentars lernte ich, dass ich bis anhin die Garmin-Tourdaten falsch eingebunden habe. Ich schaltete bisher im Eintrags-Editor auf "Quellcode" um und fügte den embedded-code von der Garmin-Seite (ohne jede Änderung) in meinen Beitrag ein. Doch... das ist des Teufels ? und falsch! Ich muss den Button mit dem Film-Zeichen wählen und so den Code einfügen. Weil ich das bisher noch nie so gemacht habe (Asche auf mein Haupt) ? will ich das hier ausprobieren.

Zuerst habe ich diesen Text geschrieben und nun füge ich den Garmin-Code ganz zu Beginn des Beitrags ein. O.K. Erkenne ich einen Unterschied zum Direkt-Einfügen? Der Quellcode zeigt mir, dass der Garmin-Code mit dieser Vorgehensweise in ein DIV eingepackt wird. Das soll wohl für mehr Sicherheit sorgen. Gut, ich bin ja ein braver Junge ?, deshalb mache ich das zukünftig so.

Bleibt eigentlich nur noch die Frage, ob ich diese Garmin-Daten so einbinden kann, dass ich auf der rechten Seite Fliesstext schreiben könnte. ? mit entsprechenden Anweisungen müsste das gehen ?

Nicht responsive! Der Original-Garmin-iframe hat eine feste Grösse von 465px Breite und 500px Höhe. Das sprengt die Anzeigebreite meines Mobile Phones. Auf www.css-tricks.com wird ein Beispiel gezeigt, wie man iframes in einen responsiven Container packt. Ich versuche das hier einmal...

... interessanterweise funktioniert das auf dem Mobile ganz ansehnlich. Weshalb ich hier am Laptop/Desktop diesen riesigen Abstand unterhalb des iframes sehe, ist mir (noch) nicht klar. (im Editor sieht es auch nach dem speichern ganz normal aus). Vermutlich liegt es daran, dass die Containerbreite 100% ist und bei einer Ratio von 465/500 die Höhe dann 107,5% entspricht. Am Mobile entspricht 100% der Displaybreite (hier ist die Anzeige viel breiter). Wohl deshalb schliesst auf dem Mobile der Text schön an den iframe an und hier nicht. Ich weiss es nicht... Doch nun ist Zeit für eine Mütze Schlaf...?

So, nun passt es auch hier (in etwa) mit der angezeigten Höhe, respektive des dargestellten Leerraums darunter. In der user.css habe ich gegenüber den Originalwerten von www.css-tricks.com folgende Änderungen vorgenommen:

[style*="--aspect-ratio"]::before {padding-bottom: calc(100% 465px / (var(--aspect-ratio)));}

Hier (Desktop-View) erkennt man kaum einen Unterschied zu vorher (vor css-tricks html/css). Auf dem Mobile wird die zur Verfügung stehende Anzeigebreite nun eingehalten. Der Inhalt des Containers (Garmin-Snippet) wird auf der rechten Seite einfach abgeschnitten. Eigentlich dachte/hoffte ich, dass sich der gesamte Inhalt proportional zu der maximalen Anzeigebreite verkleinert, doch dem ist nicht so.

Nachtrag vom 12.01.2020: Ich habe nun die CSS-Einträge von css-tricks.com wieder aus meiner user.css gelöscht. Für die nächste Reise (ab 15.02.2020) plane ich der Einfachheit halber jeden Tag einen Textlink auf die Garmin-Seite in den Blogeintrag zu schreiben. Nach der Reise, wenn ich dann mehr Zeit habe, generiere ich die oben gezeigten Screenshots und baue diese dann nachträglich in die Beiträge ein.