Background videos do not play

Hello,

I have just made a client website live, we use quite a few background videos and when we were on the staging server they loaded perfectly. But now nothing loads.

I am using Vimeo Pro account, with direct links to access videos. To see if this was a Vimeo issue I tried a Youtube link and that did not load either.

Any idea how I can try and resolve this issue?

Thanks for your help.

Hello @littleshock,

Thanks for writing in! You may be having a CORS (Cross Origin Resource Sharing) issue. Kindly check this out:

If this isn’t helping, please provide the URL or access to your site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Hello @ruenel,

I have checked the site in Chrome’s console and can’t find any errors that would indicate anything is being blocked and after looking at some Vimeo articles it seems this shouldn’t be a problem.

I have added a secure note with login info. Admin roles on the site require 2-step authentication, so you may be asked to set this up when you first login.

Hello @littleshock,

Vimeo standalone videos should work with the theme. You can check out one of our demo here:

Kindly check out the secure note below.

There seems to be a warning indication that you video is blocked.

Best Regards.

Hi @ruenel, these just look like tracking preventions, which only apply to Microsoft Edge, I think?

I see no console errors that relate to Vimeo in Chrome or Safari. My directly embedded Vimeo videos play perfectly, but the background videos do not.

Any ideas where else I can look? Might this be an SSL problem? A security header problem?

Any tips greatly received.

Hi @littleshock,

I have checked your website and found the Vimeo video which is not showing in the background I used the same in my local environment and it worked. I have investigated your website but unfortunately found that the user does not have the Administrative privileges anymore to access the page and the content. I request you grant the Administrative privilege to the existing user for further investigation.

Thanks

Hi @tristup - sorry, I downgraded you as it was a potential security risk leaving you as admin. I have reinstated you now. Thanks for your help, most appreciated.

Hi @littleshock,

Thanks for restoring the privileges. I went ahead and added the video as the background of a blank page and it didn’t work, but in a similar way, it worked in my local environment. It seems there might be some different reasons behind your issue. I would like to suggest troubleshooting the following common issue to help us to recognize the reason.

1.Theme Related Issue
2.Plugin Conflict
3.Theme Update related issue
4.Child Theme Related issue
5.CSS/JS Customization
6.Disabling Cache
7.Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above help, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– FTP/CPanel credentials to access the files

To create a secure note, click the key icon underneath any of your posts.

Thanks

Hello @tristup, this is really helpful thank you. I will explore these options and if I still can’t resolve the issue I will pull a copy of the site to a staging environment and ask you to take a look.

Thanks so much for your time and support. Much appreciated.

You are most welcome, @littleshock.

Hello @ruenel,

I have an update on this for you. After creating a staging environment, I have discovered this issue is a conflict with Jetpack. I am on Jetpack version 10.6, running Wordpress version 5.9 and the latest version of Pro.

I found this solution to the problem on your forum - Unsolved issue that was closed - videos don't display with any Jetpack after 9.8.1 - unfortunately this no longer works.

I wondered if you have a workaround for this? Alternatively, if you can bump this up the list in terms of fixing it in your next release? My client has paid for background videos on their site and currently we can’t show them without losing Jetpack’s functionality.

Thanks again for your help.

Hello @littleshock,

In the given solution on this thread;

just remove the .x-wp-video-shortcode in the code so that it will work for you.

Best Regards.

Perfect! Videos now loading, thank you very much for your help.

Hi @littleshock,

Glad that we are able to help you.

Thanks

Have been having the same issue for at least a year, and hoping this gets resolved. I tried entering the code in the manner you described, but it did not work:

.mejs-container { position:unset; }

Hi Scott,

I would suggest you go through the following thread, if you have not yet.

https://theme.co/forum/t/unsolved-issue-that-was-closed-videos-dont-display-with-any-jetpack-after-9-8-1/92116/7

Hope it helps.
Thanks

Yes - I tried that several months ago when it was posted - and yes, the solution does work, but only temporarily. It seems that eventually, for some reason, the videos stop playing again. Maybe after Jetpack updates or something like that? I wish there was a real fix instead of these code patches.

Hi Scott,

The issue was already reported to our developers and when I check the ticket it is still in the queue. We don’t have any ETA but well assured that our developers are looking into it.

Thank you.

Would you mind checking my site to ensure I have entered the code in the manner prescribed?

Hello @scottdforeman:

I have removed your secure note because you are not the owner of this thread.

Meanwhile, I have checked your site and I found out that you have added a broken CSS code:

#top .x-topbar .p-info{
     float:right;
     margin-left:20px;
     .mejs-container{
         position:unset;
    }

The correct code should be:

#top .x-topbar .p-info{
    float:right;
    margin-left:20px;
}

.mejs-container{
    position:unset;
}

Be advised that custom coding is beyond the scope of our support. You will have to make sure that your custom coding is correct. You also need to check every once in a while especially after every WP core, theme or plugin updates to make sure that your custom code still works and does not create any issues on the site.

Best Regards.