Fullpage.js + Background video

Hi,

I’ve implemented fullpage.js code on my website, following this step by step:

Inside all the div’s I have a background video, and it’s not playing with the fullpage code.

public link: https://preview.webflow.com/preview/featureforward?preview=0e633dd84cdc24600a6804008b8653f9

I’m not sure why this is happening, background videos are supposed to auto play.
Any help would be much appreciated :grinning:

Corinne

You can ask this Q also in Github (Fullpage.js). This is an issue with Fullpage.js and videos.
I dont see you added “fullpage.js” libary!!

Also add the publish HTML (in edit mode its impossible to see how Outer assets works - you should test the public version)

Related issues:
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/backgroundVideo.html

https://stackoverflow.com/questions/40332936/html5-video-autoplay-not-working-with-fullpage-js

http://jsfiddle.net/97tbk/1428/

1 Like

Thanks @Siton_Systems, I added the fullpage.js in the custom code section of the project settings, like it says in the step-by-step tutorial. You can see it works in the link: featureforward.webflow.io

I tried adding the code from Github but don’t see any difference :pensive:

@Siton_Systems I’ve looked at the instructions on Github but I’m not sure where to use it and how in the Webflow designer.
There’s also a problem with this script and interactions (none of them work on scroll).
I’m not very good with Java Script, does anyone know how to solve this?

Thanks!

Paste this after the line where you initialize fullpage.

$('video').each((i,v) => v.play());
1 Like

thanks @samliew I tried to paste that code inside the script but it doesn’t work… :sweat:

This is where you initialize fullpage

<script>
$(document).ready(function() { 
    $('#fullpage').fullpage(); // <-- THIS LINE
    // PUT CODE HERE
});
</script>

// <-- ANYTHING AFTER THIS IS A COMMENT

Thanks @samliew !
It works now when the site is loaded, and when scrolling down on the page, but if I scroll back up again the videos stop. Any idea how it can keep on looping all the time?

GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

Thanks @samliew it works now! :smile:

I added this code after initializing fullpage.js:

The vidoes keep on playing but the fullpage.js stopped working :sweat:

@samliew What am I doing wrong?

Based on the documentation, you are supposed to add custom attributes to the video element. The code should already be perfect.

@samliew It all worked before I added the ‘video data-keepplaying’
Should the ‘video data-keepplaying’ be added to the video element itself?

not the code… :+1:

@samliew so the video should get a unique ID?

Are you sure I put in the right code? It makes the fullpage effect stop working so I suspect something is wrong with the code itself. When I erase this part the fullpage continues to work (the videos stop).

<script>
$(document).ready(function() { 
    $('video').each((i,v) => { $(v).attr('data-keepplaying', ''); v.play(); });
    $('#fullpage').fullpage();
});
</script>
2 Likes

@samliew thanks so much for your help!

I implemented the code exactly like you wrote it, the videos work, but again the fullpage.js isn’t working :frowning:

here: http://featureforward.webflow.io

This is the code I put in the before /body tag

<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"> $(document).ready(function() { 
$('video').each((i,v) => { $(v).attr('data-keepplaying', ''); v.play(); });
$('#fullpage').fullpage();});</script>

You need a separate script tag for the js file. Don’t combine.

1 Like

Thank you @samliew ! I finally got it right :grinning:

How did you get this to work - I did everything you have done? this is my code.

/* JS CODE */

< script type=“text/javascript”>
jQuery(document).ready(function($) {
$ (‘video’).each((i,v) => { $(v).attr(‘data-keepplaying’, ‘’); v.play(); });
$ (‘#fullpage’).fullpage({

    scrollingSpeed: 1000,
    navigation: true,
    slidesNavigation: true,

});
//methods
$.fn.fullpage.setAllowScrolling(true);

});

/* HTML */

< script src=“https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js”>< /script>

< script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js">< /script>

/* HTML */

< div id=“fullpage”>
< div class=“section”>
< div class=“section”>
< div class=“section”>
</ div>

p.s. i know i have spaced in the tags