Background mp4 video not playing

[hyperdrive_boom]

Good morning,

I have inserted a mp4 as a background video on my site and it will not display. What is odd is the fallback image only displays on a mobile phone (which is to be expected) - on desktop it is just blank…

I have checked the mp4 source and it works fine. The site uses the latest Wordpress and X Pro.

Will put all details in a secure note

Thank you!
Jason

[basanta]

Hi There,

Thanks for writing in!

Seems your cache system is blocking the Video URL which is a external source.

Can you please upload the video in your server and add as background. Also check disabling the cache plugins too if you have any.
Let us know how it goes.

Thanks

[hyperdrive_boom]

Good morning and thank you for the reply. First of all I do not have cache plugins at present - please check my plugins you will see it is a simple set up.

What ease could be doing this? The hosting??

Also I have added the video to the server (please check link in secure note) - how can I make it a background video via css? The only way I can see it being done is via:

<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>

<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
</div>

This starts becoming complex for my clients as they need to easily edit the page via conerstone

Thank you!
Jason

[rad]

Hi there,

Looks like this a bug, I’ll add this to our issue tracker.

Adding your code will only be limited to the content where it’s added, it will not reach the full-section positioning due to margin, padding, and relative positioning of the parent container.

We’ll let you know if we find something.

Update: It should be working now, I added this workaround to your Cornerstones custom javascript

jQuery ( document ).ready( function($) {

setTimeout ( function() {

jQuery('.x-video .mejs-inner').each( function() {

var video = $(this).find('video');

video.prependTo( this );

video.get(0).play(); //play

} );

}, 500 ); //let's add some delay since MediaElementJS Player is loaded later than HTML code 

} );

Thanks!

[hyperdrive_boom]

Perfect thank you very much!!

[Joao]

Glad to hear we managed to help!