topic Re: (New) Map Viewer- Embed Video in Popup in ArcGIS Online Questions

(New) Map Viewer- Embed Video in Popup

Amanda__Huber — Tue, 30 May 2023 20:20:01 GMT

Hello,

It appears that the old way to embed video content using iframes into popups has broken due to an AGOL update.
I have been unable to find current Esri documentation ways to display videos in popups. Can someone please point us in the right direction?

Thank you,

Amanda Huber

Re: (New) Map Viewer- Embed Video in Popup

LearnThenShare_JC — Tue, 30 May 2023 20:42:26 GMT

@Amanda__Huber I have a youtube in WebApp splash screen, but not sure if popup is different. https://arcg.is/1iS5Ca

Re: (New) Map Viewer- Embed Video in Popup

RussRoberts — Wed, 31 May 2023 13:08:06 GMT

This is intentionally not supported in 4.x popups, bringing iframes into the popup can introduce security issues.

Re: (New) Map Viewer- Embed Video in Popup

Amanda__Huber — Wed, 31 May 2023 13:34:49 GMT

Understandable, but is there an alternative way to display videos in 4.x now?

Re: (New) Map Viewer- Embed Video in Popup

RussRoberts — Wed, 31 May 2023 14:48:30 GMT

You can use the text element and switch to HTML editor and use this (ignore the quotes):

"<video autoplay width="100%">

</video>"

Re: (New) Map Viewer- Embed Video in Popup

Amanda__Huber — Wed, 31 May 2023 16:08:53 GMT

Hi Russ,

Thanks for this suggestion! I've done some testing and unfortunately it doesn't appear to be working with our videos. Our videos are hosted online and not attachments.

Here's what I have:
and here's what it looks like:

Unless I'm missing something, it appears that the <video> HTML tag only works with .mp4 file types and these others:

Any suggestions for web hosted videos?

Thanks,

Amanda Huber

Re: (New) Map Viewer- Embed Video in Popup

RussRoberts — Wed, 31 May 2023 16:26:03 GMT

Not an experienced vimeo user but are you able to try out this and see if the mp4 link works?

https://help.vimeo.com/hc/en-us/articles/12426150952593-Direct-links-to-video-files

The above link you have wont work bc its reliant on the player and would still require an iframe.

Re: (New) Map Viewer- Embed Video in Popup

KatherynZulay — Fri, 21 Jul 2023 17:18:44 GMT

Hello @Amanda__Huber can you solved it?

I can add in anyway the video into the popup

Re: (New) Map Viewer- Embed Video in Popup

BrettGovernanti1 — Fri, 18 Aug 2023 16:16:44 GMT

Hi All, you may have already figured this out but I was looking yesterday into the iframe issue and I was so sad. But today, I got a video online and shared like Russ's example and now I am happy! The popup html text element appears to be looking for a link with the actual file extension, e.g. .mp4 - not whatever extras the sharing platform is tagging on. Thanks Russ for the comment and the code example that shows the way! In Amanda's case the "https: //player.vimeo.com/video/446835397" wouldn't work since it doesn't end with the .mp4. But go get yourself a proper share link with the correct format and it should work just fine -- and your popup will host a video. Here's an example with a junk URL to show it, my actual URL plays great in popups. I'm using the controls tag to show video controls by default and I left off autoplay so visitors aren't annoyed. Get yourself a good link, put it in a popup and let us know. It should work with other supported types too. Happiness.

<video controls="" width="100%">
<source src="<source src="https ://videosinpopups/vids/projects/notareallink/sharevideo.mp4" type="video/mp4">" type="video/mp4">
Your browser does not support the video tag.
</video>

Re: (New) Map Viewer- Embed Video in Popup

JeffPeters1 — Wed, 06 Sep 2023 14:38:38 GMT

This is all great! I was able to add a video to a popup using a URL to an .mp4 and the html video tag as noted above. But this requires that the video URL is hard coded into the popup configuration. I would like a different video in each popup for the four points in my file. Is it possible to use an attribute to store the video URL and insert that as the video source?

Re: (New) Map Viewer- Embed Video in Popup

BrettGovernanti1 — Wed, 06 Sep 2023 15:02:58 GMT

Yes, I believe that would work but I haven't configured it yet on mine. Add a column to store URL's in the point feature, e.g. "VideoURL". Create the popup with the code above but use the new field name in curly braces as a placeholder/reference instead of the hardcoded URL, like '{VideoURL}'. When the point is clicked the placeholder in the popup should be replaced by the actual URL in the table for each point. Hopefully the videos play!

Re: (New) Map Viewer- Embed Video in Popup

BrettGovernanti1 — Wed, 06 Sep 2023 15:16:20 GMT

I think I messed up my first example with an extra source tag. The hardcoded version should be:

<video controls="" width="100%">
<source src="https:// videosinpopups/vids/projects/notareallink/sharevideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

After adding the URL column and links, the Dynamic would be:

<video controls="" width="100%">
<source src="{VideoURL}" type="video/mp4">
Your browser does not support the video tag.
</video>

Re: (New) Map Viewer- Embed Video in Popup

JeffPeters1 — Wed, 06 Sep 2023 15:43:36 GMT

I figured it out! I put the <video> tag with all the needed info into a text field, added that field as text in popup configuration and it displays different videos in each popup. The only issue I found is AGOL would not let me paste the <video> tag into the table, I had to do it in ArcPro. Also make sure your text field that stores the URL is long enough or the html will get truncated, and the video won't work.

Re: (New) Map Viewer- Embed Video in Popup

BrettGovernanti1 — Wed, 06 Sep 2023 15:54:15 GMT

Excellent! Thanks for testing and posting your findings!

Re: (New) Map Viewer- Embed Video in Popup

DougBrowning — Fri, 26 Apr 2024 14:56:31 GMT

Anyway to play an attachment that is a mov file right in the popup?

Re: (New) Map Viewer- Embed Video in Popup

EMM03 — Fri, 17 May 2024 17:21:28 GMT

Thanks for this!

This works great on my ArcGIS Pro desktop, but when I add this layer to ArcGIS online, the video no longer works in the pop-up (it's just a black screen). This is the code that I put into the text field of a table (which works perfectly on my desktop pop up). Any thoughts on what I'm doing wrong?

<video controls="" width="100%">
<source src="E:\MPN\Bayview.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>