nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

(New) Map Viewer- Embed Video in Popup

Amanda.Huber@threeriversparks.org_trpd

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

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

EMM03

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>

VideoError.png

dougbrowning

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

BrettGovernanti1

Excellent! Thanks for testing and posting your findings!

JeffPeters1

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.

BrettGovernanti1

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>

BrettGovernanti1

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!

JeffPeters1

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?

BrettGovernanti1

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>

KatherynZulay

Hello @Amanda__Huber can you solved it?

I can add in anyway the video into the popup

problema.PNG

russell_roberts

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.

Amanda.Huber@threeriversparks.org_trpd

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

russell_roberts

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

"<video autoplay width="100%">

</video>"

Amanda.Huber@threeriversparks.org_trpd

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

russell_roberts

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

JohnCoddHere

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.