Streaming live at 10am (PST)

Fullpage.js + Background video


#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!!
http://www.jsdelivr.com/projects/jquery.fullpage

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

Related issues:

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


#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());

#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

https://github.com/alvarotrigo/fullPage.js#pause-on-leave


#10

Thanks @samliew it works now! :smile:


#11

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?


#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>

#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.


#19

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