major issue: audio continues after modal with YT video closes. how 2 code my solution

[gribbs100]

Hello Guys, I have a time sensitive issue here for a client. I think I have a quick fix but don't know how to add the code it.

I have a modal window with a youtube video which uses youtubes iframe embed method. Ok, when you close the modal box, the audio can still be heard in some versions of internet explorer.

my idea is that upon clicking close, have jquery change the iframe source to any old website url (google or whatever. doesnt matter really) instead of youtube path so it will kill the sound out. would that work?

I guess ill need to give the iframe a name and then code in the instructions somehow. can anybody help me code it to

this is my html snippet

<div id="boxes2">
<div id="dialog2" class="window">
  <div id="closeout2"><a href="#">X</a></div>

  <div id="popuptop2">my video title</div>

 <iframe width="640" height="360" margin-left="auto" src="http://www.youtube.com/embed/myactualvideopath" frameborder="0" allowfullscreen></iframe>
</div>
<div id="mask"></div>
</div>

this is my jquery snippet for the closeout functions:

 //if close button is clicked
               
	
               		   $('.window #closeout2').click(function (e) {
                    //Cancel the link behavior
                    e.preventDefault();
		
                    $('#mask').hide();
                    $('.window').hide();

                });

Any help would be great.

[gribbs100]

I ended up solving this myself. This has been a noted problem several times so in the future you can reference people to this post. This was my solution and it works in IE7,IE8,IE9,IE10,Firefox and Chrome


1: First thing. Make sure you give your source iframe an #id in the html. In this case I used: #myFrame

2: on closeout button jquery, Iv added this line in jquery:

$("#myFrame").attr('src', 'http://www.youtube.com/same video path as original');


*what this does is reset the connection to the source youtube video. in my origional post I had suggested using any url to just kill the connection but.... this is wrong because if the visitor re-opens the popup again in the same session, they will see the new path in the iframe, not the proper video so be sure to use the same iframe url as the original video.

The only bug I see is that in safari, if you re-visit the popup,the box is black. Its not working anymore. Perhaps I should also add the iframe url call to the popup button activation in jquery as well? Every other browser this works flawlessly. Any additional feedback would be appreciated but this soultion should help a lot of people. Iv seen some really lengthy solutions that require an unnecessary amount of coding.

[gribbs100]

any help on the safari bug would be great. revisiting the popup after closing it ( in the same browser session) causes just a black spot where youtube video should be. perhaps the order or the scripting or something?