@thesergie’s example uses a jQuery plugin, which likely offers better support for older browsers. However, if you are targeting more modern browsers, you can reduce much of the above code into a single video tag.
The following example should work in IE9+ and the latest versions of Chrome, FF, Safari.
Then replace the video paths with urls to your own files.
Select the element that you are placing the video inside (e.g. the Section div), give it a class, and style it using the Advanced position menu, to the following settings:
Position: Relative
Overflow: Hidden
Remember, your mileage may vary… that is until we build this natively into webflow
-Dan
Wow thanks for the step by step guides @thesergie and @danro! Thats amazing support!
I recently posted a thread about changing background images on refresh. I found a lot of code from various sources, but I can’t figure out how to implement it into Webflow. Would you mind making a little Tips & Tricks on that subject for everyone?
And also, while we’re at it, is there any way to make images slide in from the side of the browser like on the new Webflow homepage? That would be KILLER.
(BTW, I totally love your new redesign, tweeted about it yesteday!)
@LaurentCardinal Select the element that you are placing the video inside (e.g. the Section div), and style it using the Advanced position menu, to the following settings:
Position: Relative
Overflow: Hidden
This should effectively crop the video from appearing outside the video section.
-Dan
The video is loading sometimes in normal way. But sometimes the whole page will mess up (especially background images and sticky navbar). Somebody have a clue what could be happening? Videos are around 5 MB. (Like example video).
We’ve been finding a lot of browser quirks lately in regards to Fixed background images. I would suggest avoiding Fixed and see if that helps with the rendering issues on your video pages. As always, we’re searching for ways around this so that it behaves as expected.
Tried this myself tonight, you can use a dropbox link from a file uploaded to your public folder, but when inserting that link into the embed block, you need to be sure to remove the ‘s’ from ‘https’ - otherwise you’ll see a black background and the video won’t load!
No problem! I was racking my brain for a while too, trying to figure out why it wouldn’t work! I tried hosting the file on Google Drive - doesn’t work unfortunately. I temporarily moved all webflow files to my own server, to be able to load the video hosted on the same server and found it works quite well. I guess not having to retrieve the file elsewhere and pass through all of Dropbox’s server calls speeds up the retrieval of the video.
I see what you mean… you’re essentially trying to achieve background cover for your video. While this isn’t natively built into webflow, you can add some custom code to achieve this effect.
Take a look at this example on JS Bin:
In order to get this working on your webflow site, follow these steps:
Copy the new HTML Embed block into your video embed.
Style your videocontainer div to make the Overflow hidden.
Place the custom JS into your </body> code section, inside a <script></script> tag.
Since this uses custom JS, it won’t actually execute the resize effect until published or exported, but hopefully this gets you on the right path!
