I needed some help with HTML videos and I found your forum post. I (thought I) followed your instructions here and have downloaded the programme but it doesn’t seem to be working!
I created the various formats
Saved it directly to my dropbox
Added the HTML code to the ‘embed widget’ on my page
And nothing I’ve tried different things but I’m at my wit’s end and need professional help!
If you could shed some light on this, I would REALY appreciate it!
All the URLs to your files must work. Here they are not, because they’re relative URLs and the site can’t find any video file to play them. The link to files in your code is just what EasyHTML5 produce depending on where your files are locally (on your computer).
Now you need to host the files somewhere on the internet: via FTP or on a cloud service, or on Dropbox…
The video files must be accessible on the internet for the code to work. Webflow doesn’t host your video files yet.
In the mean I’ve just been using Webflow’s Background Video. Am I right to assume that background videos won’t show up on certain browsers and that’s why I should be using the HTML code?
No. Webflow’s BG Video component is working like the one you’re trying to build with code and custom resources. It even works a bit better: better centering and simpler in the code. So if Webflow’s component doesn’t work on mobile, your code won’t either.
If you are happy with what you have with Webflow’s component, keep using it, it’ll make your life easier. Test for mobile and if it doesn’t work, hide the element and use a duplicate with a different experience for mobile.
Wether it will work on mobile or not depends on the browser apps editors, mainly Apple (Safari) and Google Chrome. They’ve been blocking those behaviors until now because of performance and energy issues. The situation tends to evolve. a bit but it’s not fully there yet. At the moment there are a few mobile devices/OS supporting this.
If mobile video bg is what you’re absolutely after, some JS solutions exist, like http://dfcb.github.io/BigVideo.js/ You will still have to host your video files somewhere in that case.
Oh I see! I shall stick with that then! And try to make it work on mobile too. Or I may use a GIF for mobile. I think I saw you mention that in one of the other posts!
Hi @vincent. I’m going to try and do it through HTML, because the video quality isn’t good enough through background video, and also sizing background video is a struggle.
I’ve replaced the links you highlighted with the dropbox links of the videos, but still no luck. Here’s how the code looks now.
That’s one limitation yes. This component is cool but meant for short video loops. As for the quality, if you target the same dimensions and the same weight as the component outputs, then you realize it’s doing a very good job. I mean I can produce better quality than it, but not so much better. It’s hardly noticeable. So when I use short loops I never hesitate and use the WF component.
Ok your links aren’t corrects. In your code you must use the real links to the files. Here instead you’re using a link that showcases the video inside of a Dropox page. Page that gives infos on the file along download links etc.
To produce a correct direct link to a Dropbox file:
No, video background is hardly supported on mobile devices. For performance issues. Some combination of OS and Device (modern iOS and iPhone for example) supports it.
The solution here is to completely hide the whole section for mobile and make a special one that you will hide for desktop.
If you absolutely must have a short, no audio video that will also reliably autoplay on mobile devices - you can host the mp4 video on cloudinary.com and use two separate embeds in Webflow - one for desktop/laptop and one for tablets and down. The cool thing about cloudinary.com is that you can adjust the crop, size, quality and the automatically generated poster image dynamically via settings in the url string. Upload one video, then dynamically resize for multiple device sizes and types. Below is an example of a dummy embed referencing a cloudinary.com hosted video.
If you want to stay native Webflow and use the background video element, this very helpful script allows background videos to play on many mobile devices, and you can even overlay a slideshow on top of the background video.
Just in case anyone is looking at this thread…I had the same issue when trying to link/embed to Dropbox (and search for a forum answer). Eventually I found that if you switch out the “dl=1” at the end of your video to “raw=1” it worked.
I’ve tried different things but I’m at my wit’s end and need professional help!
I’ve successfully resized the videos and added the GIFs as poster images so they work on mobile - YAY!