Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1305890

    Is it possible to hide Vimeo (video player) controls when the page loads and become visible when hovering over the video.?

    Here is a site that has this implemented: https://www.holyspiritspeaks.org/testimonies-categories/overcomers/ – scroll down and you’ll see images with time frame – hover over those images and that’s what I would like to duplicate – if possible. Thank you.

    • This topic was modified 3 years, 6 months ago by Jules.
    #1306050

    Hey JuLeS-NCfC-2021,

    Thank you for the inquiry.

    Looks like you have replaced vimeo with youtube, and now the play button displays on hover. Do you still require help with this?

    Best regards,
    Ismael

    #1306078

    Hi @Ismael

    Thank you for your response. No, the problem is not resolved. The url I provided is the functionality I’m trying to replicate.

    Here is the url to my page where I would like to hide the video player controls and have them displayed when you hover over.

    Any help would be greatly appreciated.

    #1306105

    Enfold Support,
    I’ve been able to remove the player controls, which leave a static “play button”. See the videos from my site here: https://newcreationsforchrist.com/about/

    As you can see, the “play button” covers up some of the thumbnails. It’s better than displaying all of the player controls, however, I want to add a play button where it only appears on mouseover of the thumbnail. Is this possible with WordPress (i.e. Plug-in, etc.) / Enfold?

    Here is another site that implemented this feature: https://www.holyspiritspeaks.org/testimonies-categories/overcomers/ – scroll down and you’ll see images with a time frame – mouseover those images and you’ll see the play button display. This is what I was hoping to duplicate on my site.

    Thank you for your help.

    #1306193

    Is there custom CSS that I can apply within Enfold to achieve hiding the video player controls and only have them display when someone hovers / mouseover the video?

    I found this post and was hoping something like this might be possible with Enfold … see screen shot
    F89-F5636-F280-4-CA7-AFEA-3-A054226682-C

    Thank you

    #1306305

    Hi,

    Thank you for following up.

    This css code should hide the controls initially and only display them on hover.

    #player .vp-controls {
        opacity: 0;
    }
    
    #player:hover .vp-controls {
        opacity: 1;
    }
    

    Best regards,
    Ismael

    #1306454

    @Ismael,

    Thank you for your response. I added your suggested CSS code, but I’m still seeing the Player Controls initially.
    See here: https://newcreationsforchrist.com/about/

    I added your suggested CSS code under: Enfold Theme Options > General Styling > Quick CSS

    Please let me know what else I can try. I realize this is a little challenging and I truly appreciate your assistance.

    Best regards,
    Julio

    #1306610

    Hi,

    It might not be working yet because the css files are compressed. Please toggle or temporarily disable the Enfold > Performance > File Compression settings, and make sure to purge the cache afterwards.

    Thank you for your patience.

    Best regards,
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.