Embedding external content

In this article, we will show you the steps you must follow to add external content (videos, maps, directions, tracks, playlists, among others) into your Visualization through the Embed element, and the Versus and/or Flock to Unlock Widgets from the most popular content sites.

  • Facebook public posts, including Facebook Live.
  • YouTube.
  • Google maps.
  • Spotify.
  • Vimeo.
  • SoundCloud.

Adding content from these sites is easy. You just need to get the embed code from them and copy and paste it into your Visualization. The following image shows where you need to paste the embed URL once you get it, depending on the Widget or element you are using:


 Facebook public posts and FB Live

1. From the drop-down menu, click on Embed


2. Select the URL while pressing and holding the left button on your mouse, and press CTRL+C (Windows) or Command + C (MacOS) to copy it. Tip: the URL goes from "https" until the first quotation mark you find.


3. Paste the URL.

To give the auto-play and loop attributes to the video, add: &autoplay=1&loop=1 at the end of the URL.
Full screen is not allowed.


 YouTube

1. Under the video, find Share and click on it. 

2. Click on the Embed tab. 

3. From HTML box, copy the video's URL. Tip: The URL goes from "https" until the first quotation mark you find.

To give the auto-play and loop attributes to your video, add: ?autoplay=1&loop=1 at the end of the URL.

By clicking on the SHOW MORE button just below the HTML box, you will find additional options that you can disable: 



4. Paste the URL into your Visualization. 


To embed Playlists, you just need to tweak the standard playlist URL replacing /playlist with /embed/videoseries

For example:

https://www.youtube.com/playlist?list=PLlVlyGVtvuVkUpgWlBV44heQGeVpxFvU4

turns into:

https://www.youtube.com/embed/videoseries?list=PLlVlyGVtvuVkUpgWlBV44heQGeVpxFvU4

Google Maps

1. Open Google Maps. https://www.google.com/maps

2. In the top left corner, click on the menu

3. Click on Share or embed map

4. Click on the Embed map tab.

5. From the HTML, select the map's URL and copy and paste it into your Visualization. 


 Spotify

1. Open Spotify and right-click on the Album, Track or Playlist you would like to embed.

2. Click on Share.

3. Copy Embed Code by clicking on  

4. Paste this code in Notepad, and then select the URL from the HTML. 

5. Paste the URL into your Visualization. 


 Vimeo

1. Go into your Vimeo account and click on the video you want to add to your Visualization. Then you will see the following paper airplane icon:  Share. Click on it.

2. A box with embedding options will appear. At the bottom right, click Show Options.

3. Scroll down a little until you see the options just below your video. There are a lot of options you can set. For auto-play and loop, just check the boxes next to each one of them. When you are done, you can select the embedding code at the top of the panel.

4. When you click in the box, the code is selected automatically. However, you just need to get the URL, so select it while pressing and holding the left button on your mouse and then press CTRL+C (Windows) or Command + C (MacOS) to copy just the URL:

5. Paste the URL into your Visualization.

 SoundCloud

1. Go to the SoundCloud song or playlist you want to embed and click on Share.

2. Click on the Embed tab. For additional options, click on More Options.

3. Select the URL while pressing and holding the left button on your mouse, and then press CTRL+C (Windows) or Command + C (MacOS) to copy it. Tip: The URL goes from "https" until the first quotation mark you find.


Note that SoundCloud Player is customizable through URL parameters. For a complete list, please refer to https://developers.soundcloud.com/docs/widget#methods 

4. Paste the URL into your Visualization.


Was this article helpful?