--- title: "How to embed a video file in a custom popup" description: "Play a video file, such as MP4 or WebM, in a custom popup with the Insert iframe button. Use one video for every feature or a different video for each one." seo: title: "Embed a video file in a popup" sidebar: label: "Embed a video file" search: keywords: [mp4, webm, m4v, mov, ogv, ogg, video player, html5 video] --- Paste the address of a video file, such as an `.mp4` or `.webm` file, into `Insert iframe`, and the popup plays it in a video player. MangoMap does not host the file: it must be at a public `https://` address, such as your own web server. **[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. Its popup shows a video player with the Merlion time-lapse video file. ## 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 a public `https://` address whose path ends in `.mp4`, `.webm`, `.m4v`, `.mov`, `.ogv`, or `.ogg`. Capital letters are fine. A query after the file name, such as `?token=abc`, does not count. - The viewer's browser must be able to play the file's format. MP4 files are the safest choice. See [If the video doesn't play](#if-the-video-doesnt-play). - For a YouTube video, use `Insert YouTube video` instead. See [How to embed a YouTube video in a custom popup](/docs/configuring-popups/embed-youtube-in-popup). ## Insert the video 1. In the Custom popup editor, place the cursor where you want the video. 2. Click `Insert iframe` in the toolbar. 3. Paste the video file's address into `Embed URL`. 4. Set `Height (pixels)` if you want the player taller or shorter. The default is 300. 5. Press `Enter` or click `Embed`. Embed URL dialog below the popup editor toolbar, with an upload.wikimedia.org address ending in 20160614.webm in the field, Height (pixels) set to 300, and the Embed button The editor shows the video as a chip with the file name, such as `Video · merlion.webm`. Hover over the chip to see the full address. The player shows only in the popup on the map. There, it fills the popup's width, shows its controls, and does not start on its own. Popup editor for Sites — Embeds with the line Time-lapse: The Merlion, Merlion Park and a Video · Time-lapse_video_of_the_Merlion… chip below it To change the address or the height later, click the chip, then click `Edit embed`. See [Edit an embed](/docs/configuring-popups/embed-iframe-in-popup#edit-an-embed). If you change the address to a web page, the video becomes an iframe. ## Use the same video for every feature Paste a fixed address. The same video plays in every feature's popup. ## Use a different video per feature Put a `{field_name}` variable in the address. Click `Insert simple variable` in the dialog to add one at the cursor, or type it. For example, with an attribute `slug`: ```text https://example.com/videos/{slug}.mp4 ``` The popup fills in each feature's value. If the attribute is empty for a feature, that feature's popup leaves the player out. ### If an attribute holds the whole file name The attribute can hold the file name with its extension, such as `merlion.mov`: ```text https://example.com/videos/{file_name} ``` The editor cannot tell the file type from this address, so it shows an iframe chip with the address. When the popup opens, MangoMap checks the filled-in address. If it ends in a video file type, the popup plays it in a video player, at the same height. If not, the popup shows it as a web page. So one layer can mix videos and web pages. ## Check the video Save the popup, then click a feature on the map and play the video: Popup for National Museum of Singapore with the line Time-lapse: The Merlion, Merlion Park, a video player paused at 0:06 of 0:20 showing the Merlion, and the video credit below it ## If the video doesn't play - **The address starts with `http://`.** The dialog refuses it with `Use an HTTPS embed URL from an external site`. Use the `https://` address. - **The address has no `https://` at the start.** The dialog refuses it with `Enter a full web address that starts with https://`. Type the full address. - **The address does not end in a video file type.** The dialog embeds it as a web page, not a player. Use the address of the file itself. - **The address is a streaming playlist.** The dialog refuses an `.m3u8` or `.mpd` address with `Streaming playlists (.m3u8, .mpd) cannot play here. Use the embed link from your video host (for example YouTube or Vimeo).` Use the host's embed link with `Insert iframe`, or `Insert YouTube video` for YouTube. - **The browser cannot play the file's format.** The player shows, but the video does not play. Each browser plays a different set of formats. For example, Safari does not play `.ogg` files, and Chrome plays a `.mov` file only when its video is H.264. MangoMap does not convert files. For the widest support, use an MP4 file with H.264 video. - **The file host blocks other sites.** Some hosts refuse to serve files to other websites. Open the popup on the map to test the address before you rely on it. ## Save the popup After inserting the video, click `Save Changes` at the bottom right of the editor. ## Related - [How to embed an iframe in a custom popup](/docs/configuring-popups/embed-iframe-in-popup) — the same dialog, and the address rules - [How to embed a YouTube video in a custom popup](/docs/configuring-popups/embed-youtube-in-popup) - [How to insert attribute values into a custom popup](/docs/configuring-popups/insert-attribute-values-into-popup) - [Popup tab controls](/docs/configuring-popups/popup-reference)