Reduce Initial-Load Page Weight With On-Demand Videos
Embedded videos from 3rd-party platforms like Vimeo and YouTube are a great way to include videos on your website, but can add more than 500KB of page weight even when they're not clicked/played. This technique replaces a placeholder image and link to the video (which doubles as a no-JS fallback) with the embedded video when clicked.
Start with a link and thumbnail image, wrapped in a container with the video ID stored as a data attribute.
Style the placeholder image link as desired, including a custom play button. This setup also uses a technique for responsive embedded videos that scale with a custom aspect ratio.
Replace the image link with a normal embedded video <iframe> when the placeholder is clicked.