How to publish a feed on your website

There are instructions on how to create and configure feeds here: https://avisec.atlassian.net/l/c/FpM2Atmp

This page deals exclusively with how to display feeds on your website.

Embed a feed in an Iframe

Yellow feeds are intended to be embedded into iframes. In its basic form, this is very simple. Just define an iframe, and use your feed link as the source:

You can autogenerate this snippet for your feed by opening the yellow portal, go to feeds->image feeds in the left-hand menu, and in the following list right-click on the desired feed and choose “embed”.

This will display the feed in your website, but of course the iframe is static in size, which is usually not what you want. Making the iframe itself responsive and behave in the way you want is a job for your web-developer, but here’s a possible solution for how to make an iframe responsive with only a bit of css if you’re in a hurry:

https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/

The good news is that the feed itself will always conform to the element into which it is embedded.

Controlling Responsive Behaviour with the scaler url parameter

In some cases, it may be that the way the feed itself fills out its iframe is not what you had in mind. For these cases, the responsive behaviour can be switched using the “scaler” url parameter which you can append to the src url of the iframe, for example like this:

This url parameter is available for all except panofeeds.

Valid values for scaler are (capitalisation is ignored when reading the value from the url):

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

Controlling timelapse feed playback behaviour with url parameters

For timelapse feeds, the playback behaviour of the video can be set like this:

• 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:

A note on scaler settings and videos

The scaler options “FitHeight”, “FitWidth” and “FillWindow” may lead to some or all 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: