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, sign in to Portal for ArcGIS and click Sites on the Overview page to view a list of your sites.

Tip:

You can also edit a site when viewing it in a browser. Be sure you're signed in 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 Media card onto an existing row.
2. Hover over the card and click the settings 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 Branding and Loop Video Playback.
5. Click 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. Click 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 click the settings 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, click 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 click the toggle button for Show Post Text to display text associated with the post.
5. Click Save.

Display a Facebook timeline

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

1. Drag a Social Media card onto an existing row.
2. Hover over the card and click the settings button to switch to edit mode.
3. In the Social Media Post URL field, paste a URL for any publicly shared Facebook page.
4. Optionally click the toggle button to turn on any combination of the following options:
   • Timeline displays a timeline tab below the page's header. Click this option if you want to share your timeline alongside events or messages.
   • Events displays a list view of the page's events views.
   • Messages enables 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. Click Save.

Display a single tweet

Display a single Twitter post to highlight a specific tweet.

1. Drag a Social Media card onto an existing row.
2. Hover over the card and click the settings button to switch to edit mode.
3. In the Social Media Post URL field, paste a URL for any publicly shared Twitter post. To get the link for a single tweet, click the more button at the upper right of the post and choose Copy Link to Tweet.
4. Optionally click the toggle button to turn on any combination of the following options in the Options menu:
   • Show Dark Theme inverts the color of the display.
   • Tweet Width allows you to choose the size of your post's display with the following options: Small, Medium, Large.
5. Select Tweet Position allows you to choose Left, Center, or Right alignment.
6. Click Save.

Display a Twitter timeline

Display a scrollable Twitter timeline.

1. Drag a Social Media card onto an existing row.
2. Hover over the card and click the settings button to switch to edit mode.
3. In the Social Media Post URL field, paste a URL for any publicly shared Twitter timeline.
4. Optionally click the toggle button to turn on any combination of the following options in the Options menu:
   • Expanded Height allows you to show more of the twitter timeline.
   • Tweet Limit enables you to set the number (up to 20) of tweets displayed on the timeline.
   • Show Dark Theme inverts the color of the display.
   • Show Header displays a header. Similarly, choose Show Footer to display a footer.
   • Show Border displays a border around the timeline.
   • Show Background removes or displays the background.
5. Click 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, web map card, or application card.

When using iframes, consider limiting the number of instances to no more than two. 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 2 key items creates a cleaner, more accessible design. For remaining items, try using a gallery card.

1. Drag an Iframe card onto an existing row.
2. Hover over the card and click the settings button to switch to edit mode.
3. 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.

   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.

4. Add a title to your iframe.
5. Enable scrolling by turning on Auto.

   Tip:

   Scrolling is not always suitable on mobile devices because a user may be unable to pass over the application if they can only scroll. Ensure the usability of a scrollable iframe on mobile before committing your changes.

6. Click Apply.

   Note:

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

7. Click Save.