Code

Media Hovers

Media Hovers

Get Motion to your images. Media Hovers is a responsive HTML5 plugin which plays audio and video on hover. It can be applied to any element. Just specify thumbnail and audio or video file and turn it into your hover. Media Hovers also supports lightbox mode where images and videos can be viewed in larger mode. Support for Youtube and Vimeo video is included.

Features and options:

  • Supported content sources:
    • HTML5 video and audio support
    • Youtube content:
      • Playlist
      • Channel / Username
      • Video query (search videos by keyword)
    • Vimeo content:
      • User album
      • Group
      • Channel
      • Video query (search videos by keyword)
  • IOS and Android support
  • Social sharing support
  • Lightbox support
  • Many ready to go demos included in the package
  • Lightweight code


keywords: youtube grid, vimeo wall, video hover, audio, facebook, twitter, share, lightbox gallery



Notes:

1. This is a jQuery plugin. If you would like a Wordpress version go here: http://codecanyon.net/item/media-hovers-wordpress-plugin/20803562

2. Since Chrome and Safari autoplay restrictions, it may not be possible to play on hover until user interacts with the page (click / scroll).



Updates / Changelog

UPDATE 2.03 [2.2.2019]

  • [UPDATE] some code improvements and fixes

UPDATE 2.01 [22.1.2019]

  • [ADD] option to use self hosted videos without thumbnail and define video start frame to show

UPDATE 2.0 [19.1.2019]

  • [ADD] media hovers now available with Youtube and Vimeo videos
  • [UPDATE] new layouts and styles
  • [UPDATE] general improvements (easier to style hover items with CSS and add your own HTML, lightbox compatibility with other lightboxes in the page, etc..)

UPDATE 1.45 [7.11.2018]

  • [ADD] option to apply link to whole image thumbnail instead of just icon
  • [ADD] image hover option (display another image on hover)
  • [UPDATE] use tooltips option
  • [REMOVE] audio slideshow

UPDATE 1.37 [28.10.2018]

  • [UPDATE] auto sort break points from low to high

UPDATE 1.36 [25.10.2018]

  • [UPDATE] update to font awesome

UPDATE 1.35 [17.10.2018]

  • [ADD] auto grid calculation (calculate rows, columns and gutters)

UPDATE 1.3 [13.10.2018]

  • [ADD] option to disable hover functionality on mobile
  • [ADD] option to apply lightbox to whole image thumbnail instead of just icon

UPDATE 1.25 [28.9.2018]

  • [UPDATE] small code improvements

VERSION 1.21 [6.6.2018]

 - [UPDATE] added muted autoplay for videos

VERSION 1.2 [14.4.2018]

 - [ADD] added "image" type will can display simple thumb and any content in lightbox
 - [UPDATE] lightbox can now contain Youtube, Vimeo, or any custom iframe as well
 - [UPDATE] some mobile playback improvements

VERSION 1.16 [9.4.2018]

 - [UPDATE] some code improvements

VERSION 1.15 [5.4.2018]

 - [UPDATE] update icons to font awesome 5

VERSION 1.13 [11.10.2017]

 - [UPDATE] useShare & useLightbox settings removed, they are automatically detected now with data-large & data-share attributes

VERSION 1.1 [3.10.2017]

 - [CHANGE] data-audio, data-video attributes changed into data-path
 - [FIX] small bugs and code improvements

VERSION 1.0 [25.09.2017]

 - first release
by
by
by
by
by
by