https://github.com/nating/responsive-rick-roll
A rick roll that takes up the entire viewport in browsers of different devices.
https://github.com/nating/responsive-rick-roll
Last synced: 6 days ago
JSON representation
A rick roll that takes up the entire viewport in browsers of different devices.
- Host: GitHub
- URL: https://github.com/nating/responsive-rick-roll
- Owner: nating
- License: mit
- Created: 2021-12-12T19:59:36.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-22T18:23:47.000Z (over 4 years ago)
- Last Synced: 2025-11-12T08:25:57.501Z (7 months ago)
- Language: CSS
- Homepage: https://nating.github.io/responsive-rick-roll
- Size: 20.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Responsive Rick Roll
This Rick Roll takes up the user's entire viewport even if on mobile. It will always show the center of the music video, which works well because this is where Rick Astley and the other dancers are displayed. To see it in action visit https://geoff.ie/responsive-rick-roll.
Features:
* Responsive
* Users can't pause / click away
* Loops
## Why doesn't it autoplay?? ðŸ˜ðŸ˜©ðŸ˜¤
Browsers don't want websites to streaming video and audio automatically because it could cost users a lot of data: https://stackoverflow.com/a/26066844
## How it works
* Uses the [YouTube Player API](https://developers.google.com/youtube/iframe_api_reference) to play the official music video (for the best video and audio quality).
* Uses a little CSS to essentially zoom in on the video on smaller screens so that it takes up the entire screen.