Classic style video gallery (CSS video details styling)

id=xfitdaily, w=350, num=4, type=channel, square=false, liststyle=false, q=, rounded=0, showsearch=true, showpaging=true, showdate=true, filmstyle=false, playlists=false, borderwidth=6, bordercolor=fff, start=, stop=, showshadows=true, brochurestyle=false, 123=false, columns=2, width=auto, color=, dark=false, bgcolor=, plstyle=, channelids=, showdescriptions=, videowall=false, playicons=true, hover=false, classic=true, 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=, 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=xfitdaily num=4 classic=true hideplayer=true]

The look of this gallery is transformed from the default style, seen in the previous example, by the following CSS :

<style>
.QQS {
  background:black; margin-top:0; margin-bottom:8px; margin-right:0px; border-radius:0px; min-height:35px; display:block; padding-top:3px; padding-left:6px; padding-bottom:2px; color:#eee;
}
.QQS2 {
  font-family:Segoe UI,Verdana,Arial; color:#fcc; display:block; padding-bottom:4px;
}
.CCCH .EDE {
background: #000;
}
.MMKE2 {
color: #eee;
}
</style>

See styles.css for the default styling and classes; or use your browser’s element inspector (developer tools).

In this example, we demonstrate how to apply styling to the video details with CSS; in this case, tying the video poster thumbnail and video details together into a unified visual block.