Autoplay embedded videos in ArcGIS Experience Builder

Summary

In ArcGIS Experience Builder, embedding videos to autoplay upon loading can significantly enhance user engagement and provide a dynamic way to present information. This article describes the workflows to autoplay embedded videos in an experience.

Procedure

Alter the video URL in the Embed widget

Note: 
This workflow only works to embed YouTube videos.

1. Open the ArcGIS Experience Builder project.
2. In the Insert widget panel, on the New tab, under the Page elements group, drag and drop the Embed widget onto the canvas. Change the widget style settings accordingly.
3. In the Embed panel, on the Content tab, for Embed by, ensure URL is selected.
4. Below Connect to data, specify the following URL in the URL input field.

https://www.youtube.com/embed/<the YouTube video ID>?autoplay=1&mute=1

Note:
Remove '&mute=1' to enable sound during autoplay.

5. Click outside of the URL input field to finish embedding the URL.
6. Click Save and Publish to publish the experience.

The image below shows the altered URL for a YouTube video (https://www.youtube.com/watch?v=MOyULJhSaqc) in the Embed widget URL input field. The video ID 'MOyULJhSaqc' is extracted from the YouTube video URL and added to the URL in Step 4.

Embed a video added in ArcGIS StoryMaps

1. Open the ArcGIS StoryMaps project or create a new story.
2. Add a video. Refer to ArcGIS StoryMaps: Add images and videos for instructions.
3. Configure the video playback to autoplay upon loading.
• If the video is added via the Upload option, refer to ArcGIS StoryMaps: Configure video playback for instructions. For Step 3 in the documentation, select Autoplay without controls or Autoplay with controls.
• If the video is added via the Link option, in the Add a video window, on the Link tab, insert URL for the YouTube video in the following format, and click Add.

<iframe src="https://www.youtube.com/embed/VideoID?autoplay=1&loop=1&autopause=0&background=1&mute=1" height="400" width="800"></iframe>

Note:
Remove '&mute=1' to enable sound during autoplay.

The image below shows the embed code with added parameters to autoplay a Youtube video using the <iframe> tag.

4. Publish the story. Refer to ArcGIS StoryMaps: Publish a story for instructions.
5. On the published story page, copy the URL.

6. Embed the copied URL in the ArcGIS Experience Builder experience.
   1. Open the ArcGIS Experience Builder project.
   2. In the Insert widget panel, on the New tab, under the Page elements group, drag and drop the Embed widget onto the canvas. Change the widget style settings accordingly.
   3. In the Embed panel, on the Content tab, for Embed by, ensure URL is selected.
   4. Below Connect to data, paste the copied story URL in the URL input field.
   5. At the end of the URL, concatenate the following parameters to display the video without the story header, cover, and scrolling motion.

?header=false&cover=false&scrolling=false

6. Click outside of the URL input field to finish embedding the URL.

7. Click Save and Publish to publish the experience.

The image below shows the concatenated story URL in the Embed widget URL input field.