Streaming live at 10am (PST)

Video inside link block, or workaround

Hi all

I’m trying to get video instead of images on the project thumbnails on the frontpage of the following template (It’s the “Project Image Element”):

https://preview.webflow.com/preview/bits-and-bobs?utm_source=bits-and-bobs&preview=29f9dd99b6530aad092465b57e04c67c

When I try, it says I cannot place a video inside a link block.

I tried replacing the link block with a normal div, and tried stacking a new link block on top to no avail. The link disappears over the video.

I also tried with a background video or youtube video instead, but it doesn’t work in this setup as i need to pull the video from the collection.

Gifs this size will be too heavy for it to be a reasonable solution.

Is it possible to do this one way or another?

Thank you for your help!!

Do you want this as a background video playing?

1 Like

Hi aaron

Thank you for your reply. I want it to replace the project thumbnail with a video instead of an image. I need to get it from the collection so a background video won’t work. So in short, no.

I’m asking this because I have a small piece of code that might help you if you’re trying to add a video as a background so people see video looping of your project instead of the image.

Like you said if you try to add a video inside a link block it wont work because the video itself is a link as well.

1 Like

That sounds great. The only caveat I could think of is that the projects is populated from the collection. So if I just put in a background video, it will be the same video on all projects. Do you know what i mean?

Would love to try it out though!

Yes you can use dynamic embeds for this purpose

not with the dynamic embed approach

If you want me to shoot an example let me know

This is the code
<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;"> <source src="LINK-TO-YOUR-VIDEO" /> <source src="LINK-TO-YOUR-VIDEO(OGV-VERSION)" type="application/ogg" /> <img src="LINK-TO-YOUR-IMAGE"> </video>

It’s important to bear in mind that in order to populate the video from the collection data you need two things:

  1. Store your video yourself, YT videos won’t work
  2. You need to add a link field to your collection where you’re going to pull the video link from.

That sounds really cool! Thanks a lot!! I use Vimeo for hosting, and I know how to add a link field in the collection.

Can you explain to me how/where i inject the code? I’m new at this. Also do i change the imagecontainer to a background video module first?

TY!

You can insert custom code using Embed component. More info you can find here: https://university.webflow.com/article/embed

Hi Ros. When I try a place the HTML embed in the link block I get the same error as when i try to place a video (“Video/HTML embed can not be placed in a link”). This is my original problem.

Let me know if you can point me in the right direction.

As an option you can play with z Index of absolute blocks. You can have 1 relative wrapper block with 2 absolute layers (100% fill inside). Upper layer (z-index: 1) - is link. Lower layer (z-index: 0) - your embed with video.
That might work.

TY. I’ll work on it and report back! :smiley:

Hi again

I had some time to play around with the template. I managed to get videos from Vimeo to autoplay in an embed block, populated from my collection with a text field. I used this code:

<iframe style="position: absolute; top: 0; z-index: -1;"src="https://player.vimeo.com/video/{dynamic link}?background=1" width="100%" height="100%"frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Now I still have the problem with getting the link to work. @Ros_Trocyuk can you elaborate on how to achieve the z-index trick? Or if possible, could we just put a href into the embed code? (I couldn’t get this to work)

Please see updated preview:
Link

Also, does someone have a trick if I wan’t to mix images and videos in the thumbnail of the projects?

Hey all,

I think I might be a little late to the party but I think I found a workaround for this. I’ve been using Webflow for years but I’ve never posted to the forums before. You all have been so much help to me over the years I thought I’d add something I figured out here.

Basically, you just need to add a link code to the HTML embed in order to get it to link. Here’s the code snippit that you can add after the Vimeo embed code (I added it on a new line).

<a href="[YOUR LINK HERE]" style="position:absolute; top:0; left:0; display:inline-block; width:500px; height:500px; z-index:5;"></a>

Just replace YOUR LINK HERE with either your link or you can add a field that links to your collection item’s link field to populate them dynamically. I’m using this to run video ads.