How to stop auto-replay of video header

korgul
(@korgul)

6 years, 2 months ago

I am working with the Twenty Seventeen theme in WordPress 4.9.4 and have created a child theme. The child theme folder contains the following two files: style.css and functions.php. I have been able to successfully activate my child theme.

I am using a short video snippet (~4MB) that has been uploaded into my media library for the video header and I am trying to disable the looping (auto-replay) of the video. Any suggestions of how I might accomplish this?

Any suggestions or guidance would be greatly appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)

David Hoy WP
(@yourdigitalprofits)

6 years, 2 months ago
Took a minute to dig this out, it works on my client site here: https://musichands.co.uk/

I have no idea how it will work in your setup, accept no liability etc.

Copy the global.js file from wp-content/themes/twentyseventeen/assets/js

in you child theme folder create the folder “js” inside a folder “assets”

paste the global.js file, open it in your favourite code editor.

At the bottom of the file you will find this:

// Add header video class after the video is loaded.
$( document ).on( ‘wp-custom-header-video-loaded’, function() {
$body.addClass( ‘has-header-video’ );
});

Change it to this:
// Add header video class after the video is loaded.
$( document ).on( ‘wp-custom-header-video-loaded’, function() {
$body.addClass( ‘has-header-video’ );
});
$( document ).ready( function() {
$( document ).on( ‘wp-custom-header-video-loaded’, function() {
$(“#wp-custom-header-video”).attr(‘autoplay’,true );
$(“#wp-custom-header-video”).attr(‘loop’,false );
});
});

Hope this helps you @korgul

p.s. the magic happens here: $(“#wp-custom-header-video”).attr(‘loop’,false ); the false statement is what stops the video, set it to true and it WILL loop.

(This is from here: https://wordpress.stackexchange.com/questions/254234/wordpress-4-7-custom-video-header-stop-autoplay – so we both owe thanks to @bravokeyl !)
- This reply was modified 6 years, 2 months ago by David Hoy WP.
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

6 years, 2 months ago

Props @bravokeyl

Storyman
(@storyman)

6 years ago

For whatever reason this isn’t working. I’ve turned off site caching, cleared browser caching, and yet the video continues to play.

WordPress version is 4.9.5, Twenty-Seventeen version is 1.5.

Don’t know how relevant it is, but this is a fresh/clean install of WordPress.
Morphim
(@morphim)

5 years, 11 months ago
This didn’t work for me either until I noticed that the above code has different quote and speech marks. I’ve had this before when pasting code in regular text that it changes it to opening quotes and closing quotes, which are different characters and not recognised by the code
If I pasted this code it shows errors.
However, if I retyped all of the quote and speech marks with the standard (below the @ sign on my keyboard for quotes and above no. 2 for speech marks) it works fine.

Try this:
```
// Add header video class after the video is loaded.
$( document ).on( 'wp-custom-header-video-loaded', function() {
$body.addClass( 'has-header-video' );
});
$( document ).ready( function() {
$( document ).on( 'wp-custom-header-video-loaded', function() {
$("#wp-custom-header-video").attr('autoplay',true );
$("#wp-custom-header-video").attr('loop',false );
});
});
```
Also, under the original code there is
})( jQuery );

Make sure you leave that after this code.
Hope that helps