<![CDATA[IFrame auf mobilgeräten]]>Hallo zusammen,
ich lasse meine Überwachungskamera per Motioneye Stream in einem IFrame Widget darstellen. Der Stream ist fullHD und das Frame deutlich zu klein dafür. Auf dem desktoprechner ist das kein Problem. Das Bild wird skaliert und bei Klick darauf gezoomed. Auf Mobilgeräten wird aber nicht skaliert sonder stattdessen das Bild immer direkt im Zoom dargestellt. Dadurch kann ich zwar wunderbar den Putz an der Hauswand sehen aber sonst auch nix. Hat jemand eine Lösung dafür? Alternativ auch gerne ein Vorschlag für ein anderes Widget.

]]>https://forum.iobroker.net/topic/52069/iframe-auf-mobilgerätenRSS for NodeFri, 24 Apr 2026 23:37:20 GMTTue, 01 Feb 2022 18:33:42 GMT60<![CDATA[Reply to IFrame auf mobilgeräten on Wed, 02 Feb 2022 20:55:21 GMT]]>@crunkfx
Hi und danke.
Mit dem Code von dir war das Ergebnis wie vorher. Der Tipp hat mir aber entscheidend geholfen. Nur der Code ist etwas anders (habe ich mir aus einem anderem Beitrag zusammengereimt, ohne es zu verstehen).

<div style>\n \n<iframe style=\"transform-origin: 0px 0px 0px; transform: scale(0.20); width: 1900px; height: 1080px;\" src=\"http://192.168.178.124:8085\" name=\"iFrame\" scrolling=\"no\"></iframe>\n \n</div>

Vielen Dank für den Ansatz!

]]>https://forum.iobroker.net/post/754739https://forum.iobroker.net/post/754739Wed, 02 Feb 2022 20:55:21 GMT<![CDATA[Reply to IFrame auf mobilgeräten on Wed, 02 Feb 2022 19:55:21 GMT]]>@udo-hundsdörfer Hallo,
hier könnte dir ein responsives iframe Abhilfe schaffen. Tausch in der VIS das Iframe mit einem HTML Widget und füge folgendes ein:


<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      position: relative;
      width: 100%;
      overflow: hidden;
      height: 100%;
    }
    
    .responsive-iframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <iframe id="iframe1" class="responsive-iframe" src="https://kamera.url/"></iframe>
  </div>

</body>
</html>

Anschließend noch Kamera URL anpassen und testen.

]]>https://forum.iobroker.net/post/754689https://forum.iobroker.net/post/754689Wed, 02 Feb 2022 19:55:21 GMT