Need to stop (not pause) background video on-click

Design help Custom code
1

Hello,

On this page, http://55-corinthian-drive.webflow.io/video-testing-button on selecting the play button a hidden div with a background video is revealed and plays. All good. On selecting the closing icon the video disappears, still good. But the video is still playing, I need it to stop and reset to the start, not pause, or keep playing.

I have tried the following script in the foot of the page concerned, ‘home-vid’ is the id of the background-video element. ‘.video-close’ is the class of the element being selected to hide the div containing the video.

var myVideo = document.getElementById(‘home-vid’);
$(function(){
$(‘.video-close’).click(function(){
myVideo.pause();
myVideo.load();
});
});

In case anybody asks, the designer doesn’t want to use the Lightbox approach, wants the video contained in the div.

Any help with this greatly appreciated.

Cheers
Grant

2

Why to use background-video and not video? (If you want controls “built-in”)? -or- embed code (With all youtube API)

You need to add some custom JS - “on click X” “stop Y” -

3

Yes, thanks Siton, that’s what I’m asking. The following code is what I have tried so far but isn’t stopping the video. (I did have it in my question above but didn’t notice at the time that the Post editor didn’t allow it.)

videoScript

4

1

The load() method re-loads the audio/video element. read her

So remove this line of code

2

You use the core html5 video methods. No such method for stop & restart - - so set the currentTime property to zero (0:00) to get this idea.

currentTime - When setting this property, the playback will jump to the specified position.

1 & 2

Inside the function use this code:

myVideo.pause();
myVideo.currentTime = 0;

Example:

5

Thanks for that. I’ll see if I can get it to work.

Cheers
Grant