Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 11, 2014 at 11:25 pm #367016
    ruthnapal

    Hi guys – I’m making a recipe website, with video demonstrations for the food. The site is currently being developed locally.

    I was wondering with Enfold if there’s a way to have an image thumbnail with some sort of translucent play circle symbol when hovering the image? I know there’s an option to place a YouTube video directly on the page, but it looks a little ugly with all of YouTube’s clutter over the video icon. It would be great if there was a lightbox integration for this – so when you click on the icon it activates a fullscreen lightbox autoplaying the video. Maybe I’m getting a little away with myself here hehe.

    I was hoping for something like this http://www.midwesternmac.com/sites/midwesternmac.com/files/video-play-button-example-resized.png

    Any ideas?

    Thanks a lot! :-)

    Andreas

    December 12, 2014 at 5:13 pm #367337
    Elliott

    Hi atlantio!

    You can do this with our image shortcode. Just set the link to manual and then insert a URL to your video and it will display in a magnific popup when clicked on. When you use a video for the URL it will also have a play icon displayed on hover.

    Regards,
    Elliott

    December 15, 2014 at 1:58 pm #368259
    ruthnapal

    Hello Elliott,

    Thanks for point this one out – works a charm.

    Thank you for your help :-)

    Andreas

    December 15, 2014 at 4:27 pm #368332
    ruthnapal

    One final question if you don’t mind, is there anyway to make the white playhead in the centre of the overlay symbol larger, to make it a bit more obvious that it’s a play symbol?

    Here’s what it looks like at the moment: https://www.dropbox.com/s/t9c0k4y4ebzcgil/Small%20Playhead%20Icon.png?dl=0

    Thanks! :-)

    December 15, 2014 at 8:31 pm #368529
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .image-overlay-inside:before {
font-size: 30px!important;
}

    Cheers!
    Yigit

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