Take the 2-minute tour ×

So basically, I have a pop up code that makes a div pop up. Inside that, there is a youtube video player. Everything works, until I close the window, I can still hear the music in background meaning that the video is still playing. I want to stop it. I did some research and fell on the youtube API's, but it still doesnt work.

Here is my code for the div

echo "<div id='popupContact'>";
echo "<a id='popupContactClose'>x</a>";
echo "<div><h1>" .$row['title']. "</h1></div>";
echo "<p id='contactArea'>";
if($row[type] == "image")
echo "<img src='gallery/" .$row['path']. "' alt='" .$row['title']. "'/>";
echo "<iframe width='560' height='315' src='http://www.youtube.com/v/" .$row['path']."?        enablejsapi=1&version=3&playerapiid=ytplayer' frameborder='0' allowfullscreen></iframe>";
echo "<br/><br/>" .$row['description']. "</p>";
echo "</div>";
echo "<div id='backgroundPopup'></div>";

And here is the code for the pop up:


//Click the button event!
    //centering with css
    //load popup

//Click the x event!
//Click out event!
//Press Escape event!
    if(e.keyCode==27 && popupStatus==1){


//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
popupStatus = 0;
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytplayer");

function stop() {
if (ytplayer) {

Thank you, Ara

share|improve this question
I don't see the code for the function loadPopup() that is called when the #button is clicked.. –  jmm Aug 15 '12 at 21:22
function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } –  user1049769 Aug 16 '12 at 0:33
Did you review the documentation I listed in my answer below? –  jmm Aug 16 '12 at 1:42

2 Answers 2

up vote 0 down vote accepted

I was looking over the Youtube Documentation(iframe) and I think you are mixing up the different api's

On the JavaScript API it states


But you are using an iframe. So I think you need to create a function called

function onYouTubeIframeAPIReady()

Which has several lines of code to setup everything along with other functions.

share|improve this answer

Variable scope. You only ever define ytplayer inside your onYouTubePlayerReady() function, and don't return the value. When that function returns, the ytplayer value is destroyed.

You need to define the variable OUTSIDE of the function:

var ytplayer;   // now a global variable.
function onYouTubePlayerReadye(playerID) {
   ytplayer = document.getElementById('ytplayer');
share|improve this answer
Doesnt work though....I think the onYouTubePlayerReady(playerId) never gets called. I placed test alert in the function and it never gets called –  user1049769 Aug 15 '12 at 19:19

Your Answer


