Adding graphics to the player

  • SmedleyButer

    (@smedleybuter)


    11 years, 11 months ago

    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 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/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Aleksandar Urošević

    (@urkekg)

    11 years, 11 months ago

    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

    (@smedleybuter)

    11 years, 11 months ago

    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ć

    (@urkekg)

    11 years, 11 months ago

    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.

Tags