Vimeo background video full width in section

Support
#1

I am attempting to recreate the look of this nav and hero video in Pro:

I am close but I cannot seem to get the video to be full width in the section:

Can you please look at the CSS and tell me where I am going wrong?

1 Like
#2

Hi @designerken,

Thanks for writing in!

Thank you for writing in, regretfully, Vimeo/Youtube videos do not work well as a background, unless you have the direct link of the video (e.g. http://techslides.com/demos/sample-videos/small.mp4),

You can also upload the video in to your server and add the URL.

Direct links

Thanks,

#3

Well I know that it works fine as seen in example one. I know that it is using a different system (Squarespace) but it should work its just a CSS issue.

I am using the URL in the Pro page builder as:
https://vimeo.com/######?background=1

This removes all the controls as I want. I notice that if I turn paralax on I can scale the video, but I dont want it that effect of it not scrolling with the page.


#4

Hello @designerken,

Thanks for updating in!

Please be informed that parallax works best with background images only. It is not recommended and will not give you much of a results when you use a background video.

And please understand that the background video needs a direct video file source or direct video URL. Vimeo and Youtube links will not work and give you a better results. You must insert a video link like http://example.com/video.mp4, http://example.com/video.ogv or http://example.com/video.webm.

In one of our demo sites (http://demo.theme.co/integrity-1/), we are using a Vimeo to host the video. We use this exact video link format: http://player.vimeo.com/external/118652789.hd.mp4?s=8456b8577a16b5d2ca013a149f0e3d88

You need a Vimeo Pro account if you want to get the direct links to mp4 video files.

Hope this helps.

#5

@RueNel

Thanks. I will get the the direct link. But then what? How is is formatted to scale to the entire width?

I know that they are not the same system…but in squarespace all that is needed is the URL as I have it and it works fine in the sample I provided.

#6

Hello @designerken,

The video element in our theme does not work like squarespace. Vimeo links inserted as the background video source links will not work. You have to inserted the direct video file link and it should be display covering the entire width of the section.

Regards.

#7

Thanks I will consider using the direct link. It would be nice to allow for users who are Plus users as well.

Also I noticed that the image fallback that gets inserted when the video doesn’t load doesn’t go across 100% either. Is there a fix for that?

#8

Hi @designerken,

The video and its poster image are in control of MediaElementJS library built-in to Wordpress so yes, the poster image will not act as a background since it’s not directly applied to the section but just as a fallback image of the video. But, you could somehow override it by adding this CSS to your Theme Options > CSS

.mejs-poster {
background-size: cover;
}

or

.mejs-poster {
background-size: 100% 100%;
}

The first one will make the image full-width while respecting its aspect ratio for quality. The second one will stretch it making the video distorted. But regardless of CSS, it will not sync with the video itself, please check this https://stackoverflow.com/questions/10826784/make-html5-video-poster-be-same-size-as-video-itself.

It’s the limitation of the HTML 5 video, and even the MediaElementJS couldn’t sync it with the fallback image.

Plus, the video is a background which means, it has varying size depending on the amount of content. Hence, you’ll get a different result.

But, If you’re going to have a properly fluid and responsive background, then the content should scale up and down too. And that’s where Revolution Slider is going to be useful. It can change the size of content to properly sync it to its size (device view) while syncing the background video size.

Thanks!

#9

@Rad

thanks for the css, but that wont work. If you look at how the builder functions when an alt image is used it places it within the poster parameter in the video element of the html. The .mejs-poster is also populated but is set to display:none so it never get shown.

I am forcing the poster image to display be setting a false URL in the background URL:

#10

Hello @designerken,

You cannot force the poster image to display because the Media Element will check for the video and when the video url is invalid, it will automatically display the poster image. And poster image is an element attribute of the video element.

Hope this helps.

#11

But I am forcing the poster image to display.

Have a look at the URL in my secure note. The dev is currently displaying the poster image selected from within the cornerstone screen shot in my previous post.

However this poster image is doing the same thing that the video was doing in my original post and not filling the container like I wish the video to do. I have the direct video link now from Vimeo. So that issue is now resolved because I can place that in. I am just trying to test the issue were the poster image would be displayed and the CSS provided will not work.

#12

Hi,

That is one of the limitation of the poster image.

You can use a transparent poster image in combination with a CSS background image to make that image stretch across the entire width of the page.

Please check the link below

Hope that helps

#13

Is there a way to use a video on Vimeo Plus for a background? I don’t want to upgrade to paying £20 a month to Vimeo for Pro, just so I can get a video background! Other themes seem to allow this function from Vimeo plus or youtube, could you explain why it doesn’t work here?
I don’t want to self host either - it’s too unreliable with the quality of playback.

#14

Hello Georgie,

Please don’t mind but this is a post although similar is started by a different user. Posting on someone else thread create lot of confusion and slows down the response time. Faster response we encourage users to create a new ticket. In that regards I request you to please create a new ticket and someone from support team will take a look. For more details please take a look at our support handbook.

Thanks.

#15

Sure. It seemed like the same question to me. Usually people get annoyed when you ask the same question twice!

#16

Great!
We will be responding your new thread shortly.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.