Hide page content until specific time in video

Question

My staff and I have been researching how to set up a page to have hidden content, that appears at a specific point in a Youtube video.

We got there quickly at first by using the settimeout() function, but this just goes by elapsed time, not the time in the video. If the video is paused, for example, after the specified length of time, the hidden content appears anyway.

This is our code so far:

<p>
<script type="text/javascript">// <![CDATA[
    function showIt() {
        document.getElementById("hid").style.display = "block";
    }
    setTimeout("showIt()",30000);
    // 1000 = 1 sec | 60000 is 1 minute
    // ]]></script>
</p>
<p>{youtube}Yhwk5OorNPw&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;version=3|640|390{/youtube}</p>
<div id="hid" style="display: none;">
    <p style="text-align: center;"><span style="font-size: 32pt; color: #ff6600;"><strong><a target="_blank" href="http://www.youtube.com/watch?v=K80leSIhSD4"><span style="color: #ff6600;">HEY RICK - You can buy a Website Now!</span></a></strong></span></p>
</div>

If you know a way to have it triggered with the video gets to a a specific time, that would be very helpful!!!

Answer 1

The best way is get current YouTube video time in every seconds .

You can use setInterval to call the function every seconds. In that function get current YouTube video time and based on that do your operations.I think this is a reliable way

Please check this answer .From the answer you can understand how to get current play time from YouTube player. Hope it helps you

EDIT

I guess you want to show the hidden content after 30 second of the video. To do so you must capatur the youtube video current time.To get current time you must use youtube API .You can leanr more infor about API .You will get more info about API from here

Once you get the current time ( you will get that in seconds) if u use api you can use following logic to show up the hidden content

<script type="text/javascript">
var timerForLoadingResult=  setInterval(showIt,1000);//call the fnction in every seconds.
     function showIt() {
       var currentTime=GetCurrentYoutubeTime(); // this function must return a current time in seconds
       if(currentTime>=30) // i guess u need to show up after30 th second
        {
          document.getElementById("hid").style.display = "block";
          clearInterval(timerForLoadingResult);        //it will clear the timer, so the function will not excecute again
        }
      }
     function  GetCurrentYoutubeTime()
    {
      // fetch youtube video time using api . and return that value
    }
 </script>