Best way to use Videos/GIFs in Webflow.
Hello All,
I have a Project that I need to showcase lots of Videos/Gifs about a Client's Work. What is the best way to Customize the Videos ? are we only limited to upload them on Vimeo or Youtube and place them in Webflow ?
And one more thing, @Web Bae. I saw this Cool interaction in something like a GIFs Slider on this Website ( https://thieb.co/?ref=lapaninja ) is it possible to do something similar in Webflow ? and how ?
Thieb — Multidisciplinary Designer
I’m Thieb — a Multidisciplinary Designer with a focus on Motion, Interactive Design and 3D.
12 Replies
Hey @Ahmad
I recommend using Webflow to host your videos when you can. It's limited to 30MB uploads and will compress your videos though so they may be too grainy depending on the use case. Also the Webflow background video element will remove sound from the video. Vimeo and YouTube are other options, but you can also use the HTML <video> tag with a custom code embed. There are a lot of options and it depends on the specifics of the video.
For a site like the one you sent....
The videos are being lazy loaded - meaning they don't load until you scroll. I would def recommend adding lazy load to a site with a lot of videos.
The videos are short. This is key to keeping file size down. It's not a webflow site so the videos are "self hosted" at the same domain as the site.
And yes you could probably create something similar to the slider with swiper.js
hope that helps!
If you need to host the video externally let me know there are a number of options for that.
Thank you @Web Bae for the detailed response.
And yeah I think I need to host them externally, would like to know the options. 😬✌️
Really not sure of thats the best Case tho. Where do you recommend me to go for more in Depth details ?
And for Swiper.js, are the Documents enough for me to be able to implement their effects? Or do you recommend some videos for that ?
And thank again for these info, was my main target for buying the course from the beginning actually 🫣
Good CDNs include Cloudflare, bunny, and AWS. Dropbox can be done free but I wouldn’t use it for client builds since there’s a cap.
I have some videos in AWS and Dropbox can link those if you’re interested
Yes Please, I am really in need to dive deeper into these. once and for all 😅
Web Bae
YouTube
Javascript + Dropbox for the Best Videos in Webflow
🌶 My ULTIMATE Webflow Resource Library: https://code-snippets-sign-up.webflow.io/ (It's FREE)
What’s in it?
- All the Javascript from my videos
- Template GSAP code for award-wining text animations
- My FULL website pre-launch checklist to maximize that Lighthouse score
- Custom CSS Snippets that I end up using on almost every project, includin...
Web Bae
YouTube
Why I Host my Webflow Videos on AWS (and How To Do It)
AWS is my choice for hosting production content (video) on client projects. Here's how to set it up to make your videos publicly available so that you can use them in your Webflow project.
💪 My ULTIMATE Webflow Resource Library: https://code-snippets-sign-up.webflow.io/
What’s in it?
- All the Javascript from my videos
- Template GSAP code for...
@Ahmad Dude. just peaked at your site and wow. The site is great and your work is so sick. Really cool stuff man.
Hey @blair8319, which site do you mean ?
The one I mentioned here is not mine 😭 it is really sick yeah.
I did this tho and I am proud of it 😬✌️ :
www.zina-interior.com
But yeah, one day I will make something at that level
@Web Bae Hello Sensei 🫡 I need your Feedback on this Project plz:
https://www.zina-interior.com/
I made it in around 2-3 weeks, still need to add lots of Projects in a CMS manner.
Made the Full Design and Webflow Development for $1,850. is that a fair price for such projects ? for both parties ofc.
and I like always to thank you for the continuous guidance 🥹
Zina | Luxurious wood furniture, handcrafted in Lebanon
Zina's luxurious kitchens and bespoke wood furniture are expertly crafted by our team of designers and craftsmen using only the finest materials. Transform your home with our stunning pieces today!
Hey @Ahmad I think the site looks great! First impression is that the price is fair. I could see this going through dev only for anything from $750 to $2500. I pretty much do dev only so not an expert on pricing with design included. I imagine you went through a number of iterations and design actually took longer than development.
I'm assuming you didn't use any template or components as it looks bespoke. I'm also not sure how much CMS there is to import / SEO work / client training go on which would effect the dev price as well.
I like the simple style with clean lines and elegant font and I think you chose animations to match that well. Some folks would say there's too much animation but I think it feels very unique which seems to me like something this client might like. The splide carousel you chose looks great, especially on mobile.
The fluid typography in the hero gets a little small for my taste for less wide screens. It starts to lose a bit of visual hierarcyhy.
Semantic structure looks great. Can tell you pay attention to detail.
Lighthouse score is good. There are some easy wins you can get here by implementing the recommended improvements.
- alt tags on images
- set main hero image in slider to eager load
- you have a ghost h4
- add a lang attibute to html tag (do this in site settings)
overall it's a website to be very proud of. If you can get 5 more unique sites like this on your portfolio I'll bet you could double your rate, especially considering that you do the whole package design + dev. I think you can not only charge premium rates but ALSO design with webflow in mind. A lot of times I get designs from designers who don't "know" Webflow which adds a lot of time to builds! However if I can convince the client that it requires premium dev abilities then that's how I can charge higher rates.
I'm curious to hear more about this build:
- how long did it take?
- what were the biggest challenges?
- how do you feel about the amount your made versus the time invetment?
- what were some of your biggest learning from the project
- did you provide other services beyond design and dev? (I see Google Tag Manager scripts)
- how are you measuring value delivered to client? Increase impressions? conversions? Did the client have a website before?
Maaaan, I really really appreacitae your insight.
Will go through everything again in the morning and will answer all your questions too 🫡🫡🫡
It is 11:09 PM here now, and my brain energy is below the capability of answering anyhting now 😆🫠
Hello @Web Bae , really sorry I promised an earlier response, got really busy last couple of days.
Today is my Wedding Day actually, but I still have around 1 hour before I get super busy ( starting from getting a haircut ).
So about the Website, it is a Website that I made for someone I know.
The Design was challenging a little, but once I find the Style I went all in with it. I got the Splide Slider Idea from the Man himself Timothy Ricks from one of his videos, and it went perfectly.
other than that I tried different things till it felt Luxirious and Modern like the Brand itself.
from the Dev point of view, everything was smooth, experimented with some animations and interactions but went with the cleaner ones, and they liked it a LOT.
CMS was a bit challenging, never done something this Big, so thats why it is not published yet, still working on it. ( The Design and Development are both challenging 😬 )
For Pricing, we went with 2500$, For Branding 650$ and Web Design and Development 1850$. I Still super Noob with Priciing ( Maybe make a Youtube Video about that 💡)
this is the First website for the Client, and I am beginner with Data and SEO, I know all the Webflow SEO practices only. I will try to see the Google Analytics, and will offer a Google Campaign soon for them. but still learning this stuff more.
and thats all, I felt super good about this website myself, and found the Price fair tbh, I am a very Fast Designer and Developer, so When I focus on a Project I finish it fast.
I actually have lots of other projects ( sadly havent finished my portfolio yet ) so I will link some of them if you are interested, I always look up for your feedbacks ^^ :
Here are some of my recent Works:
1- Zina ( a Brand for Kitchens and Interior Design ) 100% Done : https://www.zina-interior.com/
2- Sneako main Website 100% Done : https://www.thecreativitykit.com/
3- Andrew Tate ( 1 of his Websites ) 100% Done : https://www.warplans.ag/
4- Anguish Marketing Website 100% Done : https://www.anguish.co/
5- Hayha ( a SaaS Company for Botting 95% Done : https://hayhaaio.webflow.io/
6- God Backdoor ( Company for Clothing ) 100% Done : https://www.godbackdoor.com/
7- InfinitBot ( a SaaS Company for Botting 100% Done : https://infinitbot.com/
PS. if you need anything from me, I am always ready, it will be like a dream if we collaborated in some work together 🤣
Time to go to my wedding 🤣 🤣 🤣
Good luck out there! Time to get hitched! 🤣
Great work on the websites - your partner found good one!
and thanks for sharing your insights.