Hi @andreaegli, many thanks for the video! Do you have an idea, how can I keep all of these video containers in the same ratio (same height, not only width as it is now), despite the difference in the lenght of the heading & text that I've included in them?
Reactie van @eddieho7: This effect can be achieved with just 1 container. just set the video as background. image as background overlay with opacity 1. then go to hover and set the opacity to 0 (you can set your transition speed also under hover) and it will be the same effect. or am I missing something?
first of all: I love your channel. This effect can be achieved with just 1 container. just set the video as background. image as background overlay with opacity 1. then go to hover and set the opacity to 0 (you can set your transition speed also under hover) and it will be the same effect. or am I missing something?
Thank you, Eddie! Talk about making things more convoluted than they should be. You are absolutely right, can definitely be done like you described actually😅 what I would change though is the hover effect, add a CSS linear transition which will make the hover effect be the same speed from start to end
I tried that but It doesn't work here. It works in the editor but not on frontend. Somehow the background image fades away from the start. It looks like the background video always got priority.
@@andreaegli Thanks for answering me! You are incredible! I realized that you put a video link for the video to appear in the background of the container. But it didn't seem to be a TH-cam link. If it is not a TH-cam link, how did you get a link that is not from TH-cam and that link field only accepts the TH-cam link?
yes, for sure that's why you should look into hosting your videos somewhere else like wistia or cloudinary and serving them to users like that instead of hosting them in your media library
@@andreaegli oh thanks for reply, the hosting isn't an issue, since it's only 8 350kb videos. I'm talking about rendering them on device. I wonder how would it look like on low end phones. Actually I will test it.
for the mobile when we scroll over the area of the container it would hide de element in front and play the video. I think for the mobile we can add the same as hover but for the :active state, then when the user clicks on it , it plays.
do you have any tips on managing many videos displayed in a page so that it loads fast and looks HD and as pretty without any players as your example? without embedding it (to prevent showing watermark of youtube/video)
Great video Andrea, once again! You can see the great feedback on the comments... so good that they didn't even realized that the link for the code is for another tutorial haha :) You explain it really good on the video so i followed your steps and it worked. thanks again and keep it up.
Hola, Que pasa con los recursos del sitio web, su optimizacion? Si te fijas los videos se estarian reproduciendo detras de una imagen y el usuario talvez experimentaria un sitio web lento al momento de cargar, seria genial disparar el play con el hover mediante js y asi no consumir tantos recursos. Me gusta mucho tu canal, Saludos
Hola! I would serve the videos through a CDN, which would help with optimization but definitely worth a try to do that with JS on hover. Thank you so much!😁
1:17 You can reset container padding to 0 globally via site settings > layout > container padding That might be an interesting effect to use in a dynamic loopgrid if you could find a way to make the video only play on hover. So when you hover the image fades away and the video starts playing from the beginning. When you hover out the image fades in while the video stops and rewinds back to the start. When you hover again, the video plays from the beginning and so on... I think you can do this, but only with selfhosted video's. You could simulate a cinemagraph effect.
Yeah, I should have said that in the video for sure 😉 Hehehe, that sounds like a cool effect. For sure this will require some JS but I can tackle it at some point in the near future 😎
@@andreaegli You can only do this with selfhosted video's though, I don't think you can make youtube video's play on hover and stop and rewind on hovering out. Here is an example. It plays on hover, but it pauses on hovering out. Not the same thing, but quite nice. th-cam.com/video/dx4oAxaR1As/w-d-xo.html
I've been wanting to create this effect for ages but for whatever reason never managed to let me know if you found this usesful!
Hi @andreaegli, many thanks for the video! Do you have an idea, how can I keep all of these video containers in the same ratio (same height, not only width as it is now), despite the difference in the lenght of the heading & text that I've included in them?
Reactie van @eddieho7: This effect can be achieved with just 1 container. just set the video as background. image as background overlay with opacity 1. then go to hover and set the opacity to 0 (you can set your transition speed also under hover) and it will be the same effect. or am I missing something?
first of all: I love your channel.
This effect can be achieved with just 1 container. just set the video as background. image as background overlay with opacity 1. then go to hover and set the opacity to 0 (you can set your transition speed also under hover) and it will be the same effect. or am I missing something?
Thank you, Eddie! Talk about making things more convoluted than they should be. You are absolutely right, can definitely be done like you described actually😅 what I would change though is the hover effect, add a CSS linear transition which will make the hover effect be the same speed from start to end
I tried that but It doesn't work here. It works in the editor but not on frontend.
Somehow the background image fades away from the start.
It looks like the background video always got priority.
@edewillswissen thankyou and especially @andreagli
I don't understood how u used a link that doesn't were from youtube, can u help me with this? 😟
I don't understand what you're asking, can you explain?
@@andreaegli Thanks for answering me! You are incredible!
I realized that you put a video link for the video to appear in the background of the container. But it didn't seem to be a TH-cam link. If it is not a TH-cam link, how did you get a link that is not from TH-cam and that link field only accepts the TH-cam link?
Thank you for the tip !
😉welcome!
Hey, if i have 8 elements like this isn't it too heavy to render all 8 videos at same time?
yes, for sure that's why you should look into hosting your videos somewhere else like wistia or cloudinary and serving them to users like that instead of hosting them in your media library
@@andreaegli oh thanks for reply, the hosting isn't an issue, since it's only 8 350kb videos. I'm talking about rendering them on device. I wonder how would it look like on low end phones. Actually I will test it.
Where are from?
Germany
for the mobile when we scroll over the area of the container it would hide de element in front and play the video. I think for the mobile we can add the same as hover but for the :active state, then when the user clicks on it , it plays.
that could be a solution, yes
do you have any tips on managing many videos displayed in a page so that it loads fast and looks HD and as pretty without any players as your example? without embedding it (to prevent showing watermark of youtube/video)
I always advise using a CDN platform such as Cloudinary
Great video Andrea, once again!
You can see the great feedback on the comments...
so good that they didn't even realized that the link for the code is for another tutorial haha :)
You explain it really good on the video so i followed your steps and it worked. thanks again and keep it up.
Hey Kani! Thank you so much for the kind words. Oops, corrected now, thanks for the heads-up😉
Hola, Que pasa con los recursos del sitio web, su optimizacion?
Si te fijas los videos se estarian reproduciendo detras de una imagen y el usuario talvez experimentaria un sitio web lento al momento de cargar, seria genial disparar el play con el hover mediante js y asi no consumir tantos recursos.
Me gusta mucho tu canal,
Saludos
Hola! I would serve the videos through a CDN, which would help with optimization but definitely worth a try to do that with JS on hover.
Thank you so much!😁
Amazing 😍
Thanks 🤗
It's very cool and nice and you're doing too good...! Thanks :))
thank you!!!!!🤩
1:17 You can reset container padding to 0 globally via site settings > layout > container padding
That might be an interesting effect to use in a dynamic loopgrid if you could find a way to make the video only play on hover.
So when you hover the image fades away and the video starts playing from the beginning.
When you hover out the image fades in while the video stops and rewinds back to the start.
When you hover again, the video plays from the beginning and so on...
I think you can do this, but only with selfhosted video's.
You could simulate a cinemagraph effect.
Yeah, I should have said that in the video for sure 😉
Hehehe, that sounds like a cool effect. For sure this will require some JS but I can tackle it at some point in the near future 😎
@@andreaegli You can only do this with selfhosted video's though, I don't think you can make youtube video's play on hover and stop and rewind on hovering out.
Here is an example. It plays on hover, but it pauses on hovering out. Not the same thing, but quite nice.
th-cam.com/video/dx4oAxaR1As/w-d-xo.html
@@franktielemans6624 absolutly!
I made a video like this as well th-cam.com/video/bAQQeBEUqpU/w-d-xo.html
Very informative helpful content this channel needs to be at top when it comes to elementor
hahahaha, I agree! One day, with the help of all of you😁
Thank you so much, you are a life savior
You're welcome!🤩
Could this be streamlined by the new loops feature?
TOOOOOOOOP !!!!! SHOWWWW
interesting!
☺️
Nice ❤
Thanks 🔥