Use the Office dialog box to show a video

Play a video in an Office Add-in dialog box to create more engaging user experiences.

Videos in dialog boxes are perfect for:

• Onboarding tutorials that guide users through your add-in's features.
• Product demos that showcase functionality.
• Training content that helps users get up to speed quickly.

To play a video in a dialog box with the Office dialog API, follow these steps.

1. Create a dedicated video page that contains an iframe and no other content. The page must be in the same domain as the host page. For a reminder of what a host page is, see Open a dialog box from a host page.

   In the src attribute of the iframe, point to the URL of an online video. The protocol of the video's URL must be HTTPS. In this example, we'll call this page video.dialogbox.html.

   Here's the markup:

   <iframe class="ms-firstrun-video__player"  width="640" height="360"
       src="https://www.youtube.com/embed/XVfOe5mFbAE?rel=0&autoplay=1"
       frameborder="0" allowfullscreen>
   </iframe>
   

2. Call displayDialogAsync in the host page to open video.dialogbox.html.

3. (Optional) If your add-in needs to know when the user closes the dialog, handle dialog close events. Register a handler for the DialogEventReceived event and handle the 12006 event. For details, see Errors and events in the Office dialog box.

See it in action

For a sample of a video playing in a dialog box, see the video placemat design pattern.

See also

• Use the Office dialog API in your Office Add-ins
• Best practices and rules for the Office Dialog API
• Handle errors and events in the Office dialog box