Possible to embed YouTube/Vimeo videos in a pop-up?

KieranClark

I'm trying to figure out if it is possible to embed a YouTube video in a pop-up on a hosted feature layer. An iframe embed doesn't seem to work and the iframe snippet gets removed every time I go back to edit mode.

KieranClark

So I've figured out how to get a video embedded as per: How To: Embed a video in pop-ups in ArcGIS Online for a hosted feature service 

I've got a process to add the necessary iframe code and video source to my layers and it works on the map and even autoplays.

However...the audio now plays twice, as if a second instance of the video is playing in the background about half a second later. I would appreciate some guidance - I hope it's a simple setting or URL parameter that I have overlooked.

This is the map in question: https://subtelforum.com/cablemap/ 

And this is what the iframe bit looks like:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>iframe</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://www.youtube.com/embed/PAwUKXMFCVg?rel<SPAN class="punctuation token">=</SPAN>0&fs<SPAN class="punctuation token">=</SPAN>1&autoplay<SPAN class="punctuation token">=</SPAN>1&playsinline<SPAN class="punctuation token">=</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>316<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>178<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">frameborder</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>iframe</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Edit:

Ok, change the iframe code to the following (basically just added mute=1) makes the video autoplay correctly, and without double audio.

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>iframe</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://www.youtube.com/embed/PAwUKXMFCVg?rel<SPAN class="punctuation token">=</SPAN>0&fs<SPAN class="punctuation token">=</SPAN>1&autoplay<SPAN class="punctuation token">=</SPAN>1&mute<SPAN class="punctuation token">=</SPAN>1&playsinline<SPAN class="punctuation token">=</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>316<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>178<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">frameborder</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>iframe</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

The only downside is this makes the user have to manually unmute the audio, but I'm not terribly concerned about that.