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

How to make video in lightbox show arrow

  • Resolved dkneidhart

    (@dkneidhart)


    1 year, 3 months ago

    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)

    1 year, 3 months ago

    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 1 year, 3 months ago by Ben Carlo.
    • This reply was modified 1 year, 3 months ago by Ben Carlo.
    Thread Starter dkneidhart

    (@dkneidhart)

    1 year, 3 months ago

    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)

    1 year, 3 months ago

    Hey @dkneidhart,

    The snippet below should do it! 🙂

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

    Ben

    Thread Starter dkneidhart

    (@dkneidhart)

    1 year, 2 months ago

    Thank you again so much it worked perfectly!!

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    1 year, 2 months ago

    No worries at all, @dkneidhart!

    Have fun with BB! 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to make video in lightbox show arrow’ is closed to new replies.

Topic Tags

Views