Fullpage.js + Background video

Design help Custom code
1

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

2

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
3

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:

4

@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!

5

Paste this after the line where you initialize fullpage.

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

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

7

This is where you initialize fullpage

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

// <-- ANYTHING AFTER THIS IS A COMMENT
8

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?

9

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

10

Thanks @samliew it works now! :smile:

11

I added this code after initializing fullpage.js:

26
261169×505 40.4 KB

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

@samliew What am I doing wrong?

12

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

13

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

14

not the code… :+1:

15

@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).

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

@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>
18

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

1 Like
19

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

20

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