Use video as portfolio thumbnails

Design help General
1

Hello All.

I’m thinking of moving from Wordpress to Webflow, but am trying to confirm how easy (or difficult) it would be to create a portfolio site with a mix of video and image thumbnails (each linking to the full project page).

Currently, I’m using short .mp4 videos as thumbnails, and would like to do the same in Webflow, if possible. Alternatively, I could use Vimeo as well. The videos are auto-play and mute.

This is how it currently looks like on my Wordpress site: https://beige.company

Is this possible with Webflow? I’ve searched extensively for a solution and checked many Webflow portfolio sites, but the info I’m getting seems not conclusive or conflicting, e.g. background vs lightbox, etc.

Appreciate any help on this!

Thanks!

2

Hi @Nypaloto, welcome :webflow_heart:

You can definitely do that :slight_smile:

  1. You can add gifs as images
  2. You can use video links inside a dynamic code widget for background videos
  3. You can use Vimeo’s embed code with dynamic fields to pull videos from there

All these options will work great, and you can add conditional visibility on those elements so when you have a photo it will show, and when you have a video it will show instead.

3

Thanks @avivtech - and sorry for taking so long to reply.

I don’t want to use gifs, but am curious about suggestion 2 (and maybe 3). Would you know any guides or even videos explaining what I’d need to do? I’m not a developer, FYI.

Also, I wouldn’t need to use CMS for this, right? I’d prefer designing each of the project pages individually, which is something I can’t do with CMS, unless I’m mistaken.

Cheers!
Alex

5

Hi @Nypaloto,

Doing this on a static page will even be easier :slight_smile:
You’ll need a link to the video you want to show, and an embed code widget with this code in it:

    <video loop muted autoplay poster="{video_poster_link.jpg}" class="{video_class}">
        <source src="{your_video_link.webm}" type="video/webm">
        <source src="{your_video_link.mp4}" type="video/mp4">
        <source src="{your_video_link.ogv}" type="video/ogg">
    </video>

*replace the items inside the { } with your data

2 Likes
6

Hey, I was wondering if you would still use this method today? Is it also possible to include the video link into a cms object and link it into the grid gallery?
Thank you!