Hey! This content applies only to previous CARTO products

Please check if it's relevant to your use case. On October 2021 we released a new version of our platform.
You can learn more and read the latest documentation at docs.carto.com

Questions  /  Building Maps  /  Development

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

Learn how to embed a YouTube video in a CARTO.js popup.

In this example from the CARTO Developer Center we created a map with a popup, where the popup contains an embedded video.

Overview video popup example

When a geometry is clicked, a popup menu is displayed with an embed video.

In order to achieve this effect we follow these steps:

  1. We create a CARTO.js map with a Popup, based on code from a Popup example in the CARTO Developer Center.
  2. We store the video URLs in a dataset column. For this example, we store them in the column named youtube_url in the example_video dataset. Each geometry is associated with a different video.
  3. In this example, the videos have YouTube URLs. This means that we need to obtain the embed link from YouTube’s share options as explained in this answer from YouTube’s Help page.
  4. Once we have the embed link, we can set the content of the popup content += `<iframe width="240" src= ${featureEvent.data.youtube_url} frameborder="0" allowfullscreen></iframe>`.