Using video backgrounds in web design can be extremely impactful, especially when they are used in conjunction with the hero (the top) area of a website.
Adding Video Backgrounds
In Blocs there are a number of ways to add a video background to a bloc, the easiest way is to just drag a video file that is the correct format and file size on to the Blocs canvas and over the Bloc you wish to apply it to, doing this will make the Bloc background turn grey.
When you release the Left mouse button, the video will be applied to the Bloc as its background.
Alternatively, you can also set a video background by first selecting the Bloc you wish to add the video background to and then, from the sidebar inspector options, navigate to the Background section and check the Video checkbox.
This will apply the default placeholder video background to the Bloc and also reveal the video thumbnail in the sidebar options. To change the video, move the mouse cursor over the video background thumbnail located in the sidebar. Doing this will display a replace symbol on the thumbnail, if you now Left Click the video thumbnail, it will open the Blocs Asset Manager.
From the Asset Manager, select the relevant mp4 video file you wish to set as the blocs background.
Previewing Video Backgrounds
While in design mode, videos don’t play for obvious reasons. If you wish to preview the video playing, simply press the play button located in the main toolbar or use the keyboard shortcut ⌘+V to enter Preview Mode. To exit Preview Mode, press the stop button located in the main toolbar or use the keyboard shortcut ⌘+V.
Video Format
When adding videos as backgrounds in Blocs, the video format and size is really important. Video files need to be in the web standard, MP4 format and can only be a maximum of 20MB in file size. We highly recommend using web optimised encoding when creating videos for use as video backgrounds.
Coverr.co is a great site that offers hundreds of beautiful, free videos you can use in your Blocs projects as Bloc backgrounds.
Youtube Video Background
If you would like to use a hosted YouTube video as a Bloc background, you can follow this dedicated guide.