0

I have youtube video embedded in my page inside of a div which can be hidden and shown with a button (using jQuery/css). When I hide and show then show the div the video has to reload and start form the beginning. Is there a way to remember the video's progress and playback form the same position? Or better yet a way that that video would not have to reload?

Here is the html5 for the div/you-tube video:

    <div id="you-tube-div">
       <object width="640" height="390" data="http://www.youtube.com/v/fQ2Lnln2BOk" type="application/x-shockwave-flash">
          <param name="src" value="www.youtube.com/v/fQ2Lnln2BOk"/>
       </object>
    </div>

EDIT:

Here is a little jFiddle that shows what I am trying to do:

http://jsfiddle.net/ntk3B/

Mike2012
  • 7,629
  • 15
  • 84
  • 135
  • 1
    post http://jsfiddle.net – Naveen Kumar Alone Aug 23 '13 at 18:18
  • Ah cool, I've never used jsfiddle before. Very Cool! I've added a link to a little jfiddle that shows what I am trying to do. If you press the play button on the video then hide it, and show it again, the video will restart (not surprising), but I was wondering if there was a way I could remember where it was playing from before it was hidden. Thanks! – Mike2012 Aug 23 '13 at 18:35

2 Answers2

1

Do you need to hide the video using the property "display"? If you use the property "visibility", and values "visible" and "hidden" to control the visibility of the item then the video will hold it's paused place.

Here is a link about the difference between the display and visibility properties...

Here are some additional things to consider:

  • If you don't pause the video, and you set visibility to hidden, then the video and audio will continue to play. However you could use the youtube javascript API to control the video.

  • If you use visibility, block elements will still be affecting the elements around them, you just won't be able to see them. That's why the property is simply "visibility"

If you do want/need to use the display property, which would not be surprising, then you are going to want to store certain information about the video in a variable when you choose to hide it (e.g. it's point in playback), and then use that value when you click the button again to display the video but starting from the point in the video where you left off. I can't recommend getting to know the youtube API enough... this will give you the power to manipulate youtube videos as you wish. Let me know if you have any questions and best of luck!

rdgd
  • 1,451
  • 2
  • 18
  • 33
1

I recommend converting your object embed to the newer iframe element for embedding the youtube video. Using code from this stackoverflow post: How to pause a YouTube player when hiding the iframe?

//via: https://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("you-tube-div");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}

I've created this fiddle that does what you want: http://jsfiddle.net/RSDxC/2/

Community
  • 1
  • 1
Everett Green
  • 632
  • 3
  • 8
  • It works well in chrome but fails in Firefox. Just tried this fiddle in jsfiddle and it restarts the video from the beginning instead of paused position. Thx – Ramesh Dec 13 '13 at 06:16