---
title: "How to embed a YouTube video in a custom popup"
description: "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."
seo:
  title: "Embed a YouTube video in a popup"
sidebar:
  label: "Embed a YouTube video"
---

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](https://mangomap-staging.com/examples-staging/maps/y4h0ctdr/popup-media-logic-lab)**

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](/docs/configuring-popups/embed-iframe-in-popup). For a video file, see [How to embed a video file in a custom popup](/docs/configuring-popups/embed-a-video-file-in-popup).

## Before you start

- The popup type must be `Custom`. See [How to write a custom popup template](/docs/configuring-popups/write-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.

<img src="/_assets/configuring-popups/embed-youtube-in-popup--dialog.png" alt="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" width="1600" height="960" />

Paste the URL and press `Enter` (or click `Insert Video`). The editor shows the player at the cursor.

## 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:

```text
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 an empty player.
- A link field on its own, such as `{video_url}`, inserts nothing.

The editor cannot fill the variable, so its player has no video. The popup fills in each feature's ID.

{/* TODO: product - The YouTube dialog keeps only the /embed/{video_id} form for a variable: watch?v={video_id} inserts a player with no src, and {video_url} inserts nothing with no message (TipTap YouTube extension, used in ../mangomap packages/mangomap-ui/src/components/text-editor/shared/media-controls.tsx). When the dialog accepts them, update this section. See v4-sample-data/DOCS-CAPTURE-COVERAGE.md, "Product issues". */}

## Check the video

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

<img src="/_assets/configuring-popups/embed-youtube-in-popup--popup.png" alt="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" width="1600" height="960" />

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

## Related

- [How to write a custom popup template](/docs/configuring-popups/write-custom-popup-template)
- [How to insert attribute values into a custom popup](/docs/configuring-popups/insert-attribute-values-into-popup)
- [How to embed an iframe in a custom popup](/docs/configuring-popups/embed-iframe-in-popup)
- [How to embed a video file in a custom popup](/docs/configuring-popups/embed-a-video-file-in-popup)
- [How to show or hide content based on a feature's attributes](/docs/configuring-popups/add-conditional-content-to-popup)