Wie veröffentliche ich eine Yellow-Webcam auf meiner Webseite?

Created by Tanja Isler (Unlicensed)
Last updated: May 17, 2022 by Benedict Häfeli
2 min read

Feed als iFrame einbetten

Dies ist die einfachere der beiden Möglichkeiten. Allerdings haben Sie mit dieser Möglichkeit keine Kontrolle darüber, wie die Webcam angezeigt wird. Der einfachste Weg, einen Feed auf diese Weise einzubetten, ist der folgende: Öffnen Sie das Yellow-Portal, gehen Sie im Menü auf der linken Seite zu Feeds -> Bildfeeds und klicken Sie in der Liste mit der rechten Maustaste auf den gewünschten Feed. Wählen Sie anschliessend "einbetten". So wird Ihnen der Ausschnitt des HTML-Codes angezeigt, den Sie in den Code Ihrer Seite einfügen können. Der Code sollte so aussehen:

 

<iframe src="https://feed.yellow.camera/HV0QVX4YV" width="800" height="533"></iframe>

Sie müssen wahrscheinlich die Breite und Höhe anpassen, damit das iFrame in Ihre Seite passt. Damit ist alles Nötige erledigt. Der Feed sollte nun auf Ihrer Seite angezeigt werden.

Diese Art der Einbettung hat einen großen Nachteil: Sie ist nicht responsive. Wenn Sie das iFrame auf die Auflösung des Bildschirms skalieren möchten, müssen Sie etwas CSS verwenden (sehen Sie hier, wie Sie ein iFrame nur mit CSS responsive machen) oder sich mit Media Queries oder etwas JavaScript beschäftigen, um die Größe des Feeds anzupassen.

Responsives Verhalten

Beim Einbetten als responsive iFrame wird die Skalierung der Feeds durch die Breite bestimmt. Das heisst, das iFrame wird erweitert, um die verfügbare Breite zu füllen und die Höhe nach Bedarf zu skalieren, um das Seitenverhältnis zu erhalten. Es wird jedoch eine max-height css-Eigenschaft in Pixel (und nur wenn sie in Pixel angegeben ist) des iFrames akzeptiert.

Wenn eine maximale Höhe angegeben ist, wird der Feed nur die ganze Breite verwenden, wenn die daraus resultierende Höhe das Maximum nicht überschreitet, andernfalls dehnt er sich auf die maximal zulässige Höhe aus und passt die Breite an, ohne das Seitenverhältnis zu verändern.

Beachten Sie, dass die gesamte Höhe des Feeds möglicherweise nicht die Höhe des Bildes selbst ist. Im Falle eines Verlaufs- oder Archiv-Feeds ist die Bildauswahlleiste Teil dieser Höhe.