im still getting the white space under and the video only plays like for 2 seconds before it scolls. humm
Wow! This video really made me wanna make my own website 🙂 it’s easy to understand and super helpful. Keep making this kind of videos 🙂 I look forward to see what are you gonna show us next
Ce ai facut tu nu am vazut pana acum la niciun elementorist! imi place ca nu ai facut un video lung cu minute inutile. Am sa iti dau un sfat: la tutoriale, vorbeste mai rar.
m-a duc acum sa cumpar versiunea pro. merita toti banii!
Mersi din suflet!! Voi incerca sa tin cont 🙏
@wpmaker l-am cumparat si ti-am dat un bonus de 10%. sper ca acopera fee-ul de la gumroad. daca vrei si daca ai timp fa un scurt video despre WH, REM, %, pixeli etc. partea asta cu pixelii o inteleg, hai sa zicem ca inteleg si cu procentele. dar cand e vb de REM, VH sunt depasit! am insa o rugaminte: daca vreau sa pun un video facut de mine nu din cele date de tine cum fac? Nu m-am prins cum il inlocuiesc.
@wpmaker inca ceva: sper ca licenta din video e FAKE. si nu poate fi folosita. daca e valablia, vezi daca poti sa blurezi in editorul de la YT partea aia.
@SuburbanPhilosophy mersi mult, appreciate you! Stai linistit, licenta din video e reala dar am dezactivat-o ulterior si nu mai poate fi folosita.
VH inseamna “viewport height”, adica un procent din inaltimea ecranului de pe care privesti site-ul. De exemplu, 50vh e jumate din inaltimea ecranului, 100vh e inaltimea intreaga, 300vh e de 3x inaltimea ecranului, etc. Daca mai ai dubii legat de unitatile de masurare, poti oricand sa intrebi pe ChatGPT, e super bun la dat explicatii pentru lucruri dinastea. Succes si mersi din nou pentru sugestii!
@wpmaker eu sunt cu Grok nu cu chatGPT. m-a mai ajutat cand am avut erori.
Wait, why doesn’t your header show while editing the page?
The header I’m using is part of the Astra theme (so it’s not built in Elementor). It’s separate from my page content.
This is great! Very informative and straight to the point! Keep up the good work!
wow unique idea… is it suitable for all types of videos?
You can try it out with any type of video, yes! See what works best with your specific design 🙂
This is amazing! Thank you so much for sharing!
how about mobile visualization?
it’s optimized for mobile, I show it in the intro of the video 🙂
@WP Maker It does not work in my side… for the headings ! everything is ok on Elementor dashboard. But it displays nothing in production… the text is just nowhere… 🙂
Any idea to fix it ?
I don’t understand what you mean, everything works except the headings? Does the video play correctly on scroll?
I’d double check you have the exact same settings as I show, and that you have the exact same structure as me inside the Big Video Container.
Yes the video play correctly on scroll ! But when I click on “publish”, the headings are absent on live version…
Unfortunately it’s hard to tell what the problem is without looking at your Elementor settings. If you have identical settings to me, it should work the same.
Something is probably covering or hiding the headings. It could be a z-index setting (this can make something else, like even the video itself, sit on top of the headings and covering them). Or it could be that the headings or their container are set to hidden on desktop or mobile. Also it could be content from another plugin covering them.
I’d try re-creating it on a completely new and fresh page, and seeing if it works there. And then work backwards to see what the problem is. Sorry that I can’t help more!
Hello my brother , everything is working fine in laptop screens , even i changed my video from your demo video and i made it smoothy by using your smoothing method and its working fine in desktop screens . But whenever i switch to my mobile screens , the video is laggy and I don’t know what i have to do to make it smooth in mobile screens as well. ! And i more think can i talk with you personally i just want to connect with you with my query
What phone are you trying it on, and on what browser? Also, try using the highest quality video setting for optimization and see if that makes it better (the crf 1 command), let me know.
@wpmakerI’m using an oppo phone , and chrome browser but I’m creating an e-commerce website and adding this type of effect on it to make it more engaging for my customers , so my customers may use different types of devices or browsers , so that’s why i want to make it responsive for every single device, and what you said I’ll try it and let you know later. Thank you, and please if possible kindly let me know how to connect with you personally , I’ll not disturb you i just have a little code query that’s it.
The crf 1 option should work great on all phones (except maybe super old ones), hopefully that fixed it for you! Also make sure the video is not too long (makes the size too big). Please write in comments for any question, thank you!
@wpmakerhy i have issue in my code , actually this JS code is different but same ScrollTrigger , in this scrolling effect the images of product rotating from left to right when we scroll , but in this code there is a problem that its not responsive in mobile , issue is scrolling is not working the empty space showing in the mobile screen when we slide , no scrolling effect happing, here’s the code.
Let me know where the issue is. How is your scrolling effect responsive in mobile…… additionally this code works properly on the desktop.
Kindly help me with that. I asked chatgpt as well but i didn’t get the solution.
@wpmakerhy i have issue in my code , actually this JS code is different but same ScrollTrigger , in this scrolling effect the images of product rotating from left to right when we scroll , but in this code there is a problem that its not responsive in mobile , issue is scrolling is not working the empty space showing in the mobile screen when we slide , no scrolling effect happing, here’s the code.
Let me know where the issue is. How is your scrolling effect responsive in mobile…… additionally this code works properly on the desktop.
Kindly help me with that. I asked chatgpt as well but i didn’t get the solution.
(I little edited this code because of youtube comments restrictions)
Amazing, thank you.
Thanks for watching Jacob!
At 12:03 what did you think of that design? Might be my favorite, or 15:20 is cool also!
The surfing was cool and better than the opening a gift one (because scroll speeds are inconsistent, which breaks the magic of the gift-opening moment with silly motion). However, the ship crashing through the frame is the best one in my opinion
This content stands out for two essential reasons. You pay attention to website speed and it works just as well on mobile. You have a new fan, and I look forward to seeing what you create! Kudos!
Thanks so much Caroline! 🙏 This video took a lot of work, it warms my heart that it doesn’t go unnoticed ♥️
Thanks for the video. It worked for me on PC, but on the three Android devices I tested it didn’t work and I’m trying to figure out why. I know that getting background video to play automatically on Android can be a bit of a house of cards with JavaScript activating play, having the right codec, making sure the right autoplay and mute settings are enabled and such.
Did you test this on Android? Any tips?
I got the videos to work on Android by resetting the “Choose Video File” field for each video element, re-choosing the same videos. I transferred the site from local to remote, so something got lost in translation somehow.
That’s the good news. The bad news is that the video is super choppy and not smooth on two different relatively-fast Android phones. I tried your boat video from the asset pack, and that’s also not smooth.
Hey Oran, I have an iPhone and have tested on a couple of friends’ Androids as well, but obviously there are thousands of Android version/hardware/browser combinations out there so I didn’t test them all.
Did you try optimizing your video as shown, using the -g 1 command?
And could you let me know what kind of Android phone(s) and browser you are testing it on?
@wpmaker The phones are the OnePlus 10T (Snapdragon 8+ gen1 and 8GB ram) and the Pixel 6a.
I have three scroll videos on the page, and at least two of them are using -g 1 (I haven’t tried -crf 1 though. Your instructions only showed -crf 19 or 20).
My videos are also 4K, less than 3 seconds and are between 10 and 25MB. But I did try your included boat video and that one is also super choppy. By choppy I mean that I can scroll slowly on the phone where no frames of the video are advancing, and then suddenly frames will advance. If I scroll quickly, then it plays the video quickly but not smoothly.
G 1 is what I meant, sorry. I haven’t tested on those phones unfortunately. Maybe something is throttling the resources usable by the browser. I’d try a couple other browsers (chrome, firefox, opera maybe) and see if the behavior is the same on all browsers.
Then I’d see if there’s a way I can optimize the video to work properly on them, perhaps by trying out different ffmpeg commands. Unfortunately I can’t iterate/test this since I don’t have a phone that lags when playing my boat video.
Let me know if you try a different browser or ffmpeg optimization, AI might help with some ideas. Sorry that I can’t help more.
PS: also make sure you let the website (and video) fully load after opening the page, before you start scrolling.
This way you can tell if it’s a network speed issue (video takes too long to load or loads late, maybe doesnt start loading until you scroll) OR a cpu/gpu performance issue (aka video is fully loaded before you start scrolling, but the cpu/gpu is too throttled to scrub it smoothly).
Thanks for sharing this very neat presentation. 🙏
Could you please tell me for the button, what if we prefer not scrolling to a specific section of the page (using #start) but we would rather either 1./ open a popup window instead (made in elementor) or 2./ Redirect user to another page on the website but still keeping the ‘delay’ for the video to keep playing for x second before redirecting. What is needed to be updated in the ‘button code’ for this to work for either the Popup and/or Another Page (internal or external) ? Thank you.
You’d probably need some separate code logic. I can’t do the custom coding for you, but try asking ChatGPT how to code a button in Elementor using a HTML widget — so that 1) it jumps to #start on the page, then 2) after the jump is done, do X (open a popup or open a new page).
See what it comes up with, test and repeat, go from there. Pretty sure you can do it! 🙂
Wow! You really thought out everything! This is the best video I’ve seen this week! Huge thanks! ❤
Wow haha, happy to hear it!!
Best comment I’ve received this week as well!
Man I’m having so much issue. When I go to mobile the containers don’t readjust and messes up the designs. And if I go to elementor’s responsive side and readjust them the desktop version messes up. What do I do please help
Most likely in mobile you are trying to change settings that don’t have the little “responsive” icon near them. Be careful, there are settings that apply to all
versions of your site (if they dont have the icon), and settings that can be changed separately for desktop, tablet or mobile.
No responsiveness icon near setting name = if you change it, it applies to all 3 versions of the site.
Find a way to do what you want without changing those global ones 👍
@wpmakerthanks man I’ll try them
Hey Friend, thank you so much for this but i am having problem with the size display size of the video, i followed every step to the nail, still my video is so much bigger that it only shows in almost 2 pages and the effect is at the bottom, so by the time someone scrolls till there the effect is almost over, i dont know how to fix it. P.S yes my small video container is set to 100vh. Thank you and waiting for your response.
Hard to tell without looking at your Elementor, but you most likely have other content in your big container, on top of the small video container.
Try with a fresh container, make sure you have the exact same setup as in the video when I open up my Navigation panel.
You can only have additional stuff in the “Overlaid” container. Hope this makes sense!
First take big container make it width to full width and min-height as 300vh and add another contaienr inside it with the min-height of 100vh inside it add the video widget of self hosted one
Now it won’t come out of the container it’s size is fixed
I do exactly what you say, but my video doen’t stick on until I scroll down. It just scroll down the whole big container.
wierd, I found out how. When I put the video section inside the Small container it doen’t stick on the top. I must drag the Video section outside, in the Big Container to make it works.
Yeah, you have to make sure to follow the exact same structure for it to work 🙂 and you can only put additional content in the “Overlaid” container.
From what you’re describing, I think you might have one additional container that my Big container is inside of. Either way, if you follow my exact structure from the video, it should work the exact same.
@wpmakerI’m pretty sure I do exactly what you did step by step. I create a big container, create a small container, create video inside small container. Create a html in the big container. Set big con to 300vh, small con to 100vh. And it’s doen’t work.
I have to move the html in the same container with the video to make it works
@goctomo88 double-check which container you gave the CSS ID to (in the Advanced tab), that might be it 🙂
It works almost perfectly, but I find the very start of the scroll actually scrolls a bit down the image of the video and then it begins scrolling through video, how to stop this?
In the end I just made the Small Scrolling Container’s Top Margin (in Advanced on the Edit Container) to be -100 and that fixed it
Hey Pete, I don’t think that is happening for me. It might be because your menu works differently from mine.
Either way glad you’ve found a fix, thanks for telling us your solution!
@petebaker5369 Its work for me! Thk. Greetings from Mexico.
Hello !
I had exactly the same problem and even the fix Pete proposed do not solve the glitch.
I really followed your steps, got the same menu in Astra theme…
Still this bug…
What could it be ?
Thanks 🙏
@bond007lr hmm, is your video in 16:9 format? I’m not sure what’s happening, and it’s hard to visualize it from this description without seeing the website.
If you could send me an e-mail at wpmkryt at gmail to explain more (or to show me a short video so I can see exactly what’s happening), maybe I could figure it out.
I’m guessing it’s most likely the video format or some settings with your menu and/or containers, but it’s really hard to tell without a video or link to your website. Thanks!
Another way without coding and containers because I disabled the container
Sorry my brother, I don’t have a way to do it without code. You’d need a plugin that does it, and as far as I know there isn’t a plugin out there right now that has this effect (especially one that doesn’t use containers).
It is perfect 😮❤ just mr for me the page don’t stop untill full of vedio finish and between that scroll to next section , can you tell me how can i fx that , i do everything but at tge ebd it is scroll to next section
Are you saying that at the end it scrolls to the next section? That’s what it should do, yes. I don’t think I understand what you’re trying to do, let me know 🙂
@wpmaker No, I mean that I have done all the steps you mentioned, but when I scroll, it jumps to the next section in the middle of the video. In other words, the section doesn’t wait for the video to finish before scrolling to the next one. That’s why the next section appears in view while the video is still playing, even though I increased the section height. I applied the code you gave, but this still happens
At 11:30 in the video did you try changing VIDEO_END_ADJUST and see what happens? Try 0, or 5, or -5. See how your video changes and if that helps you get it how you want.
Also ofc make sure you adjust the min-height of the big container, but you said you tried that already.
Another part of the issue could be the section itself that shows up after the video. Maybe try it on an empty page where there is no section after the video, and see if the full video plays. If that’s the case, then the issue is in the settings of the next section, not the settings of the Big Video Container section.
Hope this helps!
@wpmaker thank you so much i try it again and sorry if i have again problem tell you , thank you for your help ane your good content 🙏❤
It’s not working on mobile. There’s a big white gap underneath the main big container. It does work on tablet view. I didn’t touch any min height settings on mobile version.
Maybe the section underneath your Big Video Container has some margin at the top? Or the Big container having some margin at the bottom.
It definitely works on mobile, as you’re confirming in your message. Your only problem is figuring out where the white space is coming from.
You can copy the Big container on another empty page and test it there. If it works there, then your issue is not in the Big container, but in the section underneath. Hope this helps!
Hi, tried to download but nothing happened. Cool animation by the way
You’ve tried to download it on Gumroad? It’s working without issues for me. Try it again, maybe it was a temporary problem.
If it still doesn’t work send me an e-mail to wpmkryt at gmail and I’ll send it to you there 🙂
Niice
Where did you get the amazing boat video? Are these included in your full-design template?
Yes it’s included, glad you like it! I made the boat video with AI starting from a normal image. I explain how in the video 🙂
This it amazing content! I am having an issue though. Unfortunately I am not using the Astra theme (I’m using Blocksy). The issue I’m having is with trying to make the header sticky and look smooth like your example. I have used chat GPT to try and rectify this issue but it will either stay sticky and you get a small scroll of the whole page before the video starts to play which is really ugly or the sticky breaks and you still get that whole page ugly scroll. Unfortunately I have a full site redirect running to a “coming soon” page so I can’t test it real world. but if I had to loose the sticky header through this section in favour of getting rid of the ugly scroll at the beginning I would. Do you have any ideas? (apart from moving the whole project over to the Astra theme). Thanks in advance for any help you can give.
Hey Stuart! Unfortunately I’m not too familiar with Blocksy 🙁
It shouldn’t be too hard to do, provided that you have a “transparent” header (aka doesnt have a background color like white or black, but is seethrough like mine).
Other than that, you’d have to mess around with the Inspect tool in Chrome and figure out which spacing or settings get in the way. Chatgpt can also help if you’re patient in describing the situation (and giving it my code so that it can infer what you’re trying to do).
If you have Elementor Pro, you could also consider building your header with Elementor. But again, Blocksy should be figure-out’able.
Let me know!
@wpmaker Thank you for giving me the confidence to keep trying!
OK I think I have worked some of it out… It appears that whilst I’m in the editor that’s what is causing the ugly jump before the video starts. Once I turned off the “Coming Soon” redirect so that I can access the page whilst not signed into Elementor (With the little black bar at the top) the ugly jump vanished so that’s my main gripe gone. Just need to keep honing it until I can get the header to stay sticky for that 1st section.
I’ll stick with it and see what I can do. If I solve it then I’ll let you know (And paste the alteration to the code change so that future users can use it).
I do have another question that confused me with the sticky code.
Lines 9 & 10 refer to a “maker-big-container” & “maker-small-container” but I see no reference anywhere to “maker-small-container” in the video. Have I missed something or was this for another deeper dive video that is in the Pro version?
Thanks again for your help and creating this brilliant content and explaining it in a way that even people like me can follow along.
Stuart
Nice!
1. If you want, you can hide the black bar that appears on the front of the site when you’re logged in. Go to wordpress > users > your user (profile). There is a toggle to uncheck to hide the admin bar.
2. The 1st section should stay sticky by default. I’d double check to make sure you have the same settings as me in the video, or you can start over on a new page to ensure you have all sections, settings, code exactly like me.
The big video container is the maker-big, and the small container inside is the maker-small. If you select one of them in Elementor and go to Advanced settings, you’ll see that they have a CSS ID (or class, I forget which) – that identifies which one is which.
Hope this helps, keep at it, you’ll get it working!
There is no deeper “Pro” version, this is it, the only one. You don’t need Pro.
If you hide the admin bar, you access the admin settings of the site by just going to yoursite dot com /admin (add /admin at the end).
That’s what I always do on every site, I kinda hate having that black bar lol.
no one explaining like this watched lots of videos, but nothing works
thank you so much
Glad you liked it!
cant get the code, sign up “something went wrong”
Hey, do you mean when you try to get it from Gumroad at the link from the description?
You don’t have to sign up (just put in your e-mail to be able to check out). It works for me, just tested. Please try on a different browser, or also VPN/ad-blockers can cause that error so try disabling them temporarily if you use any.
Last resort, e-mail me wpmkryt at gmail and I’ll send them to you if you’d like. Thanks for watching!
Great, thank you, will try this for sure. Can you suggest the file size and a resolution for a video?
Experiment with your specific video, the only correct answer is “it depends.” You can start at 1080p, I’d say 2-7MB is fine (video has more time to load than something like an image, as it doesn’t have to be fully loaded for the page to display and even for the video to start playing). It loads “in the back” while the page gets displayed early.
I talk about this more extensively in the video and in the file that explains how to optimize your videos. Have fun if you try it!
When I scroll down the page, the video moves correctly, but below the video player there’s just an empty white area instead of the rest of the content. Do you know what might be causing this?
Hey Luke, maybe by mistake you’ve added some margin or padding to your Small Video Container? Or to another element, unintended.
It’s hard to know exactly what could be the problem on your specific page, you’d just have to check every element to find what adds that space there.
@wpmaker Thanks for the advice! I’ve been checking all margins and padding, but unfortunately, the problem seems to be within my current template—it works fine on other templates I use. I’ve tried everything I can think of, so there must be something in the specific template structure that is blocking or adding this unintended space.
I’ll keep hunting, but it’s clearly a template issue.
Should be fixable with a little custom CSS code. Mail me a link to your page if you’d like (wpmkryt at gmail), will try to take a look.
I have the same problem. Any update? Also thank you for making this video!
@wpmaker I tried many times followed all the instructions as per the video But the script is now working properly I’m using Hello Elementor Theme
Do you know what might be causing the issue ?
I’ve completely developed the UI which is looking good but onscrolltrigger the animation video is not playing
The on-scroll trigger should work regardless of theme, the theme only affects the header if you use it for that, but the on-scroll functionality is separate and should work on any theme as long as there isn’t something else interfering with it (like maybe another scroll trigger on the same page).
I’d try it on a separate, empty page (have only the big video container with everything inside, make sure all the widgets have the correct CSS IDs) and it should work.
I can’t know specifically what the problem is on your specific site as I don’t know what else you’ve done or developed on the page. Hope you find the culprit!
Good job brother
Perfect. Thanks!
I only came to check out what this guy created, and that thumbnail intro alone has me speechless, WOW on loop!
Hahaha thank you my man, happy to hear that!
sir ffmgeg not giving me any output video to downlaod how can i optimized my video
It works for me. Try it on a different browser, maybe you have an extension blocking it.
For those that might have a problem with spacing under the video. I think I might have found the solution. So what I did to fix the problem is I went the “Big Video Container” and activate the sticky header.
Hi, thanks for the tutorial. Why on mobile, when I scroll up (just a little), does the video jump so much?
Hmm I can’t reproduce this, it doesn’t happen for me. What operating system & browser? Maybe you also use something else (script or widget) that auto-scrolls more than normal on your page?
Great tutorial! The video scrubs correctly on scroll, but it doesn’t stay sticky -it scrolls away instead of remaining fixed during playback.
Hard to tell the issue without knowing your specific setup. Try it on an empty page 🙂
If you followed the steps exactly like me, I’d assume your theme or something else on the page is already using GSAP for some scroll effects? In that case it might interfere with the code for this effect unfortunately.
This tutorial was very helpful. Can I use your template on a Ai website builder
Of course!
Hi, can you use any sort of alpha videos? like a cut out or a chroma render. So you are free from the video box, just separated
elements?
I haven’t used an alpha video myself, but I don’t see why it wouldn’t work
This is amazing. I would love to see the process of how you made this particular video using Kling, as you have mentioned.
Glad you like it! In short I had another AI (like ChatGPT or any of the other 100s available that make images), I gave it a description and had it make the first image (first frame) of the video. Then I gave the image to Kling and described what I want to happen (water flows out with the ship). Gave it like 5 tries and chose the best one. That’s the gist of it! 🙂
every time a put 300 vh or whatever at BIG container, same issue ( below the video player there’s just an empty white area instead of the rest of the content, )
Is it SEO friendly ?
This tutorial saved me and my colleague for deploying a site for a client. We tried many other tutorials and solutions, but this one is the most stable one. thank you!
Man this is such a cool effect thank you! My one question is how to resize the video for mobile? I notice yours does the same as mine its basically center-cutting the video on mobile which is fine if all the action is in the middle but for the video I have I need to wider on mobile. Any recommendations for how to do that?
Download the files needed for this design: https://wpmkr.com/scroll
Access our private demo website: https://scroll.wpmkr.com
Thank you so much for watching!
im still getting the white space under and the video only plays like for 2 seconds before it scolls. humm
Wow! This video really made me wanna make my own website 🙂 it’s easy to understand and super helpful. Keep making this kind of videos 🙂 I look forward to see what are you gonna show us next
Ce ai facut tu nu am vazut pana acum la niciun elementorist! imi place ca nu ai facut un video lung cu minute inutile. Am sa iti dau un sfat: la tutoriale, vorbeste mai rar.
m-a duc acum sa cumpar versiunea pro. merita toti banii!
Mersi din suflet!! Voi incerca sa tin cont 🙏
@wpmaker l-am cumparat si ti-am dat un bonus de 10%. sper ca acopera fee-ul de la gumroad. daca vrei si daca ai timp fa un scurt video despre WH, REM, %, pixeli etc. partea asta cu pixelii o inteleg, hai sa zicem ca inteleg si cu procentele. dar cand e vb de REM, VH sunt depasit! am insa o rugaminte: daca vreau sa pun un video facut de mine nu din cele date de tine cum fac? Nu m-am prins cum il inlocuiesc.
@wpmaker inca ceva: sper ca licenta din video e FAKE. si nu poate fi folosita. daca e valablia, vezi daca poti sa blurezi in editorul de la YT partea aia.
@SuburbanPhilosophy mersi mult, appreciate you! Stai linistit, licenta din video e reala dar am dezactivat-o ulterior si nu mai poate fi folosita.
VH inseamna “viewport height”, adica un procent din inaltimea ecranului de pe care privesti site-ul. De exemplu, 50vh e jumate din inaltimea ecranului, 100vh e inaltimea intreaga, 300vh e de 3x inaltimea ecranului, etc. Daca mai ai dubii legat de unitatile de masurare, poti oricand sa intrebi pe ChatGPT, e super bun la dat explicatii pentru lucruri dinastea. Succes si mersi din nou pentru sugestii!
@wpmaker eu sunt cu Grok nu cu chatGPT. m-a mai ajutat cand am avut erori.
Wait, why doesn’t your header show while editing the page?
The header I’m using is part of the Astra theme (so it’s not built in Elementor). It’s separate from my page content.
This is great! Very informative and straight to the point! Keep up the good work!
wow unique idea… is it suitable for all types of videos?
You can try it out with any type of video, yes! See what works best with your specific design 🙂
This is amazing! Thank you so much for sharing!
how about mobile visualization?
it’s optimized for mobile, I show it in the intro of the video 🙂
@WP Maker It does not work in my side… for the headings ! everything is ok on Elementor dashboard. But it displays nothing in production… the text is just nowhere… 🙂
Any idea to fix it ?
I don’t understand what you mean, everything works except the headings? Does the video play correctly on scroll?
I’d double check you have the exact same settings as I show, and that you have the exact same structure as me inside the Big Video Container.
Yes the video play correctly on scroll ! But when I click on “publish”, the headings are absent on live version…
Unfortunately it’s hard to tell what the problem is without looking at your Elementor settings. If you have identical settings to me, it should work the same.
Something is probably covering or hiding the headings. It could be a z-index setting (this can make something else, like even the video itself, sit on top of the headings and covering them). Or it could be that the headings or their container are set to hidden on desktop or mobile. Also it could be content from another plugin covering them.
I’d try re-creating it on a completely new and fresh page, and seeing if it works there. And then work backwards to see what the problem is. Sorry that I can’t help more!
Hello my brother , everything is working fine in laptop screens , even i changed my video from your demo video and i made it smoothy by using your smoothing method and its working fine in desktop screens . But whenever i switch to my mobile screens , the video is laggy and I don’t know what i have to do to make it smooth in mobile screens as well. ! And i more think can i talk with you personally i just want to connect with you with my query
What phone are you trying it on, and on what browser? Also, try using the highest quality video setting for optimization and see if that makes it better (the crf 1 command), let me know.
@wpmakerI’m using an oppo phone , and chrome browser but I’m creating an e-commerce website and adding this type of effect on it to make it more engaging for my customers , so my customers may use different types of devices or browsers , so that’s why i want to make it responsive for every single device, and what you said I’ll try it and let you know later. Thank you, and please if possible kindly let me know how to connect with you personally , I’ll not disturb you i just have a little code query that’s it.
The crf 1 option should work great on all phones (except maybe super old ones), hopefully that fixed it for you! Also make sure the video is not too long (makes the size too big). Please write in comments for any question, thank you!
@wpmakerhy i have issue in my code , actually this JS code is different but same ScrollTrigger , in this scrolling effect the images of product rotating from left to right when we scroll , but in this code there is a problem that its not responsive in mobile , issue is scrolling is not working the empty space showing in the mobile screen when we slide , no scrolling effect happing, here’s the code.
Let me know where the issue is. How is your scrolling effect responsive in mobile…… additionally this code works properly on the desktop.
Kindly help me with that. I asked chatgpt as well but i didn’t get the solution.
@wpmakerhy i have issue in my code , actually this JS code is different but same ScrollTrigger , in this scrolling effect the images of product rotating from left to right when we scroll , but in this code there is a problem that its not responsive in mobile , issue is scrolling is not working the empty space showing in the mobile screen when we slide , no scrolling effect happing, here’s the code.
Let me know where the issue is. How is your scrolling effect responsive in mobile…… additionally this code works properly on the desktop.
Kindly help me with that. I asked chatgpt as well but i didn’t get the solution.
(I little edited this code because of youtube comments restrictions)
Amazing, thank you.
Thanks for watching Jacob!
At 12:03 what did you think of that design? Might be my favorite, or 15:20 is cool also!
The surfing was cool and better than the opening a gift one (because scroll speeds are inconsistent, which breaks the magic of the gift-opening moment with silly motion). However, the ship crashing through the frame is the best one in my opinion
This content stands out for two essential reasons. You pay attention to website speed and it works just as well on mobile. You have a new fan, and I look forward to seeing what you create! Kudos!
Thanks so much Caroline! 🙏 This video took a lot of work, it warms my heart that it doesn’t go unnoticed ♥️
Thanks for the video. It worked for me on PC, but on the three Android devices I tested it didn’t work and I’m trying to figure out why. I know that getting background video to play automatically on Android can be a bit of a house of cards with JavaScript activating play, having the right codec, making sure the right autoplay and mute settings are enabled and such.
Did you test this on Android? Any tips?
I got the videos to work on Android by resetting the “Choose Video File” field for each video element, re-choosing the same videos. I transferred the site from local to remote, so something got lost in translation somehow.
That’s the good news. The bad news is that the video is super choppy and not smooth on two different relatively-fast Android phones. I tried your boat video from the asset pack, and that’s also not smooth.
Hey Oran, I have an iPhone and have tested on a couple of friends’ Androids as well, but obviously there are thousands of Android version/hardware/browser combinations out there so I didn’t test them all.
Did you try optimizing your video as shown, using the -g 1 command?
And could you let me know what kind of Android phone(s) and browser you are testing it on?
@wpmaker The phones are the OnePlus 10T (Snapdragon 8+ gen1 and 8GB ram) and the Pixel 6a.
I have three scroll videos on the page, and at least two of them are using -g 1 (I haven’t tried -crf 1 though. Your instructions only showed -crf 19 or 20).
My videos are also 4K, less than 3 seconds and are between 10 and 25MB. But I did try your included boat video and that one is also super choppy. By choppy I mean that I can scroll slowly on the phone where no frames of the video are advancing, and then suddenly frames will advance. If I scroll quickly, then it plays the video quickly but not smoothly.
G 1 is what I meant, sorry. I haven’t tested on those phones unfortunately. Maybe something is throttling the resources usable by the browser. I’d try a couple other browsers (chrome, firefox, opera maybe) and see if the behavior is the same on all browsers.
Then I’d see if there’s a way I can optimize the video to work properly on them, perhaps by trying out different ffmpeg commands. Unfortunately I can’t iterate/test this since I don’t have a phone that lags when playing my boat video.
Let me know if you try a different browser or ffmpeg optimization, AI might help with some ideas. Sorry that I can’t help more.
PS: also make sure you let the website (and video) fully load after opening the page, before you start scrolling.
This way you can tell if it’s a network speed issue (video takes too long to load or loads late, maybe doesnt start loading until you scroll) OR a cpu/gpu performance issue (aka video is fully loaded before you start scrolling, but the cpu/gpu is too throttled to scrub it smoothly).
Thanks for sharing this very neat presentation. 🙏
Could you please tell me for the button, what if we prefer not scrolling to a specific section of the page (using #start) but we would rather either 1./ open a popup window instead (made in elementor) or 2./ Redirect user to another page on the website but still keeping the ‘delay’ for the video to keep playing for x second before redirecting. What is needed to be updated in the ‘button code’ for this to work for either the Popup and/or Another Page (internal or external) ? Thank you.
You’d probably need some separate code logic. I can’t do the custom coding for you, but try asking ChatGPT how to code a button in Elementor using a HTML widget — so that 1) it jumps to #start on the page, then 2) after the jump is done, do X (open a popup or open a new page).
See what it comes up with, test and repeat, go from there. Pretty sure you can do it! 🙂
Wow! You really thought out everything! This is the best video I’ve seen this week! Huge thanks! ❤
Wow haha, happy to hear it!!
Best comment I’ve received this week as well!
Man I’m having so much issue. When I go to mobile the containers don’t readjust and messes up the designs. And if I go to elementor’s responsive side and readjust them the desktop version messes up. What do I do please help
Most likely in mobile you are trying to change settings that don’t have the little “responsive” icon near them. Be careful, there are settings that apply to all
versions of your site (if they dont have the icon), and settings that can be changed separately for desktop, tablet or mobile.
No responsiveness icon near setting name = if you change it, it applies to all 3 versions of the site.
Find a way to do what you want without changing those global ones 👍
@wpmakerthanks man I’ll try them
Hey Friend, thank you so much for this but i am having problem with the size display size of the video, i followed every step to the nail, still my video is so much bigger that it only shows in almost 2 pages and the effect is at the bottom, so by the time someone scrolls till there the effect is almost over, i dont know how to fix it. P.S yes my small video container is set to 100vh. Thank you and waiting for your response.
Hard to tell without looking at your Elementor, but you most likely have other content in your big container, on top of the small video container.
Try with a fresh container, make sure you have the exact same setup as in the video when I open up my Navigation panel.
You can only have additional stuff in the “Overlaid” container. Hope this makes sense!
First take big container make it width to full width and min-height as 300vh and add another contaienr inside it with the min-height of 100vh inside it add the video widget of self hosted one
Now it won’t come out of the container it’s size is fixed
I do exactly what you say, but my video doen’t stick on until I scroll down. It just scroll down the whole big container.
wierd, I found out how. When I put the video section inside the Small container it doen’t stick on the top. I must drag the Video section outside, in the Big Container to make it works.
Yeah, you have to make sure to follow the exact same structure for it to work 🙂 and you can only put additional content in the “Overlaid” container.
From what you’re describing, I think you might have one additional container that my Big container is inside of. Either way, if you follow my exact structure from the video, it should work the exact same.
@wpmakerI’m pretty sure I do exactly what you did step by step. I create a big container, create a small container, create video inside small container. Create a html in the big container. Set big con to 300vh, small con to 100vh. And it’s doen’t work.
I have to move the html in the same container with the video to make it works
@goctomo88 double-check which container you gave the CSS ID to (in the Advanced tab), that might be it 🙂
It works almost perfectly, but I find the very start of the scroll actually scrolls a bit down the image of the video and then it begins scrolling through video, how to stop this?
In the end I just made the Small Scrolling Container’s Top Margin (in Advanced on the Edit Container) to be -100 and that fixed it
Hey Pete, I don’t think that is happening for me. It might be because your menu works differently from mine.
Either way glad you’ve found a fix, thanks for telling us your solution!
@petebaker5369 Its work for me! Thk. Greetings from Mexico.
Hello !
I had exactly the same problem and even the fix Pete proposed do not solve the glitch.
I really followed your steps, got the same menu in Astra theme…
Still this bug…
What could it be ?
Thanks 🙏
@bond007lr hmm, is your video in 16:9 format? I’m not sure what’s happening, and it’s hard to visualize it from this description without seeing the website.
If you could send me an e-mail at wpmkryt at gmail to explain more (or to show me a short video so I can see exactly what’s happening), maybe I could figure it out.
I’m guessing it’s most likely the video format or some settings with your menu and/or containers, but it’s really hard to tell without a video or link to your website. Thanks!
Another way without coding and containers because I disabled the container
Sorry my brother, I don’t have a way to do it without code. You’d need a plugin that does it, and as far as I know there isn’t a plugin out there right now that has this effect (especially one that doesn’t use containers).
It is perfect 😮❤ just mr for me the page don’t stop untill full of vedio finish and between that scroll to next section , can you tell me how can i fx that , i do everything but at tge ebd it is scroll to next section
Are you saying that at the end it scrolls to the next section? That’s what it should do, yes. I don’t think I understand what you’re trying to do, let me know 🙂
@wpmaker No, I mean that I have done all the steps you mentioned, but when I scroll, it jumps to the next section in the middle of the video. In other words, the section doesn’t wait for the video to finish before scrolling to the next one. That’s why the next section appears in view while the video is still playing, even though I increased the section height. I applied the code you gave, but this still happens
At 11:30 in the video did you try changing VIDEO_END_ADJUST and see what happens? Try 0, or 5, or -5. See how your video changes and if that helps you get it how you want.
Also ofc make sure you adjust the min-height of the big container, but you said you tried that already.
Another part of the issue could be the section itself that shows up after the video. Maybe try it on an empty page where there is no section after the video, and see if the full video plays. If that’s the case, then the issue is in the settings of the next section, not the settings of the Big Video Container section.
Hope this helps!
@wpmaker thank you so much i try it again and sorry if i have again problem tell you , thank you for your help ane your good content 🙏❤
It’s not working on mobile. There’s a big white gap underneath the main big container. It does work on tablet view. I didn’t touch any min height settings on mobile version.
Maybe the section underneath your Big Video Container has some margin at the top? Or the Big container having some margin at the bottom.
It definitely works on mobile, as you’re confirming in your message. Your only problem is figuring out where the white space is coming from.
You can copy the Big container on another empty page and test it there. If it works there, then your issue is not in the Big container, but in the section underneath. Hope this helps!
Hi, tried to download but nothing happened. Cool animation by the way
You’ve tried to download it on Gumroad? It’s working without issues for me. Try it again, maybe it was a temporary problem.
If it still doesn’t work send me an e-mail to wpmkryt at gmail and I’ll send it to you there 🙂
Niice
Where did you get the amazing boat video? Are these included in your full-design template?
Yes it’s included, glad you like it! I made the boat video with AI starting from a normal image. I explain how in the video 🙂
This it amazing content! I am having an issue though. Unfortunately I am not using the Astra theme (I’m using Blocksy). The issue I’m having is with trying to make the header sticky and look smooth like your example. I have used chat GPT to try and rectify this issue but it will either stay sticky and you get a small scroll of the whole page before the video starts to play which is really ugly or the sticky breaks and you still get that whole page ugly scroll. Unfortunately I have a full site redirect running to a “coming soon” page so I can’t test it real world. but if I had to loose the sticky header through this section in favour of getting rid of the ugly scroll at the beginning I would. Do you have any ideas? (apart from moving the whole project over to the Astra theme). Thanks in advance for any help you can give.
Hey Stuart! Unfortunately I’m not too familiar with Blocksy 🙁
It shouldn’t be too hard to do, provided that you have a “transparent” header (aka doesnt have a background color like white or black, but is seethrough like mine).
Other than that, you’d have to mess around with the Inspect tool in Chrome and figure out which spacing or settings get in the way. Chatgpt can also help if you’re patient in describing the situation (and giving it my code so that it can infer what you’re trying to do).
If you have Elementor Pro, you could also consider building your header with Elementor. But again, Blocksy should be figure-out’able.
Let me know!
@wpmaker Thank you for giving me the confidence to keep trying!
OK I think I have worked some of it out… It appears that whilst I’m in the editor that’s what is causing the ugly jump before the video starts. Once I turned off the “Coming Soon” redirect so that I can access the page whilst not signed into Elementor (With the little black bar at the top) the ugly jump vanished so that’s my main gripe gone. Just need to keep honing it until I can get the header to stay sticky for that 1st section.
I’ll stick with it and see what I can do. If I solve it then I’ll let you know (And paste the alteration to the code change so that future users can use it).
I do have another question that confused me with the sticky code.
Lines 9 & 10 refer to a “maker-big-container” & “maker-small-container” but I see no reference anywhere to “maker-small-container” in the video. Have I missed something or was this for another deeper dive video that is in the Pro version?
Thanks again for your help and creating this brilliant content and explaining it in a way that even people like me can follow along.
Stuart
Nice!
1. If you want, you can hide the black bar that appears on the front of the site when you’re logged in. Go to wordpress > users > your user (profile). There is a toggle to uncheck to hide the admin bar.
2. The 1st section should stay sticky by default. I’d double check to make sure you have the same settings as me in the video, or you can start over on a new page to ensure you have all sections, settings, code exactly like me.
The big video container is the maker-big, and the small container inside is the maker-small. If you select one of them in Elementor and go to Advanced settings, you’ll see that they have a CSS ID (or class, I forget which) – that identifies which one is which.
Hope this helps, keep at it, you’ll get it working!
There is no deeper “Pro” version, this is it, the only one. You don’t need Pro.
If you hide the admin bar, you access the admin settings of the site by just going to yoursite dot com /admin (add /admin at the end).
That’s what I always do on every site, I kinda hate having that black bar lol.
no one explaining like this watched lots of videos, but nothing works
thank you so much
Glad you liked it!
cant get the code, sign up “something went wrong”
Hey, do you mean when you try to get it from Gumroad at the link from the description?
You don’t have to sign up (just put in your e-mail to be able to check out). It works for me, just tested. Please try on a different browser, or also VPN/ad-blockers can cause that error so try disabling them temporarily if you use any.
Last resort, e-mail me wpmkryt at gmail and I’ll send them to you if you’d like. Thanks for watching!
Great, thank you, will try this for sure. Can you suggest the file size and a resolution for a video?
Experiment with your specific video, the only correct answer is “it depends.” You can start at 1080p, I’d say 2-7MB is fine (video has more time to load than something like an image, as it doesn’t have to be fully loaded for the page to display and even for the video to start playing). It loads “in the back” while the page gets displayed early.
I talk about this more extensively in the video and in the file that explains how to optimize your videos. Have fun if you try it!
When I scroll down the page, the video moves correctly, but below the video player there’s just an empty white area instead of the rest of the content. Do you know what might be causing this?
Hey Luke, maybe by mistake you’ve added some margin or padding to your Small Video Container? Or to another element, unintended.
It’s hard to know exactly what could be the problem on your specific page, you’d just have to check every element to find what adds that space there.
@wpmaker Thanks for the advice! I’ve been checking all margins and padding, but unfortunately, the problem seems to be within my current template—it works fine on other templates I use. I’ve tried everything I can think of, so there must be something in the specific template structure that is blocking or adding this unintended space.
I’ll keep hunting, but it’s clearly a template issue.
Should be fixable with a little custom CSS code. Mail me a link to your page if you’d like (wpmkryt at gmail), will try to take a look.
I have the same problem. Any update? Also thank you for making this video!
@wpmaker I tried many times followed all the instructions as per the video But the script is now working properly I’m using Hello Elementor Theme
Do you know what might be causing the issue ?
I’ve completely developed the UI which is looking good but onscrolltrigger the animation video is not playing
The on-scroll trigger should work regardless of theme, the theme only affects the header if you use it for that, but the on-scroll functionality is separate and should work on any theme as long as there isn’t something else interfering with it (like maybe another scroll trigger on the same page).
I’d try it on a separate, empty page (have only the big video container with everything inside, make sure all the widgets have the correct CSS IDs) and it should work.
I can’t know specifically what the problem is on your specific site as I don’t know what else you’ve done or developed on the page. Hope you find the culprit!
Good job brother
Perfect. Thanks!
I only came to check out what this guy created, and that thumbnail intro alone has me speechless, WOW on loop!
Hahaha thank you my man, happy to hear that!
sir ffmgeg not giving me any output video to downlaod how can i optimized my video
It works for me. Try it on a different browser, maybe you have an extension blocking it.
For those that might have a problem with spacing under the video. I think I might have found the solution. So what I did to fix the problem is I went the “Big Video Container” and activate the sticky header.
Hi, thanks for the tutorial. Why on mobile, when I scroll up (just a little), does the video jump so much?
Hmm I can’t reproduce this, it doesn’t happen for me. What operating system & browser? Maybe you also use something else (script or widget) that auto-scrolls more than normal on your page?
Great tutorial! The video scrubs correctly on scroll, but it doesn’t stay sticky -it scrolls away instead of remaining fixed during playback.
Hard to tell the issue without knowing your specific setup. Try it on an empty page 🙂
If you followed the steps exactly like me, I’d assume your theme or something else on the page is already using GSAP for some scroll effects? In that case it might interfere with the code for this effect unfortunately.
This tutorial was very helpful. Can I use your template on a Ai website builder
Of course!
Hi, can you use any sort of alpha videos? like a cut out or a chroma render. So you are free from the video box, just separated
elements?
I haven’t used an alpha video myself, but I don’t see why it wouldn’t work
This is amazing. I would love to see the process of how you made this particular video using Kling, as you have mentioned.
Glad you like it! In short I had another AI (like ChatGPT or any of the other 100s available that make images), I gave it a description and had it make the first image (first frame) of the video. Then I gave the image to Kling and described what I want to happen (water flows out with the ship). Gave it like 5 tries and chose the best one. That’s the gist of it! 🙂
every time a put 300 vh or whatever at BIG container, same issue ( below the video player there’s just an empty white area instead of the rest of the content, )
Is it SEO friendly ?
This tutorial saved me and my colleague for deploying a site for a client. We tried many other tutorials and solutions, but this one is the most stable one. thank you!
Man this is such a cool effect thank you! My one question is how to resize the video for mobile? I notice yours does the same as mine its basically center-cutting the video on mobile which is fine if all the action is in the middle but for the video I have I need to wider on mobile. Any recommendations for how to do that?