Title: Adding graphics to the player
Last modified: August 21, 2016

---

# Adding graphics to the player

 *  [SmedleyButer](https://wordpress.org/support/users/smedleybuter/)
 * (@smedleybuter)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/adding-graphics-to-the-player/)
 * I’m trying to add an image above and below the video player to create a Jukebox
   effect. I’d like the graphics to be part of the player so it can be easily moved.
 * My Code and CSS skills are still in their infancy but growing. If I could see
   an example of how this might be accomplished it would go a long way toward solving
   not only this problem but also in advancing my understanding in a way that can
   be applied to other issues as well.
 *  [My site](http://www.twocentreport.com/) has both the player and Jukebox to 
   be “sliced” and “skinned” at the bottom of the page. I’m definitely not asking
   for anyone to do this for me just a little nudge in the right direction so I 
   can get it done. 🙂
 * [https://wordpress.org/plugins/youtube-channel/](https://wordpress.org/plugins/youtube-channel/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Aleksandar Urošević](https://wordpress.org/support/users/urkekg/)
 * (@urkekg)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/adding-graphics-to-the-player/#post-4980681)
 * You can always use :before and :after pseudo classes to achieve what you wish.
 * Example:
 *     ```
       div.ytc_video_container:before {
       display: block;
       height: 20px;
       content: " ";
       background: url(path/to/jukebox_top.png) no-repeat center bottom;
       }
       div.ytc_video_container:after {
       display: block;
       height: 20px;
       content: " ";
       background: url(path/to/jukebox_bottom.png) no-repeat center top;
       }
       ```
   
 *  Thread Starter [SmedleyButer](https://wordpress.org/support/users/smedleybuter/)
 * (@smedleybuter)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/adding-graphics-to-the-player/#post-4980685)
 * Thanks so much I’ll give this a shot! I read this last night and have been reading
   up on pseudo-classes, my knowledge of CSS still isn’t that broad, I can get things
   close to as i like them now in Firebug but still have a little further to go 
   up the learning curve.
 *  This example is a great help! I could never get rid of that last bit of white
   space no matter what I tried 🙂 I’ll be sure and let you know how it works out
   and marked this resolved after I get it in the proper place!
 *  Plugin Author [Aleksandar Urošević](https://wordpress.org/support/users/urkekg/)
 * (@urkekg)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/adding-graphics-to-the-player/#post-4980686)
 * In :after pseudo class use margin-top: -5px (orbother precise negative top margin)
 * Cheers

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Adding graphics to the player’ is closed to new replies.

 * ![](https://ps.w.org/youtube-channel/assets/icon.svg?rev=2845692)
 * [My YouTube Channel](https://wordpress.org/plugins/youtube-channel/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/youtube-channel/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/youtube-channel/)
 * [Active Topics](https://wordpress.org/support/plugin/youtube-channel/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/youtube-channel/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/youtube-channel/reviews/)

## Tags

 * [images](https://wordpress.org/support/topic-tag/images/)

 * 3 replies
 * 2 participants
 * Last reply from: [Aleksandar Urošević](https://wordpress.org/support/users/urkekg/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/adding-graphics-to-the-player/#post-4980686)
 * Status: not a support question