Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Video Hovers

  • Ocean Iceberg
  • Discover Sailing
  • Travel Celebration
  • Downtown Train

Play HTML5 video inside your grid items on mouse hover

1. Create/setup a Grid to play HTML5 Video inside the Grid Items,
similar to the Media Taft demo.

media-taft

2. Add the following CSS to the plugin's CSS Editor

Replace the first line’s class name with your grid element’s “play button” class.  The custom CSS will then hide this button on desktop devices, and show it normally on mobile devices.

  • Quick Note about Mobile:
    Since "mouse hovers" don't really translate well for mobile devices, the hover functionality will only be applied to desktop computers. Then for mobile devices, the skin's "play button" will activate the video instead.

3. Add the following JavaScript to your grid's API/JavaScript section

Adjust the “User Settings” toward the top to enable/disable options such as looping and user-controls.  And also choose to always play the video from the start on mouse hover with the “rewindOnHover” option.