IFrame auf mobilgeräten

UHU01

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.

CrunkFX

@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.

UHU01

@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!

Community Forum

NEWS

IFrame auf mobilgeräten

Support us

385

32.8k

82.8k

1.3m