How Can I Have a Button Appear 20 Minutes Later?

22 replies
I have a youtube webinar video on a page and want just that video to display for about 20 minutes. Then I have a clickable button that I'd like to show up once it's referenced in the video. Figuring this is javascript or something that would be on the video page. Can someone provide me with a quicky script that I can paste in to try?
#button #minutes
  • Profile picture of the author onsmith
    Here is the JavaScript code that will make a button appear 20 minutes after a page loads. This code assumes that the button has an ID of "hiddenButton", but you can alter this as desired. Also, this code assumes that the button originally has the CSS property "visibility" set to "hidden", to make the button originally not appear.

    Code:
    <script type="text/javascript">
      var minutes = 20;
      var buttonID = "hiddenButton";
      
      setTimeout(function() { document.getElementById(buttonID).style.visibility = "visible"; }, minutes*60*1000);
    </script>
    {{ DiscussionBoard.errors[9311841].message }}
    • Profile picture of the author onsmith
      The only problem with my solution above is that if the user pauses the video, the button will still appear exactly 20 minutes after the page loads. I don't know of any way to actually tie the button in to a specific point in the video.
      {{ DiscussionBoard.errors[9311853].message }}
    • Profile picture of the author lerxtjr
      I'm a boy trying to do a man's job here What should this look like in css?

      button originally has the CSS property "visibility" set to "hidden"
      Signature

      Get your non-fiction book done without typing ProduceMyBook.com >>

      {{ DiscussionBoard.errors[9313321].message }}
    • Profile picture of the author David Beroff
      Originally Posted by onsmith View Post

      Code:
      minutes*1000
      I do realize that we've gotten considerably more complex in this thread, but may I respectfully ask that you please edit this earlier post to add an additional multiplier of 60, (i.e., minutes instead of seconds), just in case someone else decides to use one of the simpler solutions that they see first.
      Signature
      Put MY voice on YOUR video: AwesomeAmericanAudio.com
      {{ DiscussionBoard.errors[9317856].message }}
      • Profile picture of the author onsmith
        Done. Thank you for catching that!
        {{ DiscussionBoard.errors[9317904].message }}
  • Profile picture of the author kpmedia
    You could do it with PHP.
    {{ DiscussionBoard.errors[9311867].message }}
    • Profile picture of the author onsmith
      Hey kpmedia, how would you do it in PHP? You've got me curious!
      {{ DiscussionBoard.errors[9311897].message }}
      • Profile picture of the author lerxtjr
        yeah i didn't think of the pause possibility either, that would be pretty cool to have something in place that pauses the clock if the user pauses the video.
        Signature

        Get your non-fiction book done without typing ProduceMyBook.com >>

        {{ DiscussionBoard.errors[9311905].message }}
        • Profile picture of the author onsmith
          Are you embedding a YouTube video?
          {{ DiscussionBoard.errors[9311910].message }}
    • Profile picture of the author Valdor Kiebach
      Originally Posted by kpmedia View Post

      You could do it with PHP.
      What a useful reply, that really contributes to the thread, or was it just a sig promo post.
      {{ DiscussionBoard.errors[9313888].message }}
      • Profile picture of the author onsmith
        So, after looking at the YouTube Player API, I think I have managed to write code in JavaScript that will make a button appear at a certain point in the video, even if the user pauses and plays the video.

        If you are interested, here are some instructions.

        1. Replace embedded YouTube video with an empty <div> tag.
        So the first step is to replace the text that you copied-and-pasted from YouTube with an empty <div> tag. We will be dynamically replacing this <div> tag with the video, using JavaScript.

        You used to have something like this...
        Code:
        <iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE?rel=0" frameborder="0" allowfullscreen></iframe>
        Now you will have something like this:
        Code:
        <div id="videoPlaceholder"></div>
        Notice that I set the <div>'s id attribute to "videoPlaceholder". This is because I will need to reference this <div> later, to replace it with a video, and I need a unique name by which to reference it. You could theoretically replace "videoPlaceholder" with any unique string.

        2. Make sure your button has a unique ID.
        We will need to reference your button, too. Make sure the HTML tag for your button has a unique ID, just like the <div> that we just made. For instance,
        Code:
        <button id="hiddenButton">Click Me!</button>
        Note that your button might not actually be a <button> -- it might be a <div> or something else; that's okay.

        3. Add the following CSS to your page.
        Code:
        #hiddenButton {
          visibility: hidden;
        }
        If you named your button something different, "hiddenButton" will need to change to whatever you named it. This will make the button originally hidden.

        4. Add the following JavaScript code to your webpage.
        Code:
        <script src="https://www.youtube.com/iframe_api"></script>
        <script>
        	// CHANGE THESE VALUES TO FIT YOUR NEEDS
        	var seconds = 10;
        	var buttonID = 'hiddenButton';
        	var HTMLVideoID = 'videoPlaceholder';
        	var YouTubeVideoID = 'M7lc1UVf-VE';
        	
        	// Load Video
        	var player;
        	function onYouTubeIframeAPIReady() {
        		player = new YT.Player(HTMLVideoID, {
        			height: '390',
        			width: '640',
        			videoId: YouTubeVideoID,
        			playerVars: {
        				autoplay: 1
        			},
        			events: {
        				onStateChange: onPlayerStateChange
        			}
        		});
        	}
        	
        	// Show Button After Time Interval
        	var done = false;
        	var timer;
        	function onPlayerStateChange(event) {
        		clearTimeout(timer);
        		if (event.data == YT.PlayerState.PLAYING && !done) {
        			timer = setTimeout(showButton, (seconds - player.getCurrentTime())*1000);
        		}
        	}
        	function showButton() {
        		document.getElementById(buttonID).style.visibility = "visible";
        		done = true;
        	}
        </script>
        This is the main JavaScript. At the beginning of the code, you'll see the section marked "CHANGE THESE VALUES TO FIT YOUR NEEDS". Make sure you change "M7lc1UVf-VE" to the ID of your video on YouTube (You can find this by looking at the URL of your video's page when you view it on YouTube). If you are using a different ID for your button or your video placeholder <div>, you'll also need to replace these values. Finally, you may alter "var seconds = 10;" to whatever timeout value you desire. As-is, this line makes the button appear after 10 seconds. For 20 minutes, for instance, replace it with "var seconds = 20*60;".

        Phew. That's a lot! If you don't feel like doing all of this, that's okay. This was a good afternoon project for me, and I had fun working on it!

        If you need help, feel free to ask!
        {{ DiscussionBoard.errors[9314027].message }}
      • Profile picture of the author kpmedia
        Originally Posted by Valdor Kiebach View Post

        What a useful reply, that really contributes to the thread, or was it just a sig promo post.
        It was a useful reply. Now the OP knows where to start looking.
        Doing it with JS (jQuery) is often easy to bypass.

        Now you, on the other hand, added nothing to the conversation.
        {{ DiscussionBoard.errors[9319544].message }}
        • Profile picture of the author onsmith
          I still don't understand how you would implement this in PHP.
          {{ DiscussionBoard.errors[9321533].message }}
          • Profile picture of the author kpmedia
            Originally Posted by onsmith View Post

            I still don't understand how you would implement this in PHP.
            There's a timing mechanism available in PHP. I've done something similar, but it goes to 1 week. I could build this off my existing code, but it'd take a near-total rewrite. And then the altered thumbnails could be done as well -- there's several options here, but manual is best (HTML coding).

            It's a LOT more foolproof than JS, which is what I replaced. The JS never worked right, and was easy to bypass. It needed server-side (PHP), not client-side (JS) coding.

            I wish I could help more, but too busy for it.
            {{ DiscussionBoard.errors[9321741].message }}
  • Profile picture of the author onsmith
    Originally Posted by lerxtjr View Post

    I have a youtube webinar video on a page and want just that video to display for about 20 minutes.
    Haha, I need to work on my reading.
    {{ DiscussionBoard.errors[9311913].message }}
    • Profile picture of the author lerxtjr
      embedding...well, it's on a wordpress page and i just copied and pasted the youtube url into the html view of the wordpress page and the video displays. how truly "embedded" that makes it, i dunno.
      Signature

      Get your non-fiction book done without typing ProduceMyBook.com >>

      {{ DiscussionBoard.errors[9311968].message }}
  • Profile picture of the author exactprecisions
    in jQuery there is .delay()
    {{ DiscussionBoard.errors[9312052].message }}
  • Profile picture of the author littleCowCoding
    You would have to use the youtube api if you want it to account or the user pausing the video
    {{ DiscussionBoard.errors[9312464].message }}
  • Profile picture of the author littleCowCoding
    You could use Jquery to keep it simple.

    your css:

    Code:
    #whateverYouWantToAppear
    {
       display:none;
    }
    then on your page you need to link to jQuery in your head section like this

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    Then at the bottom of your page but before the </html> tag put this:

    Code:
    <script>
    $(document).ready(function(){
         $('#whateverYouWantToAppear').delay(1000).fadeIn('slow')
    });
    </script>
    the number after delay is 1 second so change it as you need.
    {{ DiscussionBoard.errors[9313648].message }}
    • Profile picture of the author onsmith
      littleCowCoding has a good solution using jQuery. If you're still looking for the CSS for my solution, here it is.

      Code:
      #hiddenButton {
        visibility: hidden;
      }
      Here, "hiddenButton" is the ID of the button element.
      {{ DiscussionBoard.errors[9313757].message }}
  • {{ DiscussionBoard.errors[9314132].message }}
    • Profile picture of the author Paul Myers
      Bill pointed me to this thread. Bravo, on smith and LittleCow Coding. That is what "the best of the Warriors" looks like.

      Thanks for the reminder.


      Paul
      Signature
      .
      Stop by Paul's Pub - my little hangout on Facebook.

      {{ DiscussionBoard.errors[9317209].message }}

Trending Topics