Skip to content
MangoMap Help Centre
Esc
↑↓navigate↵open⌘Jpreview
On this page

How to embed a YouTube video in a custom popup

Play a YouTube video inside a custom popup. Use one video for every feature, or a video ID field to show a different video for each feature.

A YouTube embed plays a video inside a custom popup. Use one video for every feature, or a field that holds each feature’s video ID for a different video per feature. A field that holds the full YouTube link does not work.

See it on an example map

Open the Popup Media & Logic Lab. In the legend, turn on Sites — Embeds and turn off Sites — Default. Click a site. A site that has a video shows a YouTube player in its popup.

Insert YouTube video handles YouTube only. For Vimeo, Wistia, or another video host, use Insert iframe with that host’s https:// embed URL. See How to embed an iframe in a custom popup. For a video file, see How to embed a video file in a custom popup.

Before you start

  • The popup type must be Custom. See How to write a custom popup template.
  • You need the public YouTube link of the video, such as https://www.youtube.com/watch?v=M2ngoZDer6A.
  • For a different video per feature, the layer needs an attribute that holds the video ID: the part after watch?v=, such as M2ngoZDer6A.

Insert a video

In the Custom popup editor, place the cursor where you want the video. Click Insert YouTube video in the toolbar.

YouTube URL dialog below the popup editor toolbar, with a YouTube watch URL as the placeholder, the helper text Paste a YouTube URL and press Enter or click Insert, and the Insert Video button

Paste the URL and press Enter (or click Insert Video). The editor shows a YouTube video chip at the cursor, not the player. Hover over the chip to see the address. The video plays only in the popup on the map.

Popup editor for Sites — Embeds with the line Video: Web GIS for Planners and Developers and a YouTube video chip below it, with the Wikipedia embed and video file chips further down

If the address is not a YouTube link, the dialog shows Enter a valid YouTube URL.

Use the same video for every feature

Paste the video’s YouTube link, such as https://www.youtube.com/watch?v=M2ngoZDer6A. The editor changes it to YouTube’s embed address. The same video plays in every feature’s popup.

Use this for an overview or training video for the whole layer.

Use a different video per feature

If the layer has an attribute video_id with the ID of each feature’s video, type this into the field:

https://www.youtube.com/embed/{video_id}

The YouTube dialog has no Insert simple variable button, so type the variable. Use the /embed/ form:

  • https://www.youtube.com/watch?v={video_id} inserts a chip, but the popup shows no video.
  • A link field on its own, such as {video_url}, shows Enter a valid YouTube URL.

The editor shows the same YouTube video chip for an address with a variable. The popup fills in each feature’s ID.

Change the video

To use another video, or to fix the address:

  1. Click the YouTube video chip in the editor. A small menu shows next to it.
  2. Click Edit embed (the pencil). The YouTube URL panel opens with the saved address.
  3. Change the address.
  4. Click Save.

The video changes in place. Save uses the same rules as Insert Video. To go back to the old video, press Ctrl+Z (Cmd+Z on a Mac). To close the panel with no change, press Esc or click outside it.

To remove the video, click its chip and press Delete or Backspace.

Check the video

Save the popup, then click a feature on the map. The video plays in the popup:

Popup for National Museum of Singapore with the line Video: Web GIS for Planners and Developers, a YouTube player playing at 0:05 of 5:14, and a Watch on YouTube link

When a feature has no video

If the {video_id} attribute is empty for a feature, that feature’s popup leaves the player out. The rest of the popup still shows. You do not need a conditional to hide it.

Save the popup

After inserting the video, click Save Changes at the bottom right of the editor.