Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 15, 2021 at 7:33 pm #1305890
    Jules

    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, 5 months ago by Jules.
    June 16, 2021 at 3:22 pm #1306050
    Ismael

    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

    June 16, 2021 at 5:19 pm #1306078
    Jules

    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.

    About

    Any help would be greatly appreciated.

    June 17, 2021 at 4:19 am #1306105
    Jules

    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.

    June 17, 2021 at 2:52 pm #1306193
    Jules

    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

    June 18, 2021 at 8:56 am #1306305
    Ismael

    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

    June 19, 2021 at 12:49 am #1306454
    Jules

    @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

    June 20, 2021 at 9:47 pm #1306610
    Ismael

    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

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