This content applies to a previous version of CARTO

In October 2021 we released a new version of our platform. You can find the latest documentation at docs.carto.com

Back to Help Center

How can I embed a video within a CARTO.js popup?

Overview

In this example from the CARTO Developer Center, a map with popup functionality displays an embedded video when a geometry is clicked.

Overview video popup example

Implementation Steps

To achieve this effect, follow these steps:

  1. Create a CARTO.js map with a Popup, based on code from a Popup example in the CARTO Developer Center.

  2. Store video URLs in a dataset column. For this example, they are stored in the youtube_url column in the example_video dataset. Each geometry is associated with a different video.

  3. Obtain the embed link from YouTube’s share options as explained in YouTube’s Help page.

  4. Set the popup content using an iframe element:

content += `<iframe width="240" src= ${featureEvent.data.youtube_url} frameborder="0" allowfullscreen></iframe>`