Tearing my hair out – Vimeo background video embed

I Need Help
1

Hi All and Norm,

This is somewhat hard to explain but I’ll do my best…

What I’m trying to achieve:
I want a video which fills the whole screen, no matter the viewport size. It’s not important that all the video is displayed: it’s fine if the top, bottom or sides are cropped off, but I don’t want any bars at the side or top. This is how I would like it to work:

How I did it:
I set the bloc padding to full screen, added video background, then selected ‘Youtube/Vimeo’ and added the embed code.

What’s happening:
It works perfectly with a local/remote video, and perfectly with YouTube (as in the default Blocs video shown in the attachment above). But I cannot get a Vimeo video to embed – no matter how much I fiddle with the settings, embed code etc. this is what I end up with:

Hope I’ve explained that clearly. I’d be eternally grateful if someone could point me in the right direction – I’m desperate!

1 Like
2

I remember having this issue once before, I just downloaded the video in the end (I had permission to do so) and just added it as a background.

I am sure there is a work around which was quite simple.

3

I take it, you are not actually setting a background video, because you don’t get an embedding option.

CleanShot 2023-09-26 at 16.40.15@2x

So you’re using the video bric?

5

Works well @Jerry nice one.

6

Hi @PeteSharp, I’m not using the video bric – you do indeed get an embedding option for a background video, but you have to go into the ‘video background’ layer to add the code (see here: Youtube Video Background – Blocs – User Documents)

1 Like
7

Thanks so much @Jerry, I was puzzled at first but then realised the code had to go in the footer and it works perfectly! Really appreciate that you took the time to reply and help me out. This forum is fantastic!

8

Oh nice. That’s great, learn something everyday. I have never used it before. Weird approach though :grin:

1 Like
9

Thanks again @Jerry for providing the solution, but I do have one further question… The fix only seems to work for one video – if I add another video block or background to the page the second one still resizes in the default manner. It’s nothing to do with the embed code as I can swap the videos round and both will work fine but only if they are the first one on the page. I have confirmed this by dragging the blocs above each other and the ‘correct’ behaviour defaults each time to whichever video is higher up the page (Hope that makes sense).
I’ve scrutinised your code but can’t see what might be wrong as it seems to apply to any iframe. Do you have any suggestions? I’m stumped!

10

The JavaScript only gets the first iframe. It will need to be modified using querySelectorAll and then run through for each instance. You can then have as many as you want.

That’s the gist of it anyway if your feeling brave to give it a go.

1 Like
12

Thank you @Jerry and @PeteSharp, I’ll go away and try using the questySelectorAll thing which Pete suggested and will report back!

13

Yes very aggressive :joy: probably easier ways.

15

Copy + Paste + Change author :joy::joy:

17

Vimeo is great. Although if I was doing a video background I would self host.

2 Likes
18

I agree, 100% for background, specially if the user is using a few.
I did 3 websites where I had Vimeo links from my client but ended up self hosting - was seamless.

@Espresso why don’t you just self host?

19

Good question! I’ve not done so before but was led to believe (from stuff I’d read online) that self hosted videos don’t perform well on all devices so it’s better to use YT or Vimeo as they will format the file correctly for each device or browser, if you see what I mean. I’d love to hear that I’m wrong about that as self-hosting would be much easier!