Video Age Gate

Age verification

Please enter your date of birth to continue.
You must enter your full birthday date before you can continue.
Continue
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sorry, you're too young to view this content.

Close
Delete localStorage
Delete localStorage

Sometimes it happens that one of your clients wants to show their users content that has been classified as 18+, as in the example of the Diablo 4 release trailer on the Blizzard website. With my developed code for this you are able to implement this in your Webflow projects for videos as well.

How does this work

When clicking on the video placeholder, JavaScript is used to check whether the date of birth has already been requested once in this browser and stored in the localStorage. If this is not the case, the Age Gate modal with GSAP is displayed and the user is asked to enter the complete date of birth in the Select Input fields that can be seen there.

The available options in the Select Input fields were previously added by JavaScript and modified for styling with the jQuery library select2.

By clicking the "Continue" button in the Age Gate modal, the values behind the selected options from the Select Input Fields are converted into a JavaScript time and compared to see if the user's date of birth is greater than or equal to today minus 18 years.

If this is the case, the Age Gate modal is hidden again, the video is loaded from Youtube with the JavaScript library Plyr Video Player and played immediately. If the user is younger than 18, access to the video is denied and instead of the form, the message "Sorry, you're too young to view this content." is displayed in the Age Gate modal.

If the user calls up the website again in the future and the localStorage entry with the specified date of birth is still available, the video is loaded and played immediately or the modal with the message "Sorry, you're too young to view this content" is displayed, provided the specified age is more than or equal to 18 years.