How to Embed Millicast’s Hosted Viewer in Your Web Page

For ease of use and to help you get up and streaming quickly, Millicast provides you with a stream-viewer that is hosted on our service. You can easily embed this into your existing web pages by using an <iframe> tag. An iframe creates an inline frame, which embeds an independent HTML document into an existing HTML document.

Here is an example using the Millicast hosted viewer URL in an iframe:

<iframe src=”https://viewer.millicast.com/v1?streamId=[ACCOUNT_ID]/[STREAM_NAME]"></iframe>

The Millicast hosted viewer URL can be found in the Millicast dashboard:

By default, the Millicast hosted viewer is set to 100%, to fill the browser’s total viewable area. You can easily constrain the video to display in a limited space by using the iframe’s width and height properties:

<iframe width=”640" height=”360" src=”https://viewer.millicast.com/v1?streamId=[ACCOUNT_ID]/[STREAM_NAME]"></iframe>

By default, as an added constraint, the Millicast hosted viewer also has the video element’s playsinline attribute set to true, indicating that the video is to be played “inline” with your webpage content, and not enter full-screen when played on most mobile devices.

Playsinline reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

We hope you found this tutorial helpful. Please feel free to comment with any feedback or suggestions. Happy streaming!

-Team Millicast