A dialog is a small window that overlays (pops up over) the content of a webpage. Dialogs communicate information to a user and can prompt them with questions or actions that do not require a response.

Although there are semantic differences, for the most part, you can treat the terms "dialog" and "modal" as synonymous terms.

1. Open your page in Experience Editor where you want to insert a Video Dialog
2. Add it to the "body-content" placeholder UNDER THE FOOTER. It may get its own placeholder in the future.
3. This inserts a Video Dialog data source into your _Content folder. It will be represented in the Experience Editor with three fields and a placeholder.
4. Name: This is what you will use to open this Video Dialog from a link. For example, if you name this "video1", any "anchor link" configured with the anchor value that matches this name will open the dialog when clicked. (No need to ever use the #, it's implied)
5. Vimeo Embed Url: When you get the embeded iframe snippet from Vimeo for your video, it will have a src attribute that looks something like this: src="https://player.vimeo.com/video/123456789". That URL is what you want to copy and paste into this field. (Note: This is a different URL than what is used by the updated Video Hero Banner)
   If this field is left empty, the Video Dialog will render whatever is in it's placeholder instead. The idea is basically video OR form.
6. Iframe Title: Iframes require a "title" field for accessibility. This is preloaded with a very generic "Video" title to avoid forgetting it entirely. Update this with something fitting to the your video. You don't need this if you are not using the video.
7. Non-Video Content: This placeholder allows for a standard Highlight Section component, which in turn allows for forms and content-related components. Use the Highlight Section parameters to adjust the padding as needed. An "Extra Small" on Vertical Padding seems to work well.
8. Don't forget to add an anchor link somewhere on the page to open your Video Dialog.
9. Save and publish your page to see results

Like the previous Dialog component (which the Video Dialog should replace going forward) a Video Dialog on a page can also be opened by manually adding the #<name-of-the-video-dialog> to the url. For example, www.unum.com/hr-trends#video1

A Video Dialog is meant to contain another component and does not have its own properties.

The dialog component is not placed into frames.  It should be inserted in the content-body placeholder, under the footer.

When not being used to display an iframe video, the Video Dialog's placeholder accepts a Highlight Section component.

1. Name: This is what you will use to open this Video Dialog from a link. For example, if you name this "video1", any "anchor link" configured with the anchor value that matches this name will open the dialog when clicked. (No need to ever use the #, it's implied)
2. Vimeo Embed Url: When you get the embeded iframe snippet from Vimeo for your video, it will have a src attribute that looks something like this: src="https://player.vimeo.com/video/123456789". That URL is what you want to copy and paste into this field. (Note: This is a different URL than what is used by the updated Video Hero Banner)
   If this field is left empty, the Video Dialog will render whatever is in it's placeholder instead. The idea is basically video OR form.
3. Iframe Title: Iframes require a "title" field for accessibility. This is preloaded with a very generic "Video" title to avoid forgetting it entirely. Update this with something fitting to the your video. You don't need this if you are not using the video.
4. Non-Video Content: This placeholder allows for a standard Highlight Section component, which in turn allows for forms and content-related components. Use the Highlight Section parameters to adjust the padding as needed. An "Extra Small" on Vertical Padding seems to work well.

No imagery is used on the dialog component.

There is no special spacing for the Video Dialog. The only spacing that applies is spacing applied to the Highlight Section component, if using the placeholder.