Support » Plugin: WordPress Page Builder - Beaver Builder » How to make video in lightbox show arrow

  • Resolved dkneidhart

    (@dkneidhart)


    I really like this plugin easy to use and works great. I am having an issue with the videos. How do I get an arrow to show over the video thumbnail when you have “Show Video on Lightbox” set to yes for a self-hosted video? It only shows the arrow when you have “Show Video on Lightbox” set to no.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey @dkneidhart,

    Thanks for getting in touch!

    That’s not going to be possible out of the box. But you can add the snippet below to add one.

    .fl-video-poster {
      position: relative;
    }
    .fl-video-poster:before {
      content: '';
      display: block;
      position: absolute;
      height: 80px;
      width: 80px;
      top: 50%;
      left: 50%;
      margin-top: -40px;
      margin-left: -40px;
      background: url(http://localhost/wp-includes/js/mediaelement/mejs-controls.svg) no-repeat;
      background-position: 0 -39px;
    }

    You can place it under Tools > Layout CSS/JS > CSS on the page itself so it only gets added there. And you’ll need to replace http://localhost with your site’s URL. 🙂

    Ben

    • This reply was modified 2 months, 2 weeks ago by Ben Carlo.
    • This reply was modified 2 months, 2 weeks ago by Ben Carlo.
    Thread Starter dkneidhart

    (@dkneidhart)

    Thank you so much!! That worked great. Is there a way to do the slight change that occurs on hover for the videos that have “Show Video on Lightbox” set to no? I can’t tell if it’s a opacity change or what.

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey @dkneidhart,

    The snippet below should do it! 🙂

    .fl-video-poster:hover:before {
      background-position: -80px -39px;
    }

    Ben

    Thread Starter dkneidhart

    (@dkneidhart)

    Thank you again so much it worked perfectly!!

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    No worries at all, @dkneidhart!

    Have fun with BB! 🙂

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