Video Best Practices
Videos can be used for hero row backgrounds, as embeds on a page or generally anywhere to draw attention to a certain cause or feature. Videos that are set to auto-play or load upon arrival to a page have the potential to slow down a site if certain precautions aren't taken. Videos can also negatively impact site performance when placed on a homepage. Learn when to embed vs when to upload a video, what kind of videos are best to use for row backgrounds, how to place a video inside a device frame, and how to compress a video for web without a visible loss in quality.
Video Embeds & Uploads
What kind of videos should be uploaded?
Videos to be used in hero backgrounds should be uploaded if they:
- Loop
- Are only a few seconds long
- Don’t have important audio in them
- Don’t have any text or important
- messages in them
- Are for aesthetic purposes only
- Are compressed for web
What kind of videos should be embedded or linked to, and hosted elsewhere?
Videos that:
- Have an important message or text in them
- Have important audio that needs to be heard
- Are longer than a few seconds
- May not be compressed for web
Upload these kinds of videos to hosting platforms like youtube or vimeo and place them either on a page with an embed OR on the homepage in the form of a link that redirects the user to the video.
Video Modules
There are a few different modules that are made to display uploaded or embedded video. The most lightweight and simplistic one is the standard beaver builder video module. You can simply paste the video link in the module and it will load the video. You can also hide this module on mobile views when trying to clean up the mobile version of the homepage for performance purposes.
Other video modules include the UAB and PowerPack video and video gallery modules which are more bulky but come with features to modify the video overlay and play button design.
Another cool option for embedding a video on a page is the devices module. You can use this module to put the video inside a frame of a desktop, tablet or mobile device for aesthetic purposes. Try sticking to using these fancy modules and video embeds on the internal pages of a site rather than on the homepage OR hide them in mobile views for performance.
Video Compression
Using Handbrake
About Handbrake
Handbrake is an open source and free software that helps compress videos for web with specific settings of your choosing. It can do basic things like select a section of the video to export, remove the audio track before export, etc.
When to Use
Use handbrake if you do not have access to adobe products like premier pro and media encoder or if your PC has lower processing power since it is a free and lightweight alternative option. Use this option when a video not hosted elsewhere is provided by the customer to be uploaded and is a large file that should be compressed for web before being uploaded.
Handbrake Setup
- Download and install handbrake - a free and open source program for video compression https://handbrake.fr/
- Open the media source by dropping the video file onto handbrake's source selector
- In the range, change chapters to seconds, then feel free to cut the video shorter if necessary by reducing its duration
- In the summary tab, select "web optimized"
- In the video tab change the framerate to 29, then change the quality to "avg bitrate" and put 1200 kbps or less
- In the audio tab, clear the audio tracks included in the video so that there are none
- At the bottom of the window, browse for a place to name and save the video
- Then click "start encode"
This should save a much smaller version of the video to your selected location which you can use in place of the hero video - remember that this is only for desktop view on homepage or for any view on internal pages and that you have a fallback image in place for mobile view.
Download: https://handbrake.fr/downloads.php | Documentation: https://handbrake.fr/docs/en/
Table of Contents
Add a header to begin generating the table of contents