Embed video, social media, and iframes

Share videos from YouTube, Facebook, Vimeo, or social media, and embed iframes on your sites or pages.

Display a video

Add video cards to embed YouTube, Vimeo, or Facebook videos.

To display a video, complete the following steps:

1. Edit a site or page layout.
2. In the Customize panel, select Layout.
3. Drag a Video card onto a row in the layout.
4. Paste a video URL from Facebook, Vimeo, or YouTube in the Video link field.
5. Depending on the video source, the following additional options appear that allow you to configure video display:
   • Facebook video—Provide Title text to enable accessibility, and choose Show post text to display the number of likes, comments, shares, and other related text. Choose Show captions always to display video captions.
   • Vimeo video—Provide Title text to enable accessibility, and choose Show video title, Show video owner, Show video owner thumbnail, or Loop video playback.
   • YouTube video—Provide Title text to enable accessibility, and choose Show YouTube branding or Loop video playback.
6. Click Save layout.

Display a single Facebook or X post

Display an individual post to highlight it specifically.

To display a single post, complete the following steps:

1. Edit a site or page layout.
2. In the Customize panel, select Layout.
3. Drag a Social media card onto a row in the layout.
4. In the Post or Timeline Link field, paste a URL for a publicly shared post.

   To copy the correct URL, select the post's time stamp (the date or time in the post's upper left corner), and copy the new URL from the browser before returning to edit your site.

5. Click Save layout.

Display a Facebook or X item

Display a Facebook or X timeline or event with options to send a message, increase header size, and include a cover photo.

To display a timeline or event, complete the following steps:

1. Edit a site or page layout.
2. From the Customize menu, select Layout.
3. Drag a Social media card onto an existing row.
4. In the Social media post URL field, paste a URL for any publicly shared Facebook page.
5. Optionally, turn on the toggle buttons for any combination of the following options:
   • Timeline allows a visitor to scroll down through previous posts.
   • Events displays a list view of the page's events views.

   When using the Social media card, you may notice an unexpected result with the Facebook Events feed. Read the Social media cards and Facebook events issue Blog article to find out more.

   • Messages allows people to send a message to the Facebook page's administrator using Facebook Messenger.
   • Use large header increases the size of the page's header.
   • Show cover photo displays the page's cover photo.
6. Click Save layout.

Embed content using an Iframe card

You can use an Iframe card to embed external resources, such as an app, web map, or dashboard, using its URL.

Tip:

Iframes are best used to display dashboards and infographics. For other items, including ArcGIS Experience Builder web apps, web maps, surveys, and stories, consider using a gallery card, map card, application card, or survey card.

Consider using no more than two iframe instances. Too many iframes on one site or page can compromise performance on mobile views. Whether you are using an iframe or another card, display no more than two key items for a cleaner, more accessible design. Try using a Gallery card for remaining items.

To embed content using an Iframe card, complete the following steps:

1. Edit a site or page layout.
2. In the Customize panel, select Layout.
3. Drag an Iframe card onto a row in the layout.
4. Provide the Iframe URL value, and select Apply.

   Tip:

   Paste only the URL that you want to embed, not iframe code from another website (the esri.com domain is not supported). Iframe URLs using HTTP will not appear in edit mode, which uses HTTPS. Save and view your site to observe the iframe.

5. If the embedded app is not performing well on smaller devices, provide an alternative URL for Mobile URL override.
6. Turn on the Hide on mobile toggle button if you don't have a mobile version of the application.
7. Turn on the Auto toggle button to enable scrolling.

   Tip:

   Scrolling is not always suitable on mobile devices as a user may be unable to pass over the application. Ensure that a scrollable iframe works on a mobile device before applying your changes.

8. Optionally, turn on the Enable sharing and Button always visible toggle buttons.
9. Provide the iframe height.
10. Provide Title text to enable accessibility.
11. Click Save layout.

Related links

For additional information, see the following:

• Edit a site
• Display apps, data, and web maps