Question

I’ve tried various things but can’t get a YouTube video in a hidden DIV to stop playing in the background before the DIV toggle is even clicked. visibility:hidden didn’t seem to solve the issue. Here’s the code I’m using. Hope someone can help! I can turn off autoplay to solve it, but then it means users have to click an extra button (the YouTube ‘play’ button) which isn’t ideal.

** IN THE OF THE WEB PAGE:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".productDescription").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".productDescription").slideToggle();
    return false;
    });

});

</script>

** IN THE BODY:

<div class="productDescription">

<iframe width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&amp;wmode=transparent&amp;autoplay=0" frameborder="0" allowfullscreen></iframe> 
<div class="closebutton"><a href="index.php" onClick="javascript:location.replace(this.href);" class="show_hide">Close Video</a>
</div>
</div>

** AND IN THE STYLESHEET:

.productDescription {
display: block;
position:absolute;
left:0px;
top:-2px;
z-index:5;
background-color: #000;
margin: 0px;
float: left;
padding: 0px;
width: 715px;
min-height: 600px;
height: 600px;
}

.show_hide {
display:none;
}

.closebutton {
display: block;
width:120px;
height: 22px;
position:absolute;
left:20px;
top:50px;
background-color: #000;
padding-top: 3px;
float: left;
z-index: 9999;
}

Thanks very much in advance!

Answer 1

The autoplay feature will start to play the video once it is loaded, whether the div is visible or hidden.

However, if you remove the autoplay setting, you can then use a YouTube API to control the video so that the video will start playing when a person clicks to show the div. One option is the iframe API (which I would recommend since you are already using iframe to embed the video, and this allows YouTube to serve up an HTML5 video rather than a flash video if the viewer is on a mobile device) and another option is the JavaScript API.

Because you asked for more details, here is a quick explanation of how to use the YouTube iFrame API to meet your needs. I recommend reading the documentation so you can understand what is going on and adapt it as needed.

First, in your HTML create your iframe video the same way you did above, but add two things: an ID for the iframe and an origin parameter in the iframe src. (The origin parameter helps keep you YouTube player safe from javascript hacking.) So it would look like this:

<iframe id="player" width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&amp;wmode=transparent&amp;autoplay=0&origin=http://example.com/" frameborder="0" allowfullscreen></iframe>

Replace the example.com url with the website this page will be on.

Somewhere after the iframe, but before the </body> tag, add this code to load the api and initialize the player:

  <script>
  var tag = document.createElement('script');
  tag.src = "//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');
  }
</script>

Then, in your javascript, just before the line that reads $(‘.productDescription’).slideToggle(), add this code:

  if ($('.productDescription').is(':visible')) {
       player.pauseVideo();
      }
  else {
       player.playVideo();
      }

This code will test to see whether the .productDescription div is visible. If it is hidden, it will start the video and display the div. If it is not visible, it will pause the video and hide the div.

That should do it.