PLAY and PAUSE VIDEO ON HOVER - Elementor Wordpress Tutorial Flex Container

Поделиться
HTML-код
  • Опубликовано: 12 сен 2024

Комментарии • 41

  • @andreaegli
    @andreaegli  Год назад +4

    Have you enjoyed the seamless video hover play experience?🤓

  • @nk-WebWander
    @nk-WebWander Месяц назад

    Hi Andrea. Excellent harmony of code and taste, as always. Could you implement a task like this: playing a video depending on the page scroll? A small video that plays forward and backward depending on the scroll?

  • @payzievrustam
    @payzievrustam Год назад +1

    I got your channel recommended by youtube today and its a pure gold! The amount of tutorials, cool ideas and quality of your videos here is crazy! RUclips should recommend your channel more! Subbed to you right away! Keep up the amazing knowledge sharing youre doing here!

    • @andreaegli
      @andreaegli  Год назад +1

      Thank you so much, Payziev! Finally youtube is doing it's magic🤩 but yeah, they need to do an even better job. Will do!

  • @SaeedMasri
    @SaeedMasri Год назад +1

    Thanks Andrea, I don't see myself using the hover to play effect,
    but the locomotive scroll, oh lord! I would definitely use that!

    • @andreaegli
      @andreaegli  Год назад +1

      Hey, never say never 😁 ohemgee! The locomotive is my latest obsession 🤓

  • @lyndeldavis3320
    @lyndeldavis3320 Месяц назад +1

    This is so cool, thank you. I do have a question, could you have an image placeholder or a thumbnail to display first and when you hover the video plays? Also the videos you've selected, do they have sound on them, and does the hover effect disables the sound? Thanks again, great video.

    • @andreaegli
      @andreaegli  Месяц назад +1

      Hey! Thank you, yes. No and it could. It’s all about some extra code, I might update it at some point to cover all the things you have mentioned. In short, it is possible 😉

  • @clementyo4526
    @clementyo4526 Год назад +1

    Lovely the video as always, Andrea. Just now I shared your video to someone in the community that is asking about video on hover. I am looking forward your next update about on touch screen video function on responsive mode (mobile/tablet). Kudos ^^

    • @andreaegli
      @andreaegli  Год назад +1

      Thank you very much, Clement! Will have to come back to this with an update for sure, need to find the time to experiment 😄

    • @adied7725
      @adied7725 Год назад

      I'm really interested to in responsive mode /mobile as nearly every user users mobile now, it's not only useful in some cases it becomes imperative for mobile users..., please please update the video If you find out how to do in all scenarios... Thanks for a great video.

  • @mauricio5375
    @mauricio5375 4 месяца назад +1

    Hi! Thanks for the video!
    How did you get it to have rounded corners? thanks!

    • @andreaegli
      @andreaegli  4 месяца назад +1

      You are very welcome! Add border-radius: 10px; Adjust as needed ;)

  • @webdevluc
    @webdevluc Год назад +1

    Nice super useful, great tutorial

  • @MohamedIbrahim-on8fx
    @MohamedIbrahim-on8fx 4 месяца назад

    Working Perfectly

  • @thewebstylist
    @thewebstylist Год назад +1

    Luv It! 🎉

    • @andreaegli
      @andreaegli  Год назад

      Thank you! Did you manage to make the custom cursor (mouse change on hover) work btw?

  • @Upbeat_Impact
    @Upbeat_Impact Год назад +1

    Hi Andrea, this was cool. I want to know, cani do this in Google Drive. I have some videos on Drive, and i want my viewers to see their contents when they hover mouse on them.

    • @andreaegli
      @andreaegli  Год назад +1

      Hey, Kulpreet! Thank you! I don’t think that would work. The videos need to be in the database of Wordpress, in the media library in order to be able to access them on the frontend. Just bring them in your media library

  • @noelfromgen2546
    @noelfromgen2546 Год назад +1

    Great video like always. My only concern using it is that it will slow down the website dramatically. But anyway great tool to have this option inside our arsenal.

    • @andreaegli
      @andreaegli  Год назад +1

      Thank you, Noel! Not at all, it is much lighter than let's say the Elementor video widget. If you inspect the code of a video widget, you will see that it is wrapped in a few 'layers' of divs. Plus, with this code snippet, you have much more control over how you style the video😉

  • @yourmirrorworld
    @yourmirrorworld 7 месяцев назад

    amazing sister. i learned very interesting things from your videos. In this video i cant find the code that you used . i cant understand some basic things like the wrap option in elementor and what is its use , in additional optioins html tag, in advance option (attributes). can you please make video on these basics of the elementor because your explaining or talking way is very attractive.

  • @shesapiens
    @shesapiens 5 месяцев назад

    Thanks amazing video! Did you figure out how to do the tablet & mobile version?

  • @ludovicverbeeck
    @ludovicverbeeck 10 месяцев назад

    Love you videos! you rock!
    Any chances to disable this on mobile only? my videos open a popup on click and on mobile when i tap - it stops the video but i have to tap again to open the popup... Thanks!

  • @yourmirrorworld
    @yourmirrorworld 7 месяцев назад

    i saw many videos of css animations but i want to know that from where you get these css code for these animations. is there any website are you make these css animatios yourself i mean that are you a programmer?

  • @deividasbilys3809
    @deividasbilys3809 Год назад +2

    Hello, it is possible to insert photo in elementor (widget or container bg) and have video play when I hover that photo ?

    • @andreaegli
      @andreaegli  Год назад +3

      As a thumbnail? Yes, you just need a little bit more code. Would you like me to send it to you?

    • @lupescoto
      @lupescoto Год назад +1

      @@andreaegli i am interested in that code as wellb:) thank you

    • @lyndeldavis3320
      @lyndeldavis3320 Месяц назад

      Me too. Thank you.

  • @adied7725
    @adied7725 Год назад +1

    Hi, Great video... 😊 Do you have the code?, please, I don't find it in the description

    • @andreaegli
      @andreaegli  Год назад

      Thanks!😉 Not for this video but if you pause at 1:45, you can type out

    • @adied7725
      @adied7725 Год назад

      @@andreaegli ok thanks for the reply 😊

  • @madridrmm
    @madridrmm 10 месяцев назад

    Hi, thank you for your video. I have tried to use this for a website built with Elementor with containers (not with flexboxes) and it does not work. Is this code valid only for websites built with flexboxes? My problem is that the video doesn't even show on the preview of the website when I use the code. And a second question: if I have not defined that class for the edges, should I simply remove the part of the code that mentions the class? (I have tried that also but it does not work for me either). Thank you!

  • @marclegoux4615
    @marclegoux4615 Год назад +1

    Is there an update on this video fro mobile responsivenous? :D

    • @andreaegli
      @andreaegli  Год назад

      Not at this time (forgot about it☺️)

  • @KatyaGe
    @KatyaGe 10 месяцев назад

    Thank you, Andrea, it is very useful!! How could we achieve this effect for RUclips videos?

    • @andreaegli
      @andreaegli  10 месяцев назад +1

      You're very welcome! You can just add the link of the RUclips video in the src=" RUclips vid link"

    • @KatyaGe
      @KatyaGe 10 месяцев назад +1

      @@andreaegli Thanks a lot, I will try it.

  • @kcdesignkyle
    @kcdesignkyle 9 месяцев назад +1

    Where can I find the code, or do I have to type it out? I hate to have to type it out and not have it work.

    • @andreaegli
      @andreaegli  9 месяцев назад

      Hey Kyle! For this video, you will have to type it out but it works 😉