Embedded iframe will not display video in popup

[LenBalthis]

I created a web map using a hosted feature service that includes an <iframe> link to a video as a field in the attribute table. It displays the linked video in a pop-up just fine when viewing the web map. When I embed the map in a storymap, however, it's just a blank pop-up. No issue with linked images in pop-ups, it just seems to be an issue with the iframe code. I'm using the approach (for the web map) described here: How To: Embed a video in pop-ups in ArcGIS Online for a hosted feature service.

[OwenGeo]

Hi Len -- Can you share a link to the story/map here so we can check it out?

One thing that you can check is to make sure that you are using https (not http) links for the content. StoryMaps will not display embedded http content for security reasons.

[LenBalthis]

Hi Owen,

Here is a test example for demonstration purposes. It is not public, but maybe you can get to it (I've shared it within my organization).

Also, here is the web map embedded in a test web app (created in WebApp Builder), which works as expected. Clicking a point brings up a pop-up with embedded (linked) image. Clicking the transect line brings up a pop-up with embedded (linked) video. 

All links use https.

Thanks,

Len

[OwenGeo]

Hi Len -- There's no way for me to access your private content items. I'd recommend that you contact Esri Support and they can help you troubleshoot this specific issue.

[LenBalthis]

OK, will do. Thanks, Owen.

[DruSexton1]

This remains an issue, despite the documentation having been updated in February of this year.

Below is a screenshot of what is happening in the web map:

Pop-Up from Web Map

And this is from the story map:

Pop-Up from Story Map

Here is the code I am using which is adapted from the solution provided here by tech support.

<iframe src="https://www.youtube.com/embed/2S2qtGisT34?start=278&rel=0&fs=1&autoplay=1&vq=hd720&playsinline="0"frameborder="0"width="281"height="180"allowfullscreen></iframe> 

Here is a link to the public facing web map.

Here is a link to the public facing story map.

The story map is quite extensive. Click on the subsection for "The Western Mediterranean Route" and the scroll up to the first web map you find, located at the bottom of the subsection "The Central Mediterranean Route". There you should see the "Figure 22: Libyan Detention Centres" web map embeded into the story map.

I am referencing some other video content, however it is coming from a different source, and it is displaying flawlessly as you can see from the links above and in the screenshot below:

Web map:

Web Map

Story Map:

For this I was able to direct link to this source with simple html tags:

<video controls="" height="180" width="281"><source src="https://media.msf.org/AssetLink/d2h2m7dxb8i3uk1me47647378643arq6.mp4" type="video/mp4"></source></video>

I hate to just add a hyperlink to the video, there has to be away to make this work as I am attempting correct?

[OwenGeo]

@DruSexton1 -- If you view your web map in the new map viewer (rather than the classic map viewer) you'll see the same issue you see in your StoryMap. Here's a link to view your map in the new map viewer.

Figure: 22 Libyan Detention Centres (arcgis.com)

ArcGIS StoryMaps, the new map viewer, and many other ArcGIS apps (like the new Dashboards, Experience Builder, etc.) are built with the latest (4.x) version of The ArcGIS API for JavaScript, while the classic map viewer is build with the older 3.x version. Although the 4.x version is more modern in every way, there are still some differences between the two and a few things that the 4.x version still does not support. This is an issue with the JSAPI 4.x not supporting some things that the 3.x JSAPI did.

Since this issue is not something we can address on the StoryMaps side, I would suggest contacting Esri Support and reporting the issue you are observing as a bug in the new map viewer/JSAPI. That is the best way to get an issue addressed so that your map works in all the latest ArcGIS apps that are built on 4.x.

For now, if you need to have those popups working in your StoryMap you can create an app with your web map from one of the older 3.x templates (like Story Map Basic or the Basic Viewer) and then embed that app in your story.