How Can I Have a Button Appear 20 Minutes Later?

by lerxtjr

Posted: 11 years ago 22 replies

PROGRAMMING

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

onsmith 11 years ago
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>
- [ 1 ] Thanks
- 3 replies
{{ DiscussionBoard.errors[9311841].message }}
- onsmith 11 years ago
  
  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.
  
  Thanks
  
  {{ DiscussionBoard.errors[9311853].message }}
- lerxtjr 11 years ago
  
  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"
  
  Thanks
  
  Signature
  
  Come practice your public speaking skills with us FREE every week! SpeakersSpeakLIVE.com >>
  
  {{ DiscussionBoard.errors[9313321].message }}
- David Beroff 11 years ago
  
  Originally Posted by onsmith
  
  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.
  
  [ 1 ] Thanks
  
  1 reply
  
  Signature
  
  Put MY voice on YOUR video: AwesomeAmericanAudio.com
  
  {{ DiscussionBoard.errors[9317856].message }}
  
  onsmith 11 years ago
  
  Done. Thank you for catching that!
  
  Thanks
  
  {{ DiscussionBoard.errors[9317904].message }}
kpmedia 11 years ago

You could do it with PHP.
- Thanks
- 2 replies
Signature
FAQ: Need a Site5/Arvixe/Hostgator alternative? And who is EIG?
Reviews: Need a good VPS, dedicated server, or unlimited host? (This is NOT a fake "top 10" list!)
{{ DiscussionBoard.errors[9311867].message }}
- onsmith 11 years ago
  
  Hey kpmedia, how would you do it in PHP? You've got me curious!
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[9311897].message }}
  
  lerxtjr 11 years ago
  
  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.
  
  Thanks
  
  1 reply
  
  Signature
  
  Come practice your public speaking skills with us FREE every week! SpeakersSpeakLIVE.com >>
  
  {{ DiscussionBoard.errors[9311905].message }}
  
  onsmith 11 years ago
  
  Are you embedding a YouTube video?
  
  Thanks
  
  {{ DiscussionBoard.errors[9311910].message }}
- Valdor Kiebach 11 years ago
  
  Originally Posted by kpmedia
  
  You could do it with PHP.
  
  What a useful reply, that really contributes to the thread, or was it just a sig promo post.
  
  [ 1 ] Thanks
  
  2 replies
  
  {{ DiscussionBoard.errors[9313888].message }}
  
  onsmith 11 years ago
  
  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!
  
  [ 4 ] Thanks
  
  {{ DiscussionBoard.errors[9314027].message }}
  
  kpmedia 11 years ago
  
  Originally Posted by Valdor Kiebach
  
  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.
  
  Thanks
  
  1 reply
  
  Signature
  FAQ: Need a Site5/Arvixe/Hostgator alternative? And who is EIG?
  Reviews: Need a good VPS, dedicated server, or unlimited host? (This is NOT a fake "top 10" list!)
  
  {{ DiscussionBoard.errors[9319544].message }}
  
  onsmith 11 years ago
  
  I still don't understand how you would implement this in PHP.
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[9321533].message }}
  
  kpmedia 11 years ago
  
  Originally Posted by onsmith
  
  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.
  
  Thanks
  
  Signature
  FAQ: Need a Site5/Arvixe/Hostgator alternative? And who is EIG?
  Reviews: Need a good VPS, dedicated server, or unlimited host? (This is NOT a fake "top 10" list!)
  
  {{ DiscussionBoard.errors[9321741].message }}
onsmith 11 years ago

Originally Posted by lerxtjr

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.
- Thanks
- 1 reply
{{ DiscussionBoard.errors[9311913].message }}
- lerxtjr 11 years ago
  
  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.
  
  Thanks
  
  Signature
  
  Come practice your public speaking skills with us FREE every week! SpeakersSpeakLIVE.com >>
  
  {{ DiscussionBoard.errors[9311968].message }}
exactprecisions 11 years ago

in jQuery there is .delay()
- Thanks
{{ DiscussionBoard.errors[9312052].message }}
littleCowCoding 11 years ago

You would have to use the youtube api if you want it to account or the user pausing the video
- Thanks
Signature

--->>>FREE Squeeze Page Software<<<---
--->>>Full Screen HTML 5 Video Squeeze Pages<<<---

--->>>Get My Beautiful Squeeze Page WP Plugin<<<---
{{ DiscussionBoard.errors[9312464].message }}
littleCowCoding 11 years ago
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.
- Thanks
- 1 reply
Signature

--->>>FREE Squeeze Page Software<<<---
--->>>Full Screen HTML 5 Video Squeeze Pages<<<---

--->>>Get My Beautiful Squeeze Page WP Plugin<<<---
{{ DiscussionBoard.errors[9313648].message }}
- onsmith 11 years ago
  
  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.
  
  Thanks
  
  {{ DiscussionBoard.errors[9313757].message }}
littleCowCoding 11 years ago

Nice little script to account for pauses.
Guess my answer was far too lazy! Lol

Nice job
- Thanks
- 1 reply
Signature

--->>>FREE Squeeze Page Software<<<---
--->>>Full Screen HTML 5 Video Squeeze Pages<<<---

--->>>Get My Beautiful Squeeze Page WP Plugin<<<---
{{ DiscussionBoard.errors[9314132].message }}
- Paul Myers 11 years ago
  
  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
  
  [ 1 ] Thanks
  
  Signature
  
  .
  Stop by Paul's Pub - my little hangout on Facebook.
  
  {{ DiscussionBoard.errors[9317209].message }}