title: iframe youtube video control
body: <p><strong>hi,</strong></p>
  
  <p>i m really new to javascript and html5(just started 3 weeks ago) so my questions will maybe look a bit stupid.</p>
  
  <p>So i would like to know if it s posible to stop a youtube video with a mouseleave.function... </p>
  
  <p>i ve a music wich play on my website, when i rollover my youtube video the music stop , i did it like this : </p>
  
  <pre><code>$(video).mouseenter(function(){
      audioElement.pause();
  });
  </code></pre>
  
  <p>than i can play the youtube video ...</p>
  
  <p>when i leave the video player the music goes on again , i use this :</p>
  
  <pre><code>$(video).mouseleave(function(){
      audioElement.play();
  });
  </code></pre>
  
  <p>But i would like to make the youtube video stop at the same time because the sound of the video is playing while the sound on my background music is playing...</p>
  
  <pre><code>$(video).mouseleave(function(){
      audioElement.play(); **Something here to pause the youbevideo**
  });
  </code></pre>
  
  <p>Is it possible?
  i would like to keep the  version of the youtube video because i use fitvids to resize my videos .</p>
  
  <p>Thanks </p>
  
  <p>Pierre 
  srry for my english...</p>
  
  <p><strong>Here is the solution for me, RAVI.</strong></p>
  
  <p>So the solution was to move the YouYube API script from the external js to the main html.</p>
  
  <p><a href="http://users.skynet.be/fc864408/version9.html" rel="nofollow">http://users.skynet.be/fc864408/version9.html</a></p>
  
  <pre><code>    &lt;body&gt;
  
        &lt;div class="tf_content" id="page4"&gt;
          &lt;div class="container"&gt;
              &lt;div class="vendor" id="video"&gt;
       &lt;div id="player"&gt;&lt;/div&gt;
  
  
             &lt;/div&gt;
         &lt;/div&gt;
         &lt;/div&gt;  
  
  
  
  
          &lt;!-- The JavaScript --&gt;
  
        &lt;script&gt;
  
        var tag = document.createElement('script');
   tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
  
        var player;
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            height: '420',
            width: '640',
            videoId: 'lVQzIwpClXA?theme=light&amp;color=white&amp;autohide=0&amp;autoplay=0&amp;showinfo=0&amp;rel=1&amp;controls=1;',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }
        function onPlayerReady(event) {
  
        } 
          var done = false;
        function onPlayerStateChange(event) {
          if (event.data == YT.PlayerState.PLAYING ) {
      audioElement.volume=0;
            done = true;
          }
        }
  
  
       video = document.getElementById("video");
  
  
  
  
              $(video).mouseleave(function(){
                     player.stopVideo()
                  up();   
                  });
  
  
  
   $(".container").fitVids();
  </code></pre>
  
  <p>now it works... the video is resizing according to the window.</p>