How To Embed Super High Quality Video On Webflow Websites
Introduction
Videos on websites are extremely effective in conveying messages vividly and instantly on websites. When it comes to Webflow websites, embedding high-quality videos is essential to maintain a professional aesthetic, however Webflow only allows background videos of up to 30mb to be embedded, which is not always adequate.
The go-to platform for hosting these high-resolution videos is often Vimeo, thanks to its robust compression and streaming capabilities. This article will guide you through the process of preparing your video based on Vimeo’s recommended specifications, uploading it to Vimeo, embedding it on your Webflow site, and optimising it for web performance.
Preparing Your Video for Upload
Before you upload your video, it’s crucial to ensure it meets the recommended specifications to retain high quality. According to Vimeo’s Video and Audio Compression Guidelines, here are the key specs:
- Format: MP4 is the most recommended format due to its compatibility and compression characteristics.
- Codec: H.264 is a good choice for video, while AAC is suitable for audio.
- Resolution: High Definition (HD) resolution of 1920×1080 is a standard choice for a balance of quality and file size, however Vimeo supports up to 8K UHD (8192 × 4320px).
- Frame Rate: It’s advisable to keep the frame rate between 24 to 30 frames per second (fps), but you can go up to 60fps.
- Bitrate: A higher bitrate will result in better video quality; however, Vimeo suggests a ‘variable’ bitrate of at least 10mbps for HD.
Uploading and Embedding Your Video on Webflow
Once your video is ready, follow these steps to upload it to Vimeo and embed it on your Webflow site:
- Upload to Vimeo:
- Go to Vimeo’s website and log into your account.
- Click on the “New Video” button and select “Upload”.
- Select your video file and wait for the upload and processing to complete.
- Embed on Webflow:
- Once your video is uploaded, click on the “Share” button on the video page.
- Copy the embed code provided.
- Log into your Webflow account and navigate to the page where you want to embed the video.
- Add an “Embed” element to your page, paste the copied embed code into the HTML field, and publish your site.
Your video should now be live on your Webflow site, retaining its high quality.
Optimising Your Video for Web
Although Vimeo has built in capacity to optimise a high-resolution video for different devices and connection speeds, sometimes you can get a better result by giving Vimeo a helping hand and optimising the video for use on a website, prior to uploading to Vimeo.
This will ensure that it doesn’t slow down your website’s loading time while maintaining its quality. Vimeo provides a comprehensive guide on using HandBrake for this purpose:
- Download and Install HandBrake:
- HandBrake is a free, open-source tool for converting and compressing video files.
- Load Your Video File:
- Open HandBrake, click on “Open Source”, and select your video file.
- Adjust Compression Settings:
- Under the “Video” tab, adjust the settings as per Vimeo’s HandBrake recommendations to strike a balance between quality and file size.
- Start the Compression Process:
- Once satisfied with the settings, click on “Start” to initiate the compression process.
Following these steps will ensure your video is optimised for web performance without compromising on quality.
Conclusion
Embedding a super high-quality video on your Webflow site is a multi-step process that involves preparing your video as per recommended specifications, uploading it to a reliable platform like Vimeo, embedding it on your site, and optimising it for the web. By adhering to these guidelines, you can provide an engaging visual experience for your viewers while ensuring your website remains performant.