0

I can't seem to get a YouTube video to stop playing when a modal is closed. The video goes away but the audio continues playing.

I've tried the solutions in many other questions but nothing seems to work. I think it's probably because my video is deeply nested and I haven't been able to target it. And/or because the iframes have element IDs of the same names. (Don't get me started.)

Here's a simplified look at the DOM:

html
  head
  body
    <div id="popoverview">
      <div id="popoveritem">
        <iframe id="popoverframe">   <!-- this is our modal -->
          #document
            html
              head
              body
                <div id="popovercontainer">
                  <div id="popover_upc_video">
                    <div id="current_video">
                      <div id="player">
                        <iframe id="popoverframe">
                          #document  <!-- this is from youtube -->
                            html
                              head
                              body
                                <div id="player">
                                  <div id="playercontainer">
                                    <embed id="video-player-flash">  <!-- the video -->

Here's a bit from the javascript inserting the youtube video--including ?enablejsapi=1 --into the modal:

document.getElementById('player').innerHTML = '<iframe id="youtubevideo" width="620" height="376" src="http://www.youtube.com/embed/'+youtube_id+'?enablejsapi=1?hl=en&rel=0&fs=1&modestbranding=1" frameborder="0" allowfullscreen>Error?</iframe>';

Here's a bit from the function that closes the modal. Problem is that the audio keeps playing. The error message is Uncaught TypeError: Object [object Object] has no method 'stopVideo'.

var myPlayer = $('#player > #video-player-flash');
myPlayer.stopVideo();

I've tried quite a few methods of targeting but nothing is working.

Thanks for the help. Charlie Magee

charliemagee
  • 683
  • 5
  • 19
  • You'll probably need to do something like this: `$("#popoverframe").contents().find("#popoverframe").contents().find("#player #video-player-flash").stop()` – Shmiddty Dec 28 '12 at 00:10
  • Also `$('#player > #video-player-flash');` would be incorrect if `#video-player-flash` is a child of `#playercontainer`. it would be `$('#player #video-player-flash');` – Shmiddty Dec 28 '12 at 00:12
  • Nope. Doesn't change anything. Various combinations based on this not working either. – charliemagee Dec 28 '12 at 00:28

1 Answers1

-1

You have a jQuery object set to myPlayer instead of the DOM node.

var myPlayer = $('#player > #video-player-flash')[0];
myPlayer.stopVideo();

See this post: How can I stop a video with Javascript in Youtube?

Community
  • 1
  • 1
ryan
  • 6,541
  • 5
  • 43
  • 68
  • @ryan--that changed the error message but didn't fix the problem. New error: Uncaught TypeError: Cannot call method 'stopVideo' of undefined – charliemagee Dec 28 '12 at 00:20
  • It would be helpful if you posted a minimal implementation on jsfiddle that demonstrates the problem. You also might want to use console.log to see if the element you are selecting is the correct embed element or not. – ryan Dec 28 '12 at 00:27
  • @ryan--this has a bunch of php includes and database searching going on. Simplifying it to make a fiddle won't help. Console.log just comes up empty as soon as I pass the first iframe. That's one of the reasons I turned to stackoverflow. – charliemagee Dec 28 '12 at 01:00