0

I'm having an issue with Youtube continuing to play after closing a modal. I know this is not a unique problem and I have done exhaustive research to find answers. Unfortunately nothing has worked. I have tried it all!

Here is what I currently have:

<div class="lightbox" id="box-books">
  <div class="box-bg">
   <a href="#page" class="close">X</a>
   <iframe id="playerid" class="center" width="80%" height="600px" 
   src="https://www.youtube.com/embed/videoseries? 
   list=PLUgadhOLCi0T6NfoVWSBOIsHbkhD_I8Vs" frameborder="0" 
   webkitallowfullscreen mozallowfullscreen allowfullscreen 
   allow="autoplay; encrypted-media" allowtransparency="true"></iframe>
 </div>
</div>

<script>
 $('.action-close').on('click', function() {
  var video = $("#playerid").attr("src");
  $("#playerid").attr("src","");
  $("#playerid").attr("src",video);
 });
</script>

Any thoughts? At this point I am desperate and frustrated. Thank you in advance!

  • $("#playerid").stopVideo(); does that function stop it? – Rustyjim Apr 16 at 13:24
  • Nope. The strange thing is, I was using the code below to cut off the audio for a soundsgood playlist and that was working just fine. But when I try to apply the same code to a youtube video, it fails. – Amanda Apr 17 at 14:06
0

I figured it out, using bootstrap thanks to some help from this site.

Here is the script:

<script>jQuery(document).ready(function($) {
$(function(){
  //Snag the URL of the iframe so we can use it later
  var url = $('.modal-body-music iframe').attr('src');

  $('.close').click(function() {
      $('.modal-body-music').hide();
    $('.modal-body-music iframe').attr('src', '');
  });

  $('.close').click(function() {
    $('.modal-body-music').show();
    $('.modal-body-music iframe').attr('src', url);
  });
});
});
</script>

And the HTML:

<div id="box-music" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h2 align="center" class="lightbox-content">A Musical Moment</h2>       
            </div>
            <div class="modal-body-music">
                <div style="clear:both;margin-top:70px;">
                   https://open.spotify.com/playlist/5o8aJ6DCc1TGQ0o7LxP2uO
                   <br><br>
                </div>
            </div>
        </div>
    </div>
</div> 
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.