WordPress.org

Forums

YouTube Channel
Adding graphics to the player (4 posts)

  1. SmedleyButer
    Member
    Posted 10 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/

  2. urkekg
    Member
    Plugin Author

    Posted 9 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;
    }
  3. SmedleyButer
    Member
    Posted 9 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!

  4. urkekg
    Member
    Plugin Author

    Posted 9 months ago #

    In :after pseudo class use margin-top: -5px (orbother precise negative top margin)

    Cheers

Reply

You must log in to post.

About this Plugin

About this Topic