Embed video, social media, and iframes

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

To get started, initiative or site team members can sign in to ArcGIS Hub and choose Sites on the Overview page to view a list of sites. If your organization has a license to ArcGIS Hub Premium, initiative sites are listed under Initiatives on the Overview page.

Tip:

You can also edit a site when viewing it in a browser. Be sure you're signed in to ArcGIS Hub and look for the edit button to the left of your site.

Display videos

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

1. Drag a Video card onto an existing row.
2. Hover over the card and select the edit button to switch to edit mode.
3. Paste a video URL from Facebook, Vimeo, or YouTube in the Video URL field.
4. Depending on the video source, additional options appear that allow you to configure video display:
   • For Facebook videos, 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, choose Show Video Title, Show video owner, Show video owner thumbnail, and Loop video playback.
   • For YouTube videos, choose Show YouTube brandingYouTube and Loop video playback.
5. Select the copy button next to Video URL to save the link to the clipboard so that you can reuse it elsewhere in the app.
6. Select Save.

Share a single Facebook post

Display a single post to highlight something specific.

1. Drag a Social media card onto an existing row.
2. Hover over the card and select the edit button to switch to edit mode.
3. In the Social media post URL field, paste a URL for any publicly shared Facebook 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 in the browser before returning to edit your site.
4. Optionally, select the toggle button for Show post text to display text associated with the post.
5. Select Save.

Display a Facebook or Twitter timeline

Display a Facebook timeline, event, or message for greater exploration.

1. Drag a Social media card onto an existing row.
2. Select anywhere inside the card to switch to edit mode.
3. In the Social media post URL field, paste a URL for any publicly shared Facebook page.
4. Optionally, select the toggle button to turn on any combination of the following options:
   • Timeline displays a timeline tab below the page's header. Select this option if you want to share your timeline alongside events or messages.
   • 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 type and send a message to the Facebook page's administrator using Facebook Messenger.
   • Use large header increases the size of the page's header and adds a Send message button linking people to Facebook Messenger.
   • Show cover photo displays the page's cover photo.
5. 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, surveys, and story maps, consider using a Gallery card, Web 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're using an iframe or another card, displaying no more than two key items creates a cleaner, more accessible design. Try using a Gallery card for remaining items.

1. Add an Iframe card to an existing row.
2. Provide your iframe URL and iframe height. Do not embed iframe code from another website; only paste in the URL that you want to embed. The esri.com domain is not supported.

   Note:

   To ensure that content renders, even if the primary URL fails on smaller devices, you can provide a secondary URL using the Mobile URL override field.

3. Add a title to your iframe.
4. 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 the usability of a scrollable iframe on a mobile device before applying your changes.

5. Select Apply.

   Note:

   Iframe URLs using HTTP will not appear in edit mode which uses HTTPS. Save and view your site to observe your iframe.

6. Select Save.