How To Code : "onscroll event -> stop the player"

Design help Custom code
21

I will just say that the principle how to I am trying to explain can be applied on iframe with BG video full video or on both it doesn’t mother.

Here is list of steps but if is not correct (not what you trying achieve) just ignore it.

  1. grab all wrappers
  2. add event listener on scroll to check if wrapper is in viewport
    2.1 in scroll listener add condition to do several things for two iframes (you can set offset)
    • stop/rewind full video and mute sound
    • display BG video when current wrapper 100% out of viewport
  3. when true play BG video (optional)
  4. on click hide BG video and play full video

as you don’t mind continuously playing BG videos out of viewport you can skip step 3 for BG video iframe.

22

@stan I mean I need only your 2.1 .

3 & 4 that are done already.

23

hi @sprea I know that this code is what you need to work and thats why I have send article (I hope you have read) how to determine when your player is in or out of viewport. You are trying apply scroll to element but browser doesn’t have clue what to do as you didn’t say what are window dimensions that browser have to check.

Once browser will know if your video wrapper is in viewport you should be sorted. List I have posted is only for your developer to understand what you tying to achieve. I always do this kind of list (as comments in code editor) when I need to understand what need to be done (steps to follow) and write code functions make it happened. So you can ignore parts that are done already.

Again read article I have posted in second comment about intersection observer but feel free to find another sources on internet. You can also read documentation for SwiperJS (I thing that you are using this library) if they have some functions in their API to determine if current slide is in viewport.

24

For sure the intersection solution will work but I didn’t had the time to work on intersection yet, because I’ve worked yesterday on the other thing that we have talked together : the errors you told me to repair first, then the code to get all the Ids for the title and the return btn (Now it works but It gives some new errors in console to fix…) didn’t had the time to fix this scroll yet.

25

there is some mess in your code to assigning id’s to elements. You have < 20 in page and < 30 in embed, so you are trying set elements ids twice at the same time. I will recommend delete all code for this part (store is somewhere else) and start from scratch in one place only _(page before body end or embed).
If you will code in embed use ONLY ONE DOMContentLoaded (now you have two!) as DOM is load only once on page load.

I know that you have use basic loop to set id but here is another approach. There is nothing wrong with your basic loop and this is only different DRY way.

// spread
const titr = [...document.querySelectorAll(".titre")];
// standard Array  creation
const btret = Array.from(document.querySelectorAll(".buttonreturn");

function addID(arr) {
  arr.forEach((item, idx) => {
    // here I'm using only class name to get different name for ID .
    const itemName = item.className;
   // adding +1 to index to start id name from 1 and not zero
    item.id = `${itemName}-${idx + 1}`;
  });
}

addID(titr);
addID(btret);
26

thanks,
I’ve clean the code this morning, staying on basic loop.
now :
• everything in before body.
• 1 DOMcontentLoaded
• I add var count = $('.player_js').length; and replace the number of iteration x < 20 with a var x < count

no more error :slight_smile: