Need a little CSS help, please. Thanks!

I have a Youtube video player on a page in my site, and it works fine, but I am trying to change the way it displays on the page, and need some help.

First, I have created a gray box with a <div> tag where the videos are supposed to appear…but I can not get the videos to display in the box, even though the call is in the <div> tag. Also, I really want the video and thumbnails, once they are in the box, to look the same as the way they do here (second one down…with the thumbnails): http://geckohub.com/jquery/youtubeplaylist/

If you can help me out, I would appreciate it!

My page: http://billboardfamily.com/videos/

Sorry but I’m not around much this weekend but I’ll try and have another look tomorrow - unless someone else wants to have a go first :).

It all depends on what we are allowed to change in the html. The setup at present is not conducive to an easy fix and you end up fighting the code. The basic layout you want is simple and a few lines of code but that’s not what we have to work with.

If the html code can’t be changed at all then it will be a matter of over-riding a lot of other things and if I remember correctly you even have some dynamic styles being applied to those thumbnails to space them out.

That did move things around, but it is still not that close. Now you see why I need some help on this one. Any other suggestions?

Thanks!

Hi,

Well this is a very rough idea but you would need some changes like this.


.tubepress_container {
[B]    float: left;[/B]
    margin-bottom: 2em;
    width: 100&#37;;
}

.tubepress_normal_embedded_wrapper {
    text-align: left;
    margin: auto;
[B]float:left;[/B]
}

.tubepress_embedded_title {
    font-weight: bold;
    font-size: larger;
    margin-bottom: .3em;
}

.tubepress_thumbnail_area {
   margin-top: 1em;[B]
 float:right;    [/B]
}
[B].tubepress_thumbnail_area dl{margin:0!important}[/B]
.tubepress_thumbs {
    padding: 1em 5px 0 5px;
  [B]  float: right;[/B]

}

.tubepress_thumb {
   [B] float: right;[/B]
    line-height: 1.1em;
    font-size: 11px;
    height: 175px;
    overflow: hidden;
[B]width:120px;
margin:0 20px 0 0;
display:inline;[/B]
[B]}
.tubepress_thumb img,.tubepress_thumb a{margin:0!important;float:left}[/B]

It’s a little hard because of the inline styles and dynamic positioning that’s going on in that page.

Anyone?

I am comfortable with anything (html, css, etc.) being modified/edited as long as the finished product works, and looks the way it needs to.

thanks, I will look into it.

You will need to find out why they are needed and why they are in the wrong place. You can’t have the html wrapped in a pre tag because all the white-space becomes hard-coded into your page.

I’m guessing that something is missing or tags haven’t been closed properly somewhere along the line.

Those <pre> tags are being generated by the video player plugin. They are not in my actual html code. Not sure what that is all about!

Hi,

The first thing to do is to remove that pre tag and code tag that are stuck in the middle of the html for no good reason.


<div class="video-player">
                    <!-- begin post -->
                   [B] <pre><code> [/B]
                    <div class="tubepress_container" id="tubepress_gallery_1607056256">

And remove the closing pre and code tags also. If you don’t remove them then the display won’t work properly.

Then make these changes to the tubepress.css and remember to remove the duplicated styles that you have in another stylesheet.


/* tubepress.css*/
.tubepress_container {
  [B]  float: left;[/B]
    margin-bottom: 2em;
    width: 100&#37;;
}
.tubepress_normal_embedded_wrapper {
    text-align: left;
  [B]  margin:1em 1em 0 2em;
    float:left;[/B]
}
.tubepress_embedded_title {
    font-weight: bold;
    font-size: larger;
    margin-bottom: .3em;
}
.tubepress_thumbnail_area {
   [B] margin:1em 0 0 1em;
    float:left;
    width:120px;[/B]
}
.tubepress_thumbnail_area dl {
    margin:0
}
.tubepress_thumbs {
    padding: 2em 5px 0 5px;
    [B]float: right;[/B]
}
.tubepress_thumb {
  [B]  float: right;[/B]
    line-height: 1.1em;
    font-size: 11px;
    height: auto;
    overflow: hidden;
   [B] width:120px;
    margin:0 0px 15px 0;[/B]
    display:inline;
  [B]  clear:right;[/B]
}
.tubepress_thumb img, .tubepress_thumb a {
 [B]   margin:0;
    float:left[/B]
}

.tubepress_embedded_title {
    font-weight: bold;
    font-size: larger;
    margin-bottom: .3em;
  [B]  text-align:center;[/B]
}
.tubepress_thumbnail_area {
 [B]   margin-top: 1em;[/B]
}

.tubepress_thumb a {
    cursor: pointer;
}
.tubepress_meta_group {
    margin-top: 0;
    text-align: left;
}
.tubepress_meta_group dd {
    margin: 0;
}
.tubepress_meta_group dt {
    clear: left;
}
.tubepress_meta {
    float: left;
}
dt.tubepress_meta_title, dt.tubepress_meta_runtime, dt.tubepress_meta_url, dt.tubepress_meta_description {
    display: none;
}
dd.tubepress_meta_title, dd.tubepress_meta_title a, dd.tubepress_meta_title a:hover {
    font-size: 12px;
    font-weight: bold;
    margin-left: 0;
    clear: left;
}
dd.tubepress_meta_runtime {
    font-size: 11px;
    margin-left: 0;
    font-weight: bold;
    clear: left;
}
dt.tubepress_meta_author, dt.tubepress_meta_keywords, dt.tubepress_meta_category, dt.tubepress_meta_rating, dt.tubepress_meta_ratings, dt.tubepress_meta_likes, dt.tubepress_meta_id, dt.tubepress_meta_views, dt.tubepress_meta_uploaddate {
    font-style: italic;
    color: #666666;
}
dt.tubepress_meta_author:after, dt.tubepress_meta_keywords:after, dt.tubepress_meta_category:after, dt.tubepress_meta_rating:after, dt.tubepress_meta_ratings:after, dt.tubepress_meta_likes:after, dt.tubepress_meta_id:after, dt.tubepress_meta_views:after, dt.tubepress_meta_uploaddate:after {
    content: ":";
}
dd.tubepress_meta_author, dd.tubepress_meta_keywords, dd.tubepress_meta_category, dd.tubepress_meta_rating, dd.tubepress_meta_ratings, dd.tubepress_meta_likes, dd.tubepress_meta_id, dd.tubepress_meta_views, dd.tubepress_meta_uploaddate {
    margin-left: .5em;
}
dd.tubepress_meta_url {
    clear: left;
}
.tubepress_sidebar .tubepress_thumb {
    width: 100%;
    height: auto;
    margin-top: 1em;
}
.tubepress_container div.pagination {
    padding: 3px;
    margin: 3px;
    text-align:center;
    clear: both;
}
.tubepress_container div.pagination a {
    border: 1px solid #dedfde;
    margin-right:3px;
    padding:2px 6px;
    background-position:bottom;
    text-decoration: none;
    color: #0061de;
    cursor: pointer;
}
.tubepress_container div.pagination a:hover, div.meneame a:active {
    border: 1px solid #000;
    background-image:none;
    background-color:#0061de;
    color: #fff;
}
.tubepress_container div.pagination span.current {
    margin-right:3px;
    padding:2px 6px;
    font-weight: bold;
    color: #ff0084;
}
.tubepress_container div.pagination span.disabled {
    margin-right:3px;
    padding:2px 6px;
    color: #adaaad;
}
div.tubepress_single_video {
    float: left;
    width: 100%;
    text-align: left;
}
div.tubepress_single_video dd.tubepress_meta_description {
    margin-top: .3em;
    margin-bottom: .8em;
}


The html could do with validating also as there are some errors in the page :slight_smile:

I am explaining this wrong … the css will not work with this plugin…it has its own, different css somewhere, I am sure. The link I provided was to show how I wanted it laid out … it has nothing to do with the plugin I am using, which has its own css. I would be able to get close on the styling, but the div names are crazy, and I do not know where to start. Also, I am clueless on JQuery.

I don’t think it’s important which plugin you use it is as Paul O’B already pointed out a matter of using the same CSS as on that page. Using that css has nothing to do with what kind of plugin you are using. You can change the div names as you please as long as you aslo change them in the jQuery function calls as well

The reason I do not use the css from the page I linked to is because the VIDEO PLUGIN I AM USING is not the one on that page … I just liked the way that one was organized, but it does not have the functionality I need.

I am using the TubePress plugin for Wordpress: www.tubepress.org

Thanks!

Hi,

I can’t work out what your code is supposed to be doing I’'m afraid. It looks much too complicated for what you are trying to achieve and you also seem to be dynamically changing the margin on the elements also.

Why didn’t you use the same format that you showed on the page you linked to?


 <div class="yt_holder">
    	<div id="ytvideo2"></div>
        <ul class="demo2">
            <li><a href="[http://www.youtube.com/watch?v=QBBWKvY-VDc](http://www.sitepoint.com/forums/view-source:http://www.youtube.com/watch?v=QBBWKvY-VDc)">Video 1</a></li>
            <li><a href="[http://www.youtube.com/watch?v=ZXMQqLnRhRI](http://www.sitepoint.com/forums/view-source:http://www.youtube.com/watch?v=ZXMQqLnRhRI)">Video 2</a></li>
            <li><a href="[http://www.youtube.com/watch?v=Wvo-g_JvURI](http://www.sitepoint.com/forums/view-source:http://www.youtube.com/watch?v=Wvo-g_JvURI)">Video 3</a></li>
        </ul>
    </div>    

You just float the video to the left and the thumbnails to the right. Make sure each have the correct widths for the elements. It should be as easy as that.

In your page you have multiple nestings and the thumnails don’t even seem to be in the same place as the video making it hard to float them there. Plus the inline code and too many wrappers make this very complicated.

I would start with a clean page and just get the video and thumbnails in position first and then put the code in your page.

It’s as simple as shown in that link you pointed to and there is no need for masses of code and useless nested elements.

Just float the video left and float the thumnbails right in a container that is wide enough for both to fit. The image and captions should be in one floated div so that they float together and it will need a width that fits.

I tried to change your code but it’s just too awkward the way it is set up.