How to start background video with a button and remove autoplay?

Hi Gents;

Weblflow’s video background option is great but it’s lack of customizing. I would like to play my bg video with a button click but i cannot remove the autoplay.

Here is the code that i used for removing autoplay that didn’t work;

<script type="text/javascript">
document.getElementById('Video').removeAttribute("autoplay");
</script>

And here is the code that i try to play with button click;

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('#pause-videos').click(function() {
$('video').get(0).pause();
return false;
  });
});
</script>

Where am i making the mistake?

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  function stopAllVideos() {
    $('video').each(function() {
      this.pause();
    });
  }
  $('#pause-videos').click(stopAllVideos);
  stopAllVideos();
});
</script>

Thanks for the clean code but it’s not working. Here is the preview link;

https://preview.webflow.com/preview/background-video-click-play?preview=e07ed8b0a810fd0eb5782309c24ef8b2

And published site;

http://background-video-click-play.webflow.io

Your button ID is confusing. Why would you name it “pause-videos” when you want the button to play it instead?

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  function stopAllVideos() {
    $('video').each(function() {
      this.pause();
    });
  }
  function playAllVideos() {
    $('video').each(function() {
      this.play();
    });
  }
  $('#pause-videos').click(stopAllVideos);
  $('#play-videos').click(playAllVideos);
  stopAllVideos();
});
</script>

Button with ID “pause-videos” will “pause-videos”.
Button with ID “play-videos” will “play-videos”.

Yes you’re right but i got the script from another topic and forgot to change the id names.

The code is working perfect! Thanks for the all effort.

As last is it possible to expand this script for disabling the video loop?

And I want remove the play button and wonder me why the background video don’t play automatically? :frowning:

Hey,

I’m wondering if this method with a little tweak would solve an issue similar to this involving videos and tabs. I have a CMS collection formatted to display in tabs. Tab Link = the video’s name and the tab content = the CMS content (namely the actual video).

I’ve implemented the following so that hovering over tab links automatically opens the tab:

<script>
$('.video-tab-link').hover(
  function() {
    $( this ).click();
  }
);
</script>

This works for the tabs but when you play a video (and leave it playing) and then go to the next tab, the video keeps playing in the background unless it’s manually paused before changing tabs.

I would think I could extend the above code to play or pause videos upon hover by giving the .click more functionality but that’s just my uneducated assumption.

I tried using your solution for the OP but there doesn’t seem to be a way to make BG videos dynamic – hence why I am using the video embed function to connect them to the CMS collection I created for the section.

Any ideas/suggestions? Happy Friday!


https://preview.webflow.com/preview/crossfit-elmira?preview=55cb2078aa447cf42697220087f5cf95

Live site with tab collection in question: http://crossfit-elmira.webflow.io/why-join