Share videos YouTube from Facebook, Vimeo, or social media and embed iframes on your sites or pages.
To edit a site, open the site in edit mode. To edit a page, open the page in edit mode.
Display a video
Add video cards to embed YouTube, Vimeo, or Facebook videos.
To display a video, complete the following steps:
- Open a site or page in edit mode.
- On the Customize menu, select Layout.
- Drag a Video card onto a row in the layout.
- Paste a video URL from Facebook, Vimeo, or YouTube in the Video link field.
- Depending on the video source, additional options appear that allow you to configure video display:
- For Facebook videos, enter a Title to enable accessibility, choose Show post text to display number of likes, comments, shares, and other related text. Choose Show captions always to display video captions.
- For Vimeo videos, enter a Title to enable accessibility, choose Show video title, Show video owner, Show video owner thumbnail, and Loop video playback.
- For YouTube videos, enter a Title to enable accessibility, choose whether to Show YouTube brandingYouTube and Loop video playback.
- Select Save.
Display a single Facebook or X post
Display a single post to highlight something specific.
To display a single post, complete the following steps:
- Open a site or page in edit mode.
- On the Customize menu, select Layout.
- Drag a Social media card onto a row in the layout.
- 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 then copy the new URL from the browser before returning to edit your site.
- Select Save.
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:
- Open a site or page in edit mode.
- On the Customize menu, select Layout.
- Drag a Social media card onto an existing row.
- In the Social media post URL field, paste a URL for any publicly shared Facebook page.
- Optionally, select the toggle button to turn on 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 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.
- Select Save.
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 Experience Builder web apps, Insights pages, web maps, and story maps, consider using a Gallery card, Map card, or Application 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're 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:
- Open a site or page in edit mode.
- On the Customize menu, select Layout.
- Drag a Iframe card onto a row in the layout.
- Provide your Iframe URL 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 your iframe.
- If the embedded app is not performing well on smaller devices, provide an alternative URL for Mobile URL override.
- Use the Hide on mobile toggle if you don't have a mobile version of the application.
- Enable scrolling by turning on Auto.
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. - Provide your iframe height.
- Enter a Title to enable accessibility.
- Select Save.