Do you use sales videos to help promote your product or service? If you do, you may want the ability to activate a button for the user to take action after they’ve watched the majority of your sales video. You may have landed on a few of these pages where the person in the video encourages you to watch until the end to get an exclusive offer. They do this because they want people who are serious about their product or services and want the ability to explain what they are selling fully. I’ll show you how to do it in the video below.
Additionally, I have an example below and all the code you need to implement this solution yourself.
Sales Video Example
For the video below, I have set a button to appear at 30 seconds into playback. Hit the play button to see it in action.
Here is the video code and script you will need
<video ontimeupdate="showButton" id="salesVideo" width="100%" controls poster="https://your_placeholder_image.jpg">
<source src="https://yourvideo_url.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
const TIME_TO_SHOW_BUTTON = 30; // 60 seconds;
const video = document.getElementById('salesVideo');
video.addEventListener('timeupdate', function showButton() {
if (video.currentTime > TIME_TO_SHOW_BUTTON) {
document.getElementById("offerBtn").style.display = 'block';
video.removeEventListener('timeupdate', showButton);
}
});
</script>Within this code, we are giving the video the ID of “salesVideo” and we are determining how many seconds into the video we want the button to pop up. For this example, I have chosen 30 seconds, but if you wanted to pop up a video at 10 minutes and 22 seconds, you need to do just a bit of math. First, multiply 10 x 60 (ten minutes times 60 seconds), which equals 600, and then add the remaining seconds (22). You would then put the value of 622 as the TIME_TO_SHOW_BUTTON.
You also need to attach an ID of “offerBtn” or whatever ID name you prefer as long as you adjust the script to the button. In this example, because I use the Divi theme, I have assigned the ID to the row that the button is in and added the CSS element of “display:none;” The script will change the display value once it hits the determined time you have chosen.
Want to autoplay your video?
If you want to autoplay your video you simply need to adjust the code a bit and put “autoplay” within your video tag. See the example below.
<video controls autoplay ontimeupdate="showButton" id="salesVideo" width="100%" poster="https://your_placeholder_image.jpg">The same edit would be made if you wanted to remove the controls and autoplay the video. If you don’t want someone to be able to scrub ahead in the video you would remove the word “controls” from the video tag.
Hosting on Vimeo? Use the correct URL.
I have found the best link to use for Vimeo videos inside a video code tag is the link meant for streaming. To find this URL, you will navigate to the menu on the left-hand side while you are within the video you want to use. Click the Distribution tab and scroll to the bottom of the window containing options located next to the left-hand menu. There will be a section called Video file links. Copy the link next to the output you want to use. I selected the High def 1080 option.
