/ Thumbnail

Flexbox YouTube Thumbnail Grid

Flexbox YouTube Thumbnail Grid

Flexbox YouTube Thumbnail Grid

Responsive flexbox unordered list grid of YouTube video thumbnails with Fancybox links. Uses a 9kb image with a 16:9 aspect ratio to be able to use the YouTube thumbnails as a background image, without seeing those black letterbox bars at the top and bottom. This also makes the video thumbnails fluid when resizing the browser.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.fancybox-three.css, jquery.js, jquery.fancybox-three.js

Made with

HTML / CSS (SCSS) / JavaScript

Author

Greg Sweet

Demo

See the Pen Flexbox YouTube Thumbnail Grid by Greg Sweet (@ControlledChaos) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More