Responsiver IFrame

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Kreative-Gruppe
Posts: 73
Joined: Fri Feb 17, 2017 2:41 pm

Responsiver IFrame

Post by Kreative-Gruppe » Thu Apr 28, 2022 9:01 am

Hi Zusammen, da bin ich wieder mit der nächsten "dummen" Frage.

Ich binde auf einer CMS Seite einen IFrame ein der das Bild einer Raspberry Cam (Motioneye) darstellt. Das Bild der Cam ist auf 800X600 skaliert. Diese Bild wie gesagt wird mit einem Iframe (wer macht so was noch - ich) eingebunden. Das Bild wird auf einem sagen wir mal normalen Monitor korrekt dargestellt, wenn man aber die Skalierung des Bildschirms herabsetzt( oder ihn einfach mal schmaler macht), ändert das am IFrame ja überhaupt nichts, 800 PX Breite bleiben 800 Px - nur das Bild sieht dann beschi.... aus. Das Bild der Cam verschwindet hinter der Newsbox.

[ external image ]

Ich habe schon alle möglichen Tipps aus dem Netz (responsiver Iframe, mit und ohne CSS) ausprobiert - nichts hat geholfen.

Es gab vor Jahren hier mal ein Plugin das die Iframes responsiv angepasst hat, aber erstens ist das ewig her, zweitens läuft das bestimmt nicht mehr unter der neuesten Version und drittens weiss ich nicht ob das mit dem Bild der Cam funktionieren würde.

Hat irgendwer hier vlt. eine Idee oder einen Vorschlag wie ich nicht nur den Iframe sondern auch dessen Inhalt responsiv bekomme.

Ulrich

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Responsiver IFrame

Post by Holger » Thu Apr 28, 2022 10:00 am

Video-Iframes responsive einbinden geht mittels CSS eigentlich ganz gut.

Zum Beispiel hat Frank (frase) in diesem Template passende CSS-Styles eingebaut. Ein Beispiel für YouTube im IFrame ist dort auch enthalten. Für dich ist noch wichtig, dass du die Styles für 4:3 nimmst. Welche Styles du brauchst und wie sie angewendet werden, ist auf der Demo-Seite auch beschrieben. Das sollte eigentlich problemlos funktionieren.

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Responsiver IFrame

Post by Holger » Thu Apr 28, 2022 10:15 am

Ach ja, falls es nur um "Bilder", also nicht um Streams, geht: es gibt auch ein Plugin von Christoph: https://www.cmsimple-xh.org/de/?Plugin- ... h_one=0061

Ob das "out of the Box" responsiv ist, kann ich aber nicht sagen. Aber bei Bildern ist das ja leicht zu erreichen.

Ulrich
Posts: 28
Joined: Sun Jun 13, 2021 9:57 am

Re: Responsiver IFrame

Post by Ulrich » Thu Apr 28, 2022 11:14 am

Video-Iframes responsive einbinden geht mittels CSS eigentlich ganz gut
Mit Videos, z.B YouTube habe ich keine Probleme, die sind auf jeden Fall responsive. Das Problem ist der Live Stream der Kamera. Wenn ich den Stream zu YouTube hoch schicke und dann YouTube-live einbinde ist das auch responsive, ist aber zu viel Aufwand. Und der Raspi schafft es nicht einen sauberen Stream auf YouTube hochzuladen.

Deshalb die direkte Streameinbindung per IFrame und die hätte ich gerne responsive.

Ulrich

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Responsiver IFrame

Post by Holger » Thu Apr 28, 2022 11:31 am

Hmm. Was genau bindest du denn wie im IFrame ein? Irgendeinen Player, der sich vielleicht sträubt? Dann könnte das schwierig werden...

EDIT: Ahh, Motioneye. Kurz gelesen... Ich glaube, das wird ohne weitere Hilfsmittel dann nicht klappen.

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Responsiver IFrame

Post by Holger » Thu Apr 28, 2022 11:57 am

Vielleicht mit einem HTML-Player wie https://github.com/videojs/video.js den Stream direkt vom Paspi holen? Der Player kann auch "responsive". Ist aber alles stochern im Nebel. Ich kenn' mich da nicht wirklich aus, sorry.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Responsiver IFrame

Post by lck » Thu Apr 28, 2022 7:57 pm

Kreative-Gruppe wrote:
Thu Apr 28, 2022 9:01 am
Hat irgendwer hier vlt. eine Idee oder einen Vorschlag wie ich nicht nur den Iframe sondern auch dessen Inhalt responsiv bekomme.
Eventuell hilft das schon

Code: Select all

img {
	width: 100%;
	height: auto;
}
Kreative-Gruppe wrote:
Thu Apr 28, 2022 9:01 am
Es gab vor Jahren hier mal ein Plugin das die Iframes responsiv angepasst hat, aber erstens ist das ewig her, zweitens läuft das bestimmt nicht mehr unter der neuesten Version und drittens weiss ich nicht ob das mit dem Bild der Cam funktionieren würde.
Meinst du jm_iframe? Ich habe das vor ein paar Jahren mal für XH 1.7.0 angepasst. Wenn du es haben möchtest dann schicke ich es dir per PM.


*Edit: evtl dem iFrame noch dies verpassen

Code: Select all

iframe {
	aspect-ratio: 4 / 3;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmss
Posts: 244
Joined: Mon Jan 02, 2017 6:15 pm

Re: Responsiver IFrame

Post by cmss » Sat Apr 30, 2022 5:31 pm

Nach https://www.w3schools.com/howto/howto_c ... frames.asp sollte das alles kein Problem sein

.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}

< div class="container">
< iframe class="responsive-iframe" src="https://cdn.pixabay.com/photo/2022/03/2 ... "></iframe>

Kreative-Gruppe
Posts: 73
Joined: Fri Feb 17, 2017 2:41 pm

Re: Responsiver IFrame

Post by Kreative-Gruppe » Sun May 01, 2022 2:04 pm

Danke für die vielen Tipps,

aber auch den letzten, mit den responsiven Iframes habe ich schon probiert.
Nach https://www.w3schools.com/howto/howto_c ... frames.asp sollte das alles kein Problem sein
Der Iframe ist ja auch responsive, der ändert schön brav seine Größe, aaaaber

der Stream der in diesem IFrame angezeigt wird, bleibt so groß wie er ist, wenn man das Browserfenster verkleinert, verkleinert sich auch der IFrame, allerdings wird dann vom rechten und vom unteren Rand immer mehr vom Streambild abgeschnitten, so dass dann nur noch das obere linke Eckchen zu sehen ist.

Mit Videos, wie in den ganzen Beispielen ist das alles kein Problem, da klappt das, aber eben nicht mit einem Live Stream.
Warscheinlich werde ich doch den Umweg über YouTube o.ä, gehen müssen um dann das Video von dort einzubetten.

Ulrich

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Responsiver IFrame

Post by frase » Sun May 01, 2022 2:26 pm

Kreative-Gruppe wrote:
Sun May 01, 2022 2:04 pm
Der Iframe ist ja auch responsive, der ändert schön brav seine Größe, aaaaber

der Stream der in diesem IFrame angezeigt wird, bleibt so groß wie er ist
Na klar, der Inhalt des iFrames weiß ja nichts davon, dass er irgendwo eingebunden wird.
Also musst du auf der Live-Stream-Seite dem Bild oder dem Film Ludwigs Vorschlag verpassen wenn die iFrame-Größe stimmt:

Code: Select all

img {
	width: 100%;
	height: auto;
}
Die Frage ist, ob du an die von der Kamera erzeugte Seite rankommst. Denn dort musst die die Style-Änderungen machen.
Die andere Frage ist, ob du die Adresse, unter der die Kamera das Bild/Video/Stream abspielt, nicht sogar direkt in deine Website einfügen könntest?
Falls du schon etwas online hast, wäre ein Link hilfreich. Dann könnte man mal gucken.

Post Reply