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.