▼
Streaming live at 10am (PST)

Video inside link block, or workaround

Design help General
#1

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!!

#2

Do you want this as a background video playing?

1 Like
#3

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.

#4

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
#5

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!

#6

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.
#7

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!

#8

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

#9

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.

#10

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.

#11

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

#12

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?

#13

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.