Skip To Content

Embed video, social media, and iframes

Share videos and 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:
    • Facebook Page Tabs 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.
    • Select Tweet Width allows you to choose the size of your post's display. Options include Small, Medium, and 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:
    • Select Collection Height allows you to choose Default to stay with the current display or choose Expanded to show more of your timeline.
    • Tweet Limit sets the number 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.

Display a Twitter collection

Display a Twitter collection on your site.

  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 collection.
  4. Optionally click the toggle button to turn on any combination of the following options in the Options menu:
    • Tweet Limit enables you to set a limit for the number of tweets shown in the collection.
    • Expanded Height enables you to show more of the collection at once.
    • Show Dark Theme changes the color of text to white and applies a dark gray background.
    • Show Header displays the title of the collection. Similarly, choose Show Footer to display a footer that provides Embed or View on Twitter links.
    • Show Border displays a border around the card.
    • Show Background applies a white background to the card. If Show Dark Theme is also selected, a dark gray background is applied.
  5. Click Save.

Embed external content using an iframe card

Embed external web pages such as Survey123 survey.

Caution:

Do not embed iframe code from another website. Only paste in the URL that you want to embed.

  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.
  4. Add a title to your iframe.
  5. Enable scrolling by turning on Auto.

    Tip:
    If you're sharing a survey, automatic scrolling ensures that a person will be able to access the Submit button at the bottom of the survey.

  6. Click Apply.

    Note:

    Iframe URLs using HTTP will not appear in the Site Editor, which uses HTTPS. Save and view your site to observe your iframe.

  7. Click Save.