Compact layout video gallery – title on hover

In this example, we have, in the plugin options, set show date, hits and likes, duration and HD all to not display.

id=foodwishes, w=350, num=48, type=channel, square=false, liststyle=false, q=, rounded=0, showsearch=true, showpaging=true, showdate=false, filmstyle=false, playlists=false, borderwidth=0, bordercolor=fff, start=, stop=, showshadows=false, brochurestyle=false, 123=false, columns=3, width=auto, color=, dark=false, bgcolor=, plstyle=, channelids=, showdescriptions=, videowall=false, playicons=true, hover=false, classic=false, classiclist=false, carousel=false, slider=false, slider2=false, featured=, tag=, height=279, showtags=false, showvideotags=false, source=, styling=, newpage=false, playicons=true, animated=, titleonimage=, widescreen=, bw=, playlist=, style=border-radius:0px;, orderby=, hideplayer=true, sintro=false, startat=, autoplay=false, transition=scroll, duration=800, interval=7500, smallthumbs=false, nothumbs=false, loop=false, shuffle=false

The ShortCode :

[videogallery id=foodwishes num=48 borderwidth=0 showshadows=false columns=3]

The CSS :

<style>
.imad {
  margin-bottom:12px;
}
.TI {
  padding-left:5px; padding-right:3px;
}
span .TI2 {
  padding-bottom:0px;
}
.TfI {
  opacity:0.0; background:black; color:white; position:absolute; bottom:0px;
}
.TfI:hover {
  opacity:1.0;
}
.JJB {
  padding-top:0px;
}
.TeI {
  position:relative;
}
span.CL3 {
  font-size:13px;
}
.KKB, .KKC, .KKF6 {
  display:none;
}
.PKT {
  display: none;
}
.imad .QQF.TfI.SML.TdI {
  padding: 0 3px 0px !important;
}
body .videogallery span.CL3, body .videogallery span.CL3 .JVJ {
  padding-top: 0px !important;
}
.SML.JJB {
  padding-top: 0px !important;
}
</style>

This example video gallery demonstrates using CSS to move the video title over the video poster thumbnail and show it only on hover. Youtube, Vimeo and locally hosted videos.