For April fool’s 2022 I created a webpage that will rickroll you and show some memes. I made multiple versions for my friends and one general one. The webpage is also responsively designed.
For one of my friends, who is a fan of Harry Styles I created the following page: https://winstondegreef.com/Harry-styles-post-link-to-new-single-on-april-first-rickrolls-millions/ For another friend, one of whose hobbies is drawing, I created this page: https://winstondegreef.com/Amazing-drawing-technique I also made one version for the people in my class: http://winstondegreef.com/Wiskunde-explainer/
When making this web page, I had to solve the following problem: If a web page wants to play audio and video, the user first needs to interact with the page (clicking, tapping, pressing keys, etc). To get around this problem, I created an imitation Cloudflare anti DDoS page. The page waits 3 seconds before showing a link that says “If you aren’t redirected automatically, follow this link.” This link doesn’t do anything, but once it is clicked or pressed, the user interacted with the page and the video is played.
When embedding YouTube video’s, there are a few settings you can modify. One of those settings is whether to show controls (full screen button, audio, etc.). Which I turned off. Another thing I did is that when the video is paused, the web page automatically starts playback again.