Versions Compared

Version Old Version 1 New Version 2
Changes made by

Benedict Häfeli

Benedict Häfeli

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

...

Code Block
https://feed.yellow.camera/HV0QVX4YVLAXEMEP?scaler=fitwidth

This url parameter is available for all except panofeeds.

...

  • FitWindow: The feed will always fit the window while preserving the aspect ratio of its content. This means that it may fill either the width or the height of the window, depending on the aspect ratio of the content and of the window itself. This is the default behaviour for all image feeds.

  • FitIfLarger: The feed will grow to the maximum size of its content, but not beyond it (pixels are not being blown up). If the content is larger than the window, it will behave exactly the same as FitWindow. This is the default behaviour for timelapse feeds.

  • FillWindow: The content will grow to fill the entire window, and will overflow in one dimension to keep its aspect ratio. The focus of the scaling action will always be the image center. This is the only option that will never produce letterboxes, but also the option that will almost always hide some part of the image.

  • FitWidth: The feed content will grow its content to fill the width of the window while preserving its aspect ratio. It will either letterbox the content in height if necessary, or cut off what overflows, but will keep the content centered while doing so.

  • FitHeight: The feed content will grow its content to fill the height of the window while preserving its aspect ratio. It will either letterbox the content in width if necessary, or off what overflows, but will keep the content centered while doing so.

...

  • autoplay=true (default false): If set to true, the video in the feed will start playing immediately when it is loaded.

  • loop=true (default: false): If set to true, the video will start playing again when it reaches the end, otherwise it will halt.

  • controls=false (default: true): If set to false, the timelapse video will not have a control bar and cannot be started or stopped manually (autoplay is not automatically activated along with this, but you should always turn it on when deactivating controls).

As the scaler parameter, these parameters can be used in the src of the iframe, like so:

Code Block
https://feed.yellow.camera/HV0QVX4YVLAXEMEP?autoplay=true&loop=true&controls=false&scaler=fillwindow

A note on scaler parameters and videos

The scaler

...

options “FitWidth” and “FillWindow” may lead to the video controls lying outside the window, making it impossible to stop or start the video on browsers that don’t support these actions by clicking on the video directly. It is recommended to always use autoplay when using either of these options.

Letterbox coloring

The letterbox is the area surrounding the content if it doesn’t fill out the entire iframe. This is white by default, but the color can be set with the url parameter ‘letterbox’. The value can either be any valid css color like for example ‘black’, ‘aliceblue’ or ‘hotpink’ or what have you, or it can be a hex color code. In case you’re going for a hex code, note that # is not a valid character in a url. The url encoding for it is %23.

Here’s an example for how to use the letterbox parameter:

Code Block
// named css color:
https://feed.yellow.camera/LAXEMEP?letterbox=fuchsia

// html color code, url encoded:
https://feed.yellow.camera/LAXEMEP?letterbox=%23FF00FF