Basic video gallery – div and border styling (Youtube)

These examples show how to style both the video thumbnail borders and the background of a gallery.

id=foodwishes, w=350, num=4, type=channel, square=false, liststyle=false, q=, rounded=0, showsearch=true, showpaging=true, showdate=true, filmstyle=false, playlists=false, borderwidth=7, bordercolor=fbe, 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=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=”color:#606;background:#fff5f5;border-radius:7px;padding-left:7px;padding-right:7px;padding-top:7px;”>
[videogallery id=foodwishes num=4 borderwidth=7 bordercolor=fbe]
</div>

Example 2

id=outdoorresearch, w=350, num=4, type=channel, square=false, liststyle=false, q=, rounded=0, showsearch=true, showpaging=true, showdate=true, filmstyle=false, playlists=false, borderwidth=7, bordercolor=fea, 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=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=”padding-left:11px;padding-right:11px;color:#031;background:#f5fff5;border-radius:15px;padding-top:7px;border:2px solid #7d7;”>
[videogallery id=foodwishes num=4 borderwidth=7 bordercolor=fea]
</div>

In this example, we demonstrate how a Youtube video gallery can be easily styled with CSS, both the containing div and each video poster thumbnail border.