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; } } }

esriPopup on close stop video play ?

MayurDodiya

Hi,

I have MEDIA column in my attribute table contains video URLs (YouTube iframe & HTML5 video tag).

By Clicking on feature on map popup display and play the video.

I would like to stop video play when I click on close button of esriPopup window (InfoWindow).

I know the hide event of infoWindow, but How do I stop play video on close of the InfoWindow

app.map.infoWindow.on('hide', function () {
var info = app.map.infoWindow.features[0].attributes.MEDIA;
});

Is there a way to stop video on close event of infoWindow ? Any idea please ?

Thanks,

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Mayur,

I would go with setting the popups content to null.

app<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'hide'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; app<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

MayurDodiya

Hi Robert,

I am sorry for the confusion.You are right, I created app using WAB developer edition and after I downloaded, I see MapManager.js file and resetInfoWindow function.I copied the same code and its working fine.

Thank you so much.!

PXL_20210104_143542669_4.jpg

MayurDodiya

Hi Robert,

There is no MapManager.js file in jimu.js, but I copied the same code in jimu.js/main.js at the end in resetInfoWindow function

this.map.infoWindow.on('hide', function () {
this.map.infoWindow.setContent(null);
});

This worked for me.

Below is the code working in Story Map to make esriPopup draggable and I want to add same for WAB application(Hosted on my server), so where should I copy the code in WAB application

var handle = query(".title", app.map.infoWindow.domNode)[0];
var dnd = new Moveable(app.map.infoWindow.domNode, {
handle: handle
});
// when the infoWindow is moved, hide the arrow:
on(dnd, 'FirstMove', function () {
// hide pointer and outerpointer (used depending on where the pointer is shown)
var arrowNode = query(".outerPointer", app.map.infoWindow.domNode)[0];
domClass.add(arrowNode, "hidden");
var arrowNode = query(".pointer", app.map.infoWindow.domNode)[0];
domClass.add(arrowNode, "hidden");
}.bind(this));

Please any idea where and what code should I add in WAB ?

RobertScheitlin__GISP

Mayur,

At the end of the resetInfoWindow function in the jimu.js/MapManager.js file would be fine.

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

share.PNG

MayurDodiya

Hi Robert,

Yes it working.

Thank you so much.

I have another question, I created app using Web App Builder.

I download and hosted on my server. Now, I want to apply same popup hide event in Web App Builder application.

Do you have any idea where should I add code ?

RobertScheitlin__GISP

Mayur,

I would go with setting the popups content to null.

app<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'hide'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; app<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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