Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. HTML5 video as a mouseover in the project thumbnail

HTML5 video as a mouseover in the project thumbnail

Scheduled Pinned Locked Moved General Discussion
11 Posts 6 Posters 615 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    StudioBureau
    wrote on last edited by StudioBureau
    #1

    Hi @arminunruh ,

    I was wondering if it also possible to create a project thumbnail with an HTML5 video as a mouseover? So if you go over the project thumbnail (that is just a JPG) the mouseover is a HTML5 video that starts playing in this thumbnail.

    Thanks in advance!

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Dear @StudioBureau
      something like this is already built in.
      Have a look in the CUSTOMIZER:

      0_1573380867749_Bildschirmfoto 2019-11-10 um 11.14.02.png

      Best!

      Marius

      www.mariusjopen.world

      S 1 Reply Last reply
      0
      • mariusjopenM mariusjopen

        Dear @StudioBureau
        something like this is already built in.
        Have a look in the CUSTOMIZER:

        0_1573380867749_Bildschirmfoto 2019-11-10 um 11.14.02.png

        Best!

        Marius

        S Offline
        S Offline
        StudioBureau
        wrote on last edited by StudioBureau
        #3

        @mariusjopen
        Thanks for your reply! Do you mean the option 'Play on mouseover'?
        Because I meant something different. That there is a photo as a thumbnail and the mouse over is a HTML5 video. You can have have a look on https://studiobureau.nl/work-2 and go over the 'Pop op de Kaap' project thumbnail. I now fixit it with a .GIF but it would be great to do it with HTML5 video.

        Looking forward to your repley!

        1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          Dear @StudioBureau
          ok, yes. This option does not yet exist then. I will write it down for future updates.

          Best!

          Marius

          www.mariusjopen.world

          S 1 Reply Last reply
          0
          • mariusjopenM mariusjopen

            Dear @StudioBureau
            ok, yes. This option does not yet exist then. I will write it down for future updates.

            Best!

            Marius

            S Offline
            S Offline
            StudioBureau
            wrote on last edited by StudioBureau
            #5

            @mariusjopen
            Ok, that would be great! Thanks for your quick reply.

            1 Reply Last reply
            0
            • T Offline
              T Offline
              Tammischwammi
              wrote on last edited by
              #6

              Hi, I was wondering if there is already a solution to this 'problem'. I would like to achieve the same thing – jpg as thumbnail, video on mouseover.

              Thanks!

              1 Reply Last reply
              1
              • I Offline
                I Offline
                ilgi
                wrote on last edited by
                #7

                Hi, I see the custom site below can do that already.
                https://erynnlamont.com/

                Seems the author managed to add image thumbnail after the video preload. Unfortunately, I'm not able to replicate this. Could anyone shed some light on the workaround? xx

                1 Reply Last reply
                0
                • arminunruhA Offline
                  arminunruhA Offline
                  arminunruh
                  Global Moderator
                  wrote on last edited by
                  #8

                  Yea!

                  So put this css into lay options -> custom css & html -> custom css

                  body.thumb-mo-image-has-transition .thumb.has-mouseover-img img.mo_thumb,
                  body.thumb-mo-image-no-transition .thumb.has-mouseover-img img.mo_thumb{
                      opacity: 1!important;
                      transition: opacity 300ms cubic-bezier(0.39, 0.58, 0.57, 1);
                  }
                  
                  body.no-touchdevice.thumb-mo-image-has-transition .thumb.has-mouseover-img:hover .ph img.mo_thumb,
                  body.no-touchdevice.thumb-mo-image-no-transition .thumb.has-mouseover-img:hover .ph img.mo_thumb{
                      opacity: 0!important;
                  }
                  

                  Activate these two options in Lay Options:

                  Screenshot 2024-01-06 at 18.28.51.png

                  And when you edit your projects, make sure to fill out the mouseover image and the mouseover video:

                  Screenshot 2024-01-06 at 18.29.32.png

                  the mouseover image will be what is shown first

                  you also want to go to customize -> project thumbnails -> project thumbnail mouseover and use these settings:

                  Screenshot 2024-01-06 at 18.31.17.png

                  1 Reply Last reply
                  1
                  • S Offline
                    S Offline
                    superflai
                    wrote on last edited by
                    #9

                    Hello!
                    We were looking into solving the same issue (having video thumbnails on mouseover only), and @arminunruh's solution works. However, it seems like now it is only possible to have videos as mouseover images, instead of static images, but we would like to have sometimes a video, sometimes a static image, depending on the project. Now the thumbnails of all projects that have a static mouseover image become white on mouse hovering: https://what-the.studio/
                    Is there a solution in order to have both options, and be able to choose between video or static image as mouseover?

                    1 Reply Last reply
                    0
                    • arminunruhA Offline
                      arminunruhA Offline
                      arminunruh
                      Global Moderator
                      wrote on last edited by
                      #10

                      yes please use this code:
                      http://laythemeforum.com:4567/topic/9038/start-gif-video-mouse-hover-in-project-thumbnail/5

                      it only applies to thumbnails that have a video
                      does that work?

                      1 Reply Last reply
                      0
                      • arminunruhA Offline
                        arminunruhA Offline
                        arminunruh
                        Global Moderator
                        wrote on last edited by
                        #11

                        and when you use this JS:
                        http://laythemeforum.com:4567/topic/9038/start-gif-video-mouse-hover-in-project-thumbnail/6

                        then the videos always start playing from the beginning

                        i might add all of this as a feature one day so u dont have to use custom code for this

                        1 Reply Last reply
                        0
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        I also code custom websites or custom Lay features.
                        šŸ’æ Email me here: šŸ’æ
                        info@laytheme.com

                        Before you post:
                        1. When using a WordPress Cache plugin, disable it or clear your cache.
                        2. Update Lay Theme and all Lay Theme Addons
                        3. Disable all Plugins
                        4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                        This often solves issues you might run into

                        When you post:
                        1. Post a link to where the problem is
                        2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                        3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                        Online Users
                        P
                        pagagne
                        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                        laytheme.com
                        • Login

                        • Don't have an account? Register

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Search