Vimeo Pro Background Video - Issues

Support
#1

Hi,

We created a background video for a site with a vimeo link, following the guides.
Sometimes it works, most often it doesn’t, however it sometimes works from a mobile device.

We’ve cleared Browser Cache (multiple times)
We’ve cleared Cache from everywhere else within Wordpress (multiple times)
We’ve tried on Mac and PC across several browsers
We’ve tried using a VPN connection to ensure that we could simulate access from a different IP address.

All the notes for using Background Video (Hero style) say that you need Vimeo Pro to do this (which we have). All the notes say WHERE to access the links from (which we have). Set within X-Pro to PLAYER rather than embed.

The format of the link does NOT end with .mp4 (as you will be aware) and it follows a nomenclature like…

https://player.vimeo.com/external/12345678.hd.mp4?s=a8d8d8s8s8d8s8d8sd8sd8 &profile_id=100
(This is NOT the actual link but showing you that it does not end with .mp4)

Please can you take a look at this issue (we raised it last year, however it worked for a while but when all updated with themes etc, it no longer works - it was very unreliable anyway and often didn’t work without a brower cache clearance - which isn’t ideal anyway).

Help appreciated! Thanks

#2

Hello @stuartmurphy,

Thanks for writing in! We haven’t changed anything with the background video. You simply need a direct video link http://example.com/video.mp4 so that it can be displayed. In your case, you will need a direct Vimeo video link:

See the secure note.

If still it does not display, Vimeo might be blocking the video from being played by outside or other players. You may need to check Vimeo’s policy as well.

Kindly let us know how it goes.

#3

Hi @ruenel,

Thanks for your reply. As you’re probably aware Vimeo’s direct video link is available on Pro and Above level accounts only. We’re using a Pro account and we are using the same method as per your Zendesk.com tutorial link, to get their files. We naturally tried this method.

I tried the VOD link you sent in secure note on several browsers and in all cases there is no permission for a link of this kind. The only link that we can get for our files is in the same way everyone else uses for a direct video link - I will copy the link in a secure note below to show you that the link works, but it isn’t visible as a background video (as described above). We are having to use third party plugins to work around X-Pro to show video on other pages however we need a hero-style video. The only tutorials I can find online about Hero video in the background are limited in nature and the one video which is available shows a user (very quickly) using a direct link to a file they have on their own server (not YT or Vimeo).

Please can you take a look at this and let me know if this functionality exists and can actually work in a robust manner. I know that you are an expert as I’ve received a number of brilliant responses previously on other topics - so if anyone can understand what is happening and why then it is you! As far as I know, YouTube also has a similar philosophy with links. This is a really important feature to get working as it is for a film company. Thanks @ruenel

#4

Hi @stuartmurphy,

The Vimeo link indeed works, what’s not working is the URL you have added as a background. This is what I’m seeing,

image
image1904×229 22.2 KB

This is not a theme issue, the theme only uses the MediaElementJS library that is part of WordPress core. The problem is the URL itself, and it’s inaccessible. The proof that it’s not a player or theme related issue is by visiting the link directly, and it will show Access Denied.

Again, there is no problem with the Vimeo link, in fact, that’s really the correct way. That’s why I’m not sure why you’re using a different URL in the background, as shown in this screenshot

image

You should use the Vimeo direct URL for it to work.

Hope this helps :slight_smile:

#5

Hi @ruenel,

Thanks for your reply. I’m really perplexed as to have you have got this URL in the screenshot, unless it has got there by ‘magic’. The URL you screenshot hasn’t been input into Pro Headers, as the first time I saw this was in your Secure Note.

I checked responsive icons and noticed that for some reason it was in the MOBILE box, but it had STOPPED working after you sent the link through, so I changed it back to the original (ending ID=175) as I forwarded to you in my Secure Note. The Mobile view now works, when viewed from a mobile device.

Please can you look back at the first note in the thread and read again as I’m confused whether you want me to use the link ending .mp4 (which I have never seen before you sent this through on secure note) or the link ending ID=175 (from the secure note I sent through). Neither works, except for the Vimeo recommended way using the ID=175 without the .mp4 at the end of the URL, and is the way Vimeo uses direct URL.

The problem is that it isn’t working. Please can you help me resolve this as I’m more confused now than previously. I even tried creating a blank page and a virtually blank header and used both URLS (the one you sent through and the one Vimeo recommends, neither of which works).

Please can you advise. I’m trying to use a background video, with the Vimeo URL as in the Zendesk video (we’re both on the same page here) and placing this background inside the Header’s container (as advised in tutorials I have viewed). On Viewing I can’t see any video in the background, regardless of URL used and can’t see any Access Denied message also (when using the link you sent to me and was still inside the Mobile version of the test site when I looked to see where you had got this screenshot from).

Hope this is clear. Thanks Ruenel

#6

Hello @stuartmurphy,

I have edited your header and also modified your Vimeo URL link.
See the secure note.

Please check your site now.

#7

Thanks Rue,

Checked on Mac and on separate PC - the header still doesn’t work. I can get to work from a mobile phone only. I’ve cleared browser caches (in Safari. Chrome. Firefox. Edge) and still not working. Also flushed all caches in WordPress using W3 total cache (did this several times) and still not working.

I took a look at the URL you provided, based on theThemeco Integrity theme video link and can see the the ID isn’t used as you say. The ID is used to differentiate the difference between different forms of HD playback (720HD or 1080HD) and shouldn’t make a difference.

Anyway, I tried the link you provided (without the id=) and it actually plays the film directly with the unusual .mp4 link that you had sent in the secure note earlier, however for some reason it isn’t visible. I haven’t changed what you have done just so you can be sure that it hasn’t been edited back to the id= version. It is exactly how you left it but I can’t see the film on desktop devices.

i can only see the video from the page if I click on the area it should be viewable in and then right click (mac) and select Open Media in current page in MK Player - then I can see the video. Any idea where this video has gone please? It is like the video is actually there but it can’t be seen.

Even tried logging out of Vimeo to see if that was causing an issue but it wasn’t.

Can you let me know if you can see it from your end on Desktop machine (mac or PC) when viewing the homepage please? Thanks Rue

#8

Hey @stuartmurphy,

When I first modified the URL, it plays on my end. And then when you respond again and I check the homepage again, the video no longer plays. Vimeo does not allow direct access to the video. It is evident because you when paste the given Video URL with or without your profile ID, it will just simply redirect to the VOD URL.

See the secure note for more details.

With this case, we highly recommend that you contact the support of Vimeo since you have a Pro account. You can raise this case to them and maybe you can also give the demo site link to theme as a comparison as to why the video is not playing with your account.

Thanks.

#9

Hi Rue,

Just did some tests this morning by checking the following:

went to ANOTHER site we own and put the links in. the video plays fine.
Tried another one of our Vimeo videos and that also plays fine.

Went back to the original site and changed the video - cleared all caches (browser and WP) and ALSO removed ALL the plugins from the site. Works fine! Changed the Vimeo Video and it also works fine again,.

Renabled ALL plugins one by one and the Plugin which seems to cause the issue is The-Grid.
Enabled and re-enabled (in different browsers) and this also confirmed conflict between X-Pro and The-Grid.
As the offending page also contains a loading grid (from The-Grid), I created a separate page AAAATEST with ZERO page content (so only the header and basic footer were loading) and the exact same problem occurred with THE-GRID plugin.

Is this a confirmed Issue as I can see archived posts also referring to conflicts with The-Grid.

Can you please advise best solution for creating a background video with simple text on top, within the header, apart from using background video within the page, as I doubt I can get around this conflict issue. Vimeo doesn’t appear to be causing any issues once The-Grid is disabled or on our other site, where funnily enough, it has an exact replica of The-Grid running and The-Grid appears to work with our films!

We need the Grid on this site, so that’s a real headache!

Thanks for trying to fix the issue. Any advice appreciated!

#10

Hey @stuartmurphy,

Have you tried using Slider Revolution. You can add background video that way. See https://www.themepunch.com/slider-revolution/slide-background/. You can either add Slider Revolution in the Header Builder by using the Classic Slider Revolution element or add the slider shortcode in a Content Area element.

Hope that helps.

#11

Hi @christian

Yes, I’ve had challenges with Google CPU usage with Revolution Slider - it’s certainly a more versatile option. If you have any thoughts about how to reduce the CPU usage, through Chrome especially then that would sort this issue out, as initial load time is a real issue with it, when used on-page here.

#12

Hey @stuartmurphy,

Regretfully, there’s no other method than to use the Background Video feature of a Bar in the Header. Other than that, a 3rd party developer needs to custom code a solution.

#13

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