The live-streaming feeds from Multivista® Webcams can be embedded into clients’ websites, allowing the public to view the live streams outside the Multivista® Documentation Software (“MDS”) interface, without the need for MDS login credentials. The embedded live streams are viewable in all contemporary web browsers, as well as on iOS and Android mobile devices. This document provides instructions for successfully embedding feeds from Multivista® Webcams into clients’ websites.
This is a popular offering for high-profile, public interest projects. An example of how an embedded feed might look is shown in Figure 1:
To embed a Multivista® Webcam feed into a client’s website, the live stream is sized according to the client’s specifications and embedded into a standalone page; this page is then placed in an iframe HTML element on the client’s site. The process is as follows:
- Request an embedded feed link from Multivista Webcam Support (firstname.lastname@example.org). They will create and then provide a hyperlink (“EmbedFeedURL”) to the embeddable feed. The EmbedFeedURL supports the following optional URL arguments:
- Width: Sets the width of the embedded stream in pixels (Default = Stream Native Width).
- Height: Sets the height of the embedded stream in pixels (Default = Stream Native Height).
- Background: Sets the background color of the embeddable page. The color requested must be a valid HTML color name from the following list: Black(Default), Blue, Red, Gray, LightGray, DarkGray, Green, Pink, Cyan, Magenta, Orange, White, Yellow.
2.Create an iframe HTML element to accommodate the embeddable feed. See below for an example of the iframe code for an embedded feed sized to display 256x192px :
<iframe style="width:256px;height:192px;" src="[ EmbedFeedURL]&width=256&height=192&background=black" scrolling="no"></iframe>
Notes on iframe Attributes
- The iframe should have a fixed width/height set (i.e., use px/em, not %). Sizing with percentages can cause display errors on some devices. CSS media queries can be used to specify different width/heights for different screen sizes/orientations. To ensure reliable sizing across all platforms, specify the width/height of both the embeddable feed (by way of URL argument described above) as well as the iframe itself.
- The iframe needs the HTML attribute “scrolling="no"” to display reliably on mobile devices.