SHOW VIDEO ON HOVER - Elementor Wordpress Tutorial Flex Container

[@andreaegli]

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!

[@hardkorkochanie]

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?

[@kani7345]

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.

[@andreaegli]

Hey Kani! Thank you so much for the kind words. Oops, corrected now, thanks for the heads-up😉

[@MuhammadZaid-y7z]

It's very cool and nice and you're doing too good...! Thanks :))

[@andreaegli]

thank you!!!!!🤩

[@jordandoume9813]

Thank you for the tip !

[@andreaegli]

😉welcome!

[@gabrielvssouza]

Thank you so much, you are a life savior

[@andreaegli]

You're welcome!🤩

[@Aman_yadav1419]

Amazing 😍

[@andreaegli]

Thanks 🤗

[@NaveedAhd]

Very informative helpful content this channel needs to be at top when it comes to elementor

[@andreaegli]

hahahaha, I agree! One day, with the help of all of you😁

[@edewillswissen]

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?

[@andreaegli]

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

[@franktielemans6624]

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.

[@j4jazib940]

@edewillswissen thankyou and especially @andreagli

[@franktielemans6624]

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.

[@andreaegli]

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 😎

[@franktielemans6624]

​@@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. kzbin.info/www/bejne/mqmXoHSulrdkd9U

[@andreaegli]

@@franktielemans6624 absolutly! I made a video like this as well kzbin.info/www/bejne/mHK0gph4erqkprc

[@jean-mahmoud_du_tacobel]

Nice ❤

[@andreaegli]

Thanks 🔥

[@teuccio73]

interesting!

[@andreaegli]

☺️

[@Jeroenbdesign]

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?

[@teveoenlaweb]

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

[@andreaegli]

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!😁

[@payzievrustam]

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)

[@andreaegli]

I always advise using a CDN platform such as Cloudinary

[@estefanoaquino]

TOOOOOOOOP !!!!! SHOWWWW

[@patrickkayser]

Could this be streamlined by the new loops feature?

[@Yannick.D]

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.

[@andreaegli]

that could be a solution, yes

[@Qamil323]

Hey, if i have 8 elements like this isn't it too heavy to render all 8 videos at same time?

[@andreaegli]

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

[@Qamil323]

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

[@tiagoalmeida4738]

I don't understood how u used a link that doesn't were from youtube, can u help me with this? 😟

[@andreaegli]

I don't understand what you're asking, can you explain?

[@tiagoalmeida4738]

@@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 KZbin link. If it is not a KZbin link, how did you get a link that is not from KZbin and that link field only accepts the KZbin link?

[@decrea8439]

Where are from?

[@andreaegli]

Germany