How to stop an iframe player (and stop it playing) on modal popup close

0
votes

In a page that opens various items in modal-type popups on users clicking titles or images, some of the items include video, others audio.

I found a piece of code that successfully stops a Youtube video within an iframe playing on clicking the close button. Without it, the video continues to play after the popup is closed. I'm struggling to successfully modify the code to stop other players in a similar way. How could I achieve this for a Soundcloud iframe for example?

This is the bare bones of the code I am currently using successfully for youtube iframes:

<div class="wm_container slug_videos all"> <div class="videos_content_wrap"> <div id="popmake-videos_all_post-30230" class="popmake theme-27529 responsive size-large" data-popmake="{&quot;id&quot;:&quot;videos_all_post-30230&quot;,&quot;theme&quot;:&quot;27529&quot;,&quot;meta&quot;:{&quot;display&quot;:{&quot;size&quot;:&quot;large&quot;,&quot;overlay_disabled&quot;:0,&quot;custom_width&quot;:&quot;600&quot;,&quot;custom_width_unit&quot;:&quot;px&quot;,&quot;custom_height&quot;:&quot;&quot;,&quot;custom_height_unit&quot;:&quot;px&quot;,&quot;custom_height_auto&quot;:0,&quot;location&quot;:&quot;center top&quot;,&quot;position_top&quot;:100,&quot;position_left&quot;:0,&quot;position_bottom&quot;:0,&quot;position_right&quot;:0,&quot;position_fixed&quot;:0,&quot;animation_type&quot;:&quot;slide&quot;,&quot;animation_speed&quot;:350,&quot;animation_origin&quot;:&quot;top&quot;},&quot;close&quot;:{&quot;overlay_click&quot;:0,&quot;esc_press&quot;:1}}}" style="visibility: visible; display: none;"> <div class="popmake-title">title</div> <div class="popmake-content"> <iframe id="iF_xxUHxxxPexx" width="1280" height="480" src="http://www.youtube.com/embed/xxUHxxxPexx?autoplay=1&amp;controls=1&amp;wmode=opaque&amp;rel=0&amp;egm=0&amp;iv_load_policy=3&amp;hd=1&amp;vq=hd720" frameborder="0" style="" allowfullscreen="" kwframeid="11"></iframe> </div> <a class="popmake-close">×</a> </div> </div> <script type="text/javascript"> jQuery('videos_all_post-30230') .on('popmakeBeforeClose', function () { var $iframe = jQuery('iframe', jQuery(this)), src = $iframe.prop('src'); $iframe.prop('src', '').prop('src', src.replace('?autoplay=1', '')); }); </script> </div>

And here is an example of a soundcloud iframe:

<iframe class="soundCloudiframe-30235" width="" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player?url=https%3A%2F%2Fsoundcloud.com%2F . . . &amp;color=333333&amp;sharing=false&amp;show_artwork=true&amp;player_width=300" kwframeid="1"></iframe>

UPDATE:

This is a Plunker that demonstrates how the youtube video stops playing on closure of modal popup. Some magic code is needed for the same to happen with Soundcloud audio.

Any pointers on this will be much appreciated.

1
javascriptiframe
Please post JavaScript/jQuery, CSS, and HTML that would be relevant to your question. Create a demo using any or all of the following services: jsFiddle.net, CodePen.io, Plunker.co, JS Bin or a snippet (7th icon located on the text editor toolbar or CTRL+M). – zer00ne

1 Answers

0
votes

I was able to achieve a solution for my situation with the following code. It seems to reload the src property of the iframe on clicking the close button, thus stopping the current player playing and making the iframe ready to be played again.

<script type="text/javascript"> function loadIframe(iframeName, url) { var $iframe = jQuery('#' + iframeName); if ($iframe.length) { $iframe.attr('src',url); // here you can change src return false; } return true; } jQuery('.popmake-close').click(function() { var frame_src = document.getElementById('soundCloudiframe-30235').src; loadIframe('soundCloudiframe-30235', frame_src); }); </script>

Comments welcome.