Embedding video in your custom popup or side panel is a great way create deeper links between your data and your map users.
Mango supports most popular video hosting services through either Auto Embed via URL, iFrame embed, or by using a video URL or ID as an attribute in your source data.
There are several methods, depending on the source of the video, and how you wish it to display.
- Insert a single video in all popups in a layer using the video’s URL
- Insert a single video in all popups in a layer using the video’s embed code
- Add unique videos hosted on YouTube or Vimeo to each feature in a layer
- Add unique videos that are self-hosted in each feature in a layer
Insert a single video in all popups in a layer using the video’s URL
This method allows you to insert a single video that will display for all features in a layer.
If your video is hosted on YouTube or Vimeo, we support simple URL insertion - just grab the complete URL from the video host of your choice, and paste it in your popup editor, and hit ENTER. The video will automatically embed.
Please note, you must include http or https in your URL for the quick embed to work. URLS without the http(s) will render as hyperlinks.
https://www.youtube.com/watch?v=AtRDezpRous
Youtube’s short links will also auto embed:
https://youtu.be/AtRDezpRous
Insert a single video in all popups in a layer using the video’s embed code
If you wish to use a custom embed code, click on the embed video button on the editor and paste your iframe embed code in the embed tool.
Your video will now appear in the editor:
Add unique videos hosted on YouTube or Vimeo to each feature in a layer
This method requires that you can add a new column or field to your dataset, containing either the full URL path to the video, or the unique video ID. This can be achieved via QGIS, or a spreadsheet application if you are using a CSV dataset. Learn more about creating and editing dataset.
For the purposes of this documentation, we’ll use a YouTube video as an example, but the same method will work for any hosted video that can be embedded.
The full URL path:
https://www.youtube.com/watch?v=9ZfN87gSjvI
The video ID:
9ZfN87gSjvI
Full video URL
If you are using the full URL path, first convert the paths to an embed-ready version for each video. For YouTube, simply replace /watch?v= with /embed/
eg.
https://www.youtube.com/watch?v=9ZfN87gSjvI
becomes
https://www.youtube.com/embed/9ZfN87gSjvI
Insert these embed URLs into your dataset. We’ll call the field name for this attribute video, meaning we can call this attribute in the custom popup editor using the variable {video}.
In our dataset, we want to see something like this, with each feature containing a video URL.
Once the dataset is uploaded to Mango, open the Layers panel, edit the layer, and navigate to the Popup tab. Select Custom Popup.
In the Custom Popup editor, switch to HTML view by clicking the button on the popup editor’s toolbar.
Then copy and paste the following embed code below into the HTML editor:
<iframe width="560" height="315" src="{video}?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
Click Save
Video ID
If you are using the video ID, collect the video ID’s from the URL bar for each video, and insert them into the video field in your dataset.
The video ID is the string of letters and numbers at the end of a YouTube video URL. eg
9ZfN87gSjvI
In this case, our dataset’s video attributes should look like this, with each feature containing a video ID.
Once the dataset is uploaded to Mango, open the Layers panel, edit the layer, and navigate to the Popup tab. Select Custom Popup.
In the Custom Popup editor, switch to HTML view by clicking the button on the popup editor’s toolbar.
Then copy and paste the following embed code below into the HTML editor:
<iframe width="560" height="315" src="https://www.youtube.com/embed/{video}?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
Click Save
*If using these two methods, all features must contain a video URL or ID, otherwise a broken video embed box will display in the popup.
Other providers will work in the same method using either unique video ID’s, or the full “embed” URL.
Vimeo
Embed URL:
https://player.vimeo.com/video/221859783
<iframe src="{video}" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Video ID:
221859783
<iframe src="https://player.vimeo.com/video/{video}" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Wistia
For Wistia, use the Video ID only. It looks like this thgz2ig8iq, and is the final part of a standard Wistia video URL:
https://mangomap.wistia.com/medias/thgz2ig8iq
It’s important to note that the video ID is used twice in a Wistia embed code, so when inserting the {video} variable you must include both for the embed to work correctly.
Once in the src component:
https://fast.wistia.com/embed/medias/{video}.jsonp
and again in the class component of the video container:
<div class="wistia_embed wistia_async_{video} videoFoam=true" style="height:100%;width:100%">
The full embed code:
<script src="https://fast.wistia.com/embed/medias/{video}.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_{video} videoFoam=true" style="height:100%;width:100%"> </div>
</div>
</div>
Add unique videos that are self-hosted in each feature in a layer
If you self-host video, you can use a HTML <video> element to display your video in popups.
For example, if the video is hosted on your server at http://techslides.com/demos/sample-videos/small.mp4 then you can embed the video in any website using the following HTML code:
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type=video/mp4>
</video>
All modern browsers will process the video element and display the video.
As with the YouTube embeds in the previous section, this method requires that you have unique values to identify each video in your dataset.
Once you have included the video paths, or file names, in your dataset, you can use the following code in the Custom Popup editor to render the video for each feature:
Full path in dataset
<video controls>
<source src="{video}" type=video/mp4>
</video>
File name in dataset
<video controls>
<source src="http://techslides.com/demos/sample-videos/{video}" type=video/mp4>
</video>
If your video is in mp4 format, you must specify type=video/mp4, if your video is 3gp format, you must specify type=video/3gp.
If your video is available in multiple formats to increase compatibility with your users browsers and devices, you could specify the path for all available formats in the following way:
<video controls>
<source src="http://techslides.com/demos/sample-videos/{video}.webm" type=video/webm>
<source src="http://techslides.com/demos/sample-videos/{video}.ogv" type=video/ogg>
<source src="http://techslides.com/demos/sample-videos/{video}.mp4" type=video/mp4>
<source src="http://techslides.com/demos/sample-videos/{video}.3gp" type=video/3gp>
</video>
This is the most fragile video embed method, as it relies on your map user’s browser to be able to decode the format of the video you are using, and also relies on your web host’s bandwidth and reliability – both of which may be costly if your maps have a large audience.
Hosted video via a video service such as YouTube, Wistia, or Vimeo may provide a more reliable and cost effective method to display video content for your map users.