If you ever wanted a background video to show on your Webflow’s website as a background, but make sure it looks sharp, then this is for you.
Not too long ago, a client came to me to design new pages for her website. One of the elements she wanted to add was a high-quality video background to her landing page. As you know, Webflow has a limit for the file size that you can add, and that is within reason. They want to make sure your Webflow website is fast, as do I!
But adding a Youtube Video as a background, is not a bad thing to do or even Vimeo. However, the Youtube and Vimeo brand remain on it, which can throw off the user.
So instead, I figured out how to do a HTML embed that allows me to show the HQ video from Dropbox directly into Webflow. The code is below for you to copy and replace it with your own shared link.
<video autoplay loop muted style="position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width:100vw; min-width:100%; min-height:100%; z-index: -1;"> <source src="https://www.dropbox.com/s/xxxx/xxxx?raw=1&autoplay=1" type="video/mp4"> <img src="https://uploads-ssl.webflow.com/xxxx/xxxxx.jpg"> </video>
- Upload the video to Dropbox, yep you can upload the full size video. In this case the video was 300MB
- Click share on the video and copy the link it will look something like this – https://www.dropbox.com/s/xxghwtcr24w5ea9/Screen%20Recording%202020-11-12%20at%208.17.35%20AM.mov?dl=0
- Paste this link in an editor and change the following: “?dl=0” to “raw=1” this will allow the video to play. If you don’t do this, the video will not play. Another thing you might have to do it to remove the ‘s’ from the ‘https’. Some people have found this useful, for me it worked by justchanging dl=0 to raw-1.
- Head over to webflow and create a new section where you want your video to display as a Background-video
- Then throw in an HTML embed and paste the code you have copied from this tutorial, but ensure you change it to the shared link
Let’s understand the code a little:
This tag is pretty much saying that it will take this source, a.k.a your video and make it absolute so it can cover the entire screen. You can also removed the ‘style’ part of the code and make it your own with Webflow’s css options. Then, it tells the broswer where to look for to find this video and the type of file .mp4. Keep in mind this file type MUST be the same as the one on your video. So, if your file type in the video on Dropbox is .mov, but you have .mp4 here, it won’t work.
So make sure your video is an .mp4!
Then, because we are loading this from Dropbox, it will take a few seconds for it to start loading. So we have an image as a place holder. That is where this code comes to play a role.
<img src="https://uploads-ssl.webflow.com/xxxx/xxxxx.jpg">
This will allow your image to show right away, and once the video is ready to be displayed, it will automatically change to the video.
This is a super easy way to host a HQ video as a background.
