Docs

[Alex W]

Hello,

I am attempting to have a background video above my masthead. I have followed the steps listed here to no avail:

https://theme.co/x/member/forums/topic/integrity-09-demo-home-page-appears-to-not-have-loaded-properly/#post-173779

I have tried disabling my plugins and creating a new page from scratch but have been unsuccessful. I have searched the forums and unfortunately have been unable to solve this.

I have tried using the video being hosted locally as well as on vimeo.

I am on the latest version of WordPress, X Theme, and Cornerstone.

The site is http://www.snappyscreen.com

The page in question is not visible. You will have to go to snappyscreen.com/home-2-2

Thank you in advance.
Alex

[Alex W]

Upon inspection, this is the error message:

JQMIGRATE: Migrate is installed, version 1.4.1
cs-body.min.js:3 Uncaught TypeError: Cannot read property ‘media’ of undefined
at HTMLDivElement.i (cs-body.min.js:3)
at cs-body.min.js:3
at dispatch (jquery.js:3)
at r.handle (jquery.js:3)

Any thoughts?

[Rad]

Hi there,

Thanks for posting in.

This is the error that prevents it from playing.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://player.vimeo.com') does not match the recipient window's origin ('http://snappyscreen.com').

Related to this https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Please contact your hosting provider for proper configuration of access control.

Thanks!

[Alex W]

Hi Rad,

Hmm. I had tried to host the video locally as well and experienced the same issue. Is the error independent of the video file location?

[Rupok]

Hi Alex,

Thanks for writing back. Try to open the video in browser with the video URL. If it’s fine then it should play on browser and should work fine as well. Let us know where you are trying to use this, point us the section.

Cheers!

[Alex W]

The video displays correctly when opening in a browser:
[video src="http://snappyscreen.com/wp-content/uploads/2017/02/How-It-Works-for-Website-Just-Spraying.mp4" /]

As I mentioned in my original post, I am attempting to put the video above the masthead. I have setup a transparent revolution slider as described in the tutorial.

[Christopher]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[Alex W]

This reply has been marked as private.

[Christopher]

Hi there,

The video file is too large (17MB) for being background video, it should be at most 2MB.

Thanks.

[Alex W]

Hi Christoper,

I tried it with a smaller video as well and have encountered the same issue. The new video file size is 1.26mb.

Please see attached screenshot.

[Alex W]

Additionally, as mentioned in my earlier post, when I pull up console I am seeing the following error:

JQMIGRATE: Migrate is installed, version 1.4.1
cs-body.min.js:3 Uncaught TypeError: Cannot read property ‘media’ of undefined
at HTMLDivElement.i (cs-body.min.js:3)
at cs-body.min.js:3
at dispatch (jquery.js?ver=1.12.4:3)
at r.handle (jquery.js?ver=1.12.4:3)

This error is not present on the other page (snappyscreen.com/home-2-2) that is executing the video in an alternative method (all through revolution slider)

Please see attached screenshot for comparison.

I have tried adding a background video to other sections for testing purposes, but receive a similar result. When adding a background video to a different section, nothing is loading and the section is blank. I have tried disabling all 3rd party plugins as well, but had the same result.

[Lely]

Hello Alex,

First, I have remoce the following on your page BODY CSS classes text field.

#nav {display:none;}
That code can be added on Appearance > Customize > Custom > Edit Global CSS or Cornerstone > Settings Tab > Custom CSS. Body classes text field accept class which will be define either on customizer or Settings Tab > Custom CSS.

I did some testing to see where the issue is coming from. I did create a sample transparent slider with no fade effect. But that is not where it is coming from. Then after thorough checking, I can see it is coming from your vimeo link:https://player.vimeo.com/video/202597382. Please note that we have to use vimeo direct link. See this link on how to access your vimeo direct link:https://vimeo.com/forums/help/topic:128059

As you can see, this is a sample:http://demo.theme.co/integrity-1/. It is using vimeo too, and the video direct link is:http://player.vimeo.com/external/118652789.hd.mp4?s=8456b8577a16b5d2ca013a149f0e3d88

Please try that and do let us know how this goes.

[Author]

Posts