In this article, we’ll walk through embedding Microsoft Stream videos into Immerse pages. Embedding a video allows readers to watch the content while staying in the Doc itself. It also means you can collect video metrics, seeing which readers watched the video and for how long. Let’s get started.
Check the HTML widget is enabled in the Turtl editor
In the Turtl editor, navigate to your Immerse page and check that you can open the HTML widget from the panel on the left-hand side. If you can’t access the HTML widget, contact support@turtl.co or your Customer Success Manager, and we’ll get the HTML widget enabled on your account.
Find your Microsoft Stream embed URL
1. In Microsoft Stream, click the share icon on either the video page or through the search or browse function.
2. Select the ‘Embed tab’ and set your video options depending on your preferences:
Video size: Determines the size of the iframe for the video.
Autoplay: Toggle ‘on’ to allow the video to play automatically or ‘off’ for the video only to play when the user clicks the play icon.
Responsive: Toggle ‘on’ to allow a user to control the size of the video player when resizing their browser window or ‘off’ to keep the size static.
Show info: Toggle 'on' to show video information on the embedded video. This includes the video title, stats on views, likes, comments, and buttons to like the video and add to watchlist. Toggle 'off' to just show the play video icon.
Start at: Enter the time code (HH:MM:SS) that the video should start at, or play the video to find a specific point and select the share icon. By default, the time will pre-populate based on when you select the share icon.
3. Copy the embed code.
Paste the embed code into the Turtl editor
Open your chosen Doc and click Edit to enter the editor. Navigate to the Immerse page you want to add the video to and click on the HTML widget.
2. In the pop-up window, paste the embed code into the box in the ‘Source’ tab and click ‘OK’. The video thumbnail will now be visible on your page and readers will be able to view the video directly from your Turtl Doc.
Note: We strongly advise you to make the iframe responsive by changing the width and height to 100%.
width="100%" height="100%"
Resize your video
Need to adjust the size of your video? Check out the Turtl Doc below to see how to resize the player on your Immerse page.
You can find out more about resizing widgets here.
Note: To explore other options for embedding videos, see this section.