1
In the previous part of this tutorial, using a mixture of HTML5, jQuery and CSS, we constructed the barebones functionality of our HTML5-driven full-screen video background. This time, we’re going to be styling it, preparing fallbacks for it, and understanding how it can be used as part of your own working designs. In today’s guide, we’ll be adding to our fullscreen video in a number of ways, including:
- creating our own pattern overlays to sit over the top of our video; such as old-television-style scan lines, styling your video to suit your own design;
- converting our video to multiple formats to enable universal cross-browser support for your video background.
Along with all of this, I’ll also show an example of how the video can be used creatively by layering other elements over the top of it, showing you how this powerful technique can fuel your own new designs; or even provide a new, exciting background for that design you’re currently working on!
Have you used fullscreen video as a background in one of your designs? Do you have a preferred method of implementation? Let us know in the comments.
Figma Releases the Pattern Library
Figma, the industry-leading design platform, has introduced a powerful new resource: the Figma Pattern Library. This library offers a meticulously curated collection of reusable design patterns aimed at streamlining workflows,…
Jaguar’s New Controversial Logo Unveiled
Early this week, Jaguar unveiled a comprehensive rebranding initiative as part of its strategic shift toward an all-electric future. This transformation includes a new logo, updated branding elements, and a…
Inspiration in Every Hue: Discover Color Palette
Color Palette is a web application developed by Tobias Mønster Madsen, designed to provide users with a collection of curated color palettes for inspiration and design purposes. Currently, the site…
3 Essential Design Trends, November 2024
It’s hard to believe the end of the year is right around the corner. That isn’t stopping website designers from trying new things to keep things interesting as we begin…
3 Essential Design Trends, October 2024
This article is brought to you by Constantino, a renowned company offering premium and affordable website design You have to get creative when you lack a strong visual. This month’s design…
3 Essential Design Trends, September 2024
September’s web design trends have a fun, fall feeling … and we love it. See what’s trending in website design this month. Excuse the pun, but let’s fall into some…