Background video not playing in chrome and disable loop

Support
#1

Hi,

I have a background video that I added through Cornerstone. It is not working on many browsers. It is only working on Safari. Also, I want to stop the video from looping. I tried to add the following code, but it doesn’t work. Thanks!

jQuery (function($) {

$(document).ready( function() {$(‘video’).prop(‘loop’, false); } );

} );

#2

Hello There,

Thanks for writing in! I have checked the page and it seems that there is a JS error on the page. Please remove this block:

setTimeout(function(){document.getElementById('wrapper').style.display='block'},5000);

Please test the page again after you have removed that JS block because it is generating an error.

Please let us know how it goes.

#3

Thanks for the reply!

I removed the problematic JS, but the video is still not playing in many browsers (including Chrome). Also, the video is still looping. Any other ideas?

#4

Hello There,

Thanks for providing the information. I noticed that you are using an older version of X(5.0.3) and Cornerstone (2.0.5).

X 5.1.1 and Cornerstone 2.0.6 are now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/). Please do update to the latest version first. After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#5

Thanks. I moved the page over from my staging site to the live site.I got the video to play in all browsers by changing it to a .mp4. However, I still can not stop the loop. Any suggestions? Thanks!

#6

Hi there,

Thank you for the information. The problem is that you added only the .mov extension for the video:

The cross browser experience is a little bit tricky and you need to add webm, mp4 and ogv to make it work on all browsers. To add the other URL you simply need to separate the links in the option with pipe | character:

Hope it helps.

#7

Thank you so much for the reply. That helps! However, I still can not stop the video from looping. I have tried all of the JS that I found on the forum. Any idea how to stop the loop? Thanks again!!

#8

Hi again,

You should try this code instead:

jQuery(document).ready(function($){
	$('.page-id-3867 video.x-mejs').prop('loop', false);
});

Let us know how this goes!

#9

Thanks for the reply. I added the code, but it still did not stop the loop. Any idea what’s wrong? Thanks!

#10

Hi again,

Can you please try replacing the previous code with this:

jQuery(document).ready(function($){	
	setTimeout(function(){$('.page-id-3867 video.x-mejs').prop('loop', false);},5000);
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#11

Thank you so much! That worked.

One more question:

Is there a way to make the background video behave the same way an image would when the browser is scaled down?
You can see that the other pages in my secondary tab menu have images instead of videos. I want the section with the video to keep its aspect ratio when scaling down, just like the pages with the images. Is this possible? Thanks!

#12

Hi there,

The video shrinks itself correctly on different screens as we used the object-fit: cover; CSS code. But you can not expect to have the video react exactly like a background image.

It is impossible to do so on the web at the time being.

Thank you for your understanding.

#13

Hi There,

Would you mind providing us with your website URL so we can take a closer look?

Thanks.