Horizontal scrolling video gallery (filmstrip style)

id=foodwishes, w=350, num=10, type=channel, square=false, liststyle=false, q=, rounded=0, showsearch=false, showpaging=false, showdate=true, filmstyle=false, playlists=false, borderwidth=0, bordercolor=fff, start=, stop=, showshadows=true, brochurestyle=false, 123=false, columns=10, width=auto, color=, dark=false, bgcolor=, plstyle=, channelids=, showdescriptions=, videowall=true, 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=, orderby=, hideplayer=true, sintro=false, startat=, autoplay=false, transition=scroll, duration=800, interval=7500, smallthumbs=false, nothumbs=false, loop=false, shuffle=false

The code :

<div style=”overflow-x:scroll;”>
  <div style=”width:3220px;padding-left:4px;padding-bottom:9px;padding-top:4px;”>
    [videogallery id=foodwishes videowall=true borderwidth=0 columns=10 num=10 showsearch=false showpaging=false]
  </div>
</div>

The CSS :

<style>
.HSC {
  background:black; border-top:8px dotted white; border-bottom:8px dotted white; outline:3px solid black;
}
</style>

We have set the number of columns equal to the number of videos. Each video thumbnail width will be equal to the width of the scrolled div divided by the number of videos.

The difference from the previous example is videowall=true in the ShortCode. Each video title is shown in the tooltip.

In this example, we style a video gallery like a celluloid film-strip with CSS.