Foto-Webcam per iframe in eine Webseite einbinden

Foto-Webcam.eu bietet die Möglichkeit, eine Webcam als iframe in die eigene Webseite einzubinden. Damit steht der gesamte Funktionsumfang einer Foto-Webcam zur Verfügung, ohne die eigene Webseite zu verlassen.

Es gibt mehrere Möglichkeiten, den Frame mit dem Webcambild in der Größe zu steuern.
Diese Seite hat zur besseren Illustration einen farbigen Hintergrund, es funktioniert natürlich auch vor einem weißen Hintergrund.

Responsiver iframe, der sich dynamisch der Fenstergröße anpasst:

Sollen mehrere Kameras eingebunden werden, können auch mehrere <iframe>-Konstrukte nacheinander folgen.
Wichtig dabei: Der Skript-Code wird nur einmal, und zwar nach dem letzten iframe eingebunden.

<iframe width="99%" scrolling="no" class="fw-player" allowfullscreen="1" 
frameborder=0 src="https://www.foto-webcam.eu/webcam/heidi-hotel/?frame=1"></iframe>

<script>
function fwFrameResize() {
var f= document.getElementsByClassName("fw-player");
var h= f[0].offsetWidth*9/16;
for(var i=0;i<f.length;i++) f[i].style.height= (h+((h<450)?145:95))+"px";
} window.addEventListener("resize", fwFrameResize); fwFrameResize();
</script>

Iframes mit festen Größen:

Der iframe kann in einer beliebigen Größe angegeben werden.
Wichtig ist, dass die Höhe im richtigen Verhältnis zur Breite sein muss und nach folgender Formel berechnet wird:
hoehe= breite*9/16+95
Bei Breiten unter 450 Pixel muss zur Höhe nochmal 50 addiert werden.
Da die native Breite der Bilder entweder 816 Pixel oder 1200 Pixel ist, bieten sich diese Größen für besonders gute Bildqualität an.
Bei jeder anderen Größe wird das Bild im Browser skaliert.

Statischer iframe 816x554:

<iframe width="816" height="554" scrolling="no" allowfullscreen="1" frameborder=0
src="https://www.foto-webcam.eu/webcam/heidi-hotel/?frame=1"></iframe>

Statischer iframe 1200x770:

<iframe width="1200" height="770" scrolling="no" allowfullscreen="1" frameborder=0
src="https://www.foto-webcam.eu/webcam/heidi-hotel/?frame=1"></iframe>