Question

I’ve created one app in HTML5 and javascript for iPad.
I’ve put links in page, by clicking that will show/hide different youtube videos.

Here is code

• In ipad if i hide one youtube video and show another at that time previous video keeps playing in background till new video loads.
• I want to stop previous video playing before another video gets loaded.

(I am using latest iOs, that plays youtube video in quicktime player.)

Answer 1

Here

DEMO

var vids = {
    vid1:"http://www.youtube.com/embed/87O_YA4rLyk",
    vid2:"http://www.youtube.com/embed/nQ2TsPhsWTA"
}    
$(function(e) {
  $(".video-section ul li").click(function(e) {
    $(this).hide();
    $(this).siblings().show();
    $("#vid").attr("src",vids[this.id]);
  });  
  $("#vid1").click();
});

<div class="videoContain-big">
  <p>
    <iframe id="vid" width="560" height="315" src="about:blank" frameborder="0" allowfullscreen></iframe>
  </p>
</div>
<div class="video-section">
  <ul>
    <li id="vid1">Click here to Change Video 1</li>
    <li id="vid2">Click here to Change Video 2</li>
  </ul>
</div>