Skip To Content

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 or Twitter 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.

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. 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 because a user may be unable to pass over the application. Ensure the usability of a scrollable iframe on a mobile deviice before committing your changes.

  5. 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.

  6. Click Save.