I’ve created a brand new category for Custom Interactions, so we finally have a place to share our experiments and creations with others.
I’ll be posting my Custom Interaction experiments in here on a regular basis so there will be lots to learn in this area.
Anyway, I’m looking forward to seeing what you can create with custom interactions⚡️
Hi @Norm
This is absolutely brilliant - thank you.
Can I ask a couple of questions please if I may!?
No plans to replace videos, but I may not create videos for every experiment.
That’s fantastic! I’m eagerly anticipating sharing some custom interactions and observing the creative ideas that other users generate!
Hi Norm,
When will this appear in the side bar or on the drop down menu?
It should be there now.
@Norm Wouldn’t it be great to be able to select the direction “up” and “down” in the “Scroll Y” option in the Interaction Manager, then you could make content disappear and reappear when scrolling (e.g. when scrolling down the navigation bar hides and when scrolling up it shows up again). Or would this be possible in another way? I haven’t managed it yet 
. I’ll probably have to experiment further 
.
Have you tried greater than / less than
No, but how would I specify this in the inputfield?
Add sticky as property with if visible … ie … when a div is visible an element in it become sticky and when div is not visible the property sticky is remove …
How do you mesure “is greater” than for all devices ??? High is never the same for mobile, iPad or desktop or I miss something ?
plus add or remove a class is … pain for one property 
Hi @Norm,
A very random question and one which I maybe be asking a stupid question here !!! (it won’t be the first !!)
I have several websites where I have a small video playing in the background on loop on desktop and tablet mode, but takes too long to load on mobile so I have an image on that and set it to show that on mobile only and the videos on the large breakpoint.
On doing this the only issue is, it still loads in the background and slows down the mobile page from loading as fast as it should.
Doing this always gives me great scores on desktop on google page speed etc…and on mobile saying the video is the issue causing it to get a much lower score.
My question is - with Custom Interactions is there anyway to only let video play on larger breakpoints and 100% STOP load on mobile, even in the background?
I have been told code can do it…but could this !?
Thanks
There are potentially a few things you could try.
If you are hosting the video, make sure you have preload disabled. 
If this is a video background on a Bloc you can find the actual video layer in the layer tree and disable this option.
This will stop the video auto loading an playing. Then you can use a custom interaction that is run when the page loads to play the video, but only if the OS is Windows or MacOS using an if statement.
Or you could follow this tutorial video and instead of targeting Windows vs Mac. Target iOS and Android and remove the video when the page loads by giving the video an ID and using the remove element interaction rule.
Thanks @Norm - I’m still half asleep so will look again later! But I think your saying I can target the videos to play on mac&windows only and not on android & iOS.
Guess I just stuck the image in and it will show that Instead or do I need to tell it to show that only?
100% a test for me once I’ve finished this website I’m on!
Can’t wait to try it. Thanks @Norm (right back to bed….2hrs sleep ain’t good!)
Quick question on this, if you have for mobile a background video set to stop on autoplay for mobile view, is still loading/caching but not playing or will it stop loading completey? Just thinking of mobile data in this instance. I have done this in the past with a different system that uses php to detect device and browser type that prevents it being served in the first instance. I’ve got a project on at the moment where this would be useful for a video background in desktop and tablet but don’t want to have a strain on a users mobile data. Tah.
If you use disable the preload option on the video (as I mentioned above) this stops the video loading as part of the webpage. The video will be loaded once you press pay.
Or when an custom interaction triggers the playing of the video.
Take a look at this Example Project.
Video Remove on Mobile.bloc (40.7 KB)
Here is the custom interaction which is triggered when the page loads.
The first two if statements check for iOS or Android and remove the video background (which has the ID my-video) . After this I’ve added a stop rule to prevent any further interaction rules running past this point.
If the visitors device doesn’t match the first two if statement then the interactions skips those parts and goes to the last rule which will make the video background play.
If you preview in Blocs the video will show regardless of viewport size as it’s being shown on MacOS, however, if you use the AirDrop preview share option in Blocs and preview on your iPhone, there should be no video background.
Because preload is disabled, this should prevent the video slowing down the loading time on mobile where it is not needed.
I hope that helps.
Wow! Amazing!!! Thank you @Norm - I’ll jump on this later!!!
This is brilliant!
