There was a lot of repetition in the voice examples page regarding the click-to-load video elements so I looked into reducing that.
I did make minor tweaks to the CSS and HTML structure. The containing element now shows the image in its background, and uses flex box to position the "click to load video" element so that the styling doesn't break on smaller screens (e.g. phones).
There are also very minor cosmetic changes (made text slightly smaller, pointer now changes when hovering over element).
The changes are live here if you want to preview. It otherwise functions pretty much the same to how it did before.
Changes
Add includes/youtube.html include.
Change voice examples page to use the include.
Tweak CSS and HTML slightly of video preview element and "click to load video element" so they don't break with smaller resolutions.
Add CSS rules targetting the Youtube iframe to attempt to scale the loaded Youtube video with smaller resolutions.
Overview
There was a lot of repetition in the voice examples page regarding the click-to-load video elements so I looked into reducing that.
I did make minor tweaks to the CSS and HTML structure. The containing element now shows the image in its background, and uses flex box to position the "click to load video" element so that the styling doesn't break on smaller screens (e.g. phones).
There are also very minor cosmetic changes (made text slightly smaller, pointer now changes when hovering over element).
The changes are live here if you want to preview. It otherwise functions pretty much the same to how it did before.
Changes
includes/youtube.html
include.