CSS issues

CarlMartin10

08-26-2010, 03:39 PM

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/

dpDesignz

08-27-2010, 03:01 AM

Me again. :)

I have looked at your page source code, and from what I can see, there is some things missing that you need.

1st: do you have the .js? (Found Here (http://geckohub.com/jquery/youtubeplaylist/jquery.youtubeplaylist.js) and here (http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js))

2nd: the following source code needs to be put in your <head> tags
<script type="text/ecmascript">

$(function() {
$("ul.demo1").ytplaylist();
$("ul.demo2").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo2'});
});

</script>

3rd: here is the css he used. I'm not sure if you used it or not
#ytvideo,
#ytvideo2 {
float: left;
margin-right:10px;
}

.yt_holder {
background: #f3f3f3;
padding: 10px;
float: left;
border: 1px solid #e3e3e3;
margin-bottom:15px;
}

ul {
float: left;
margin: 0;
padding: 0;
width: 220px;
}

ul li {
list-style-type: none;
display:block;
background: #f1f1f1;
float: left;
width: 216px;
margin-bottom: 5px;
padding:2px;

}

ul li img {
width: 120px;
float: left;
margin-right: 5px;
border: 1px solid #999;
}

ul li a {
font-family: georgia;
text-decoration: none;
display: block;
color: #000;
}

.currentvideo {
background: #e6e6e6;
}

4th: last but not least, here is the code he used to embed. just copy, paste, and edit
<div class="yt_holder">
<div id="ytvideo2"></div>
<ul class="demo2">
<li><a href="http://www.youtube.com/watch?v=QBBWKvY-VDc">Video 1</a></li>
<li><a href="http://www.youtube.com/watch?v=ZXMQqLnRhRI">Video 2</a></li>
<li><a href="http://www.youtube.com/watch?v=Wvo-g_JvURI">Video 3</a></li>
</ul>
</div>

hope this helps.
to view his source code, just go to view-source:http://geckohub.com/jquery/youtubeplaylist/

CarlMartin10

08-27-2010, 03:59 AM

I think I was unclear on my explanation, lol. I am not using THAT player, I am using a wordpress plugin. My player works fine....I just want it to LOOK LIKE that player I linked to. Sorry for the confusion.

All I need is some help getting the CSS to move the player parts into the gray box where they belong.

Thanks!

CarlMartin10

08-27-2010, 01:03 PM

Can anyone help me out with this? I am very confused about what is happening ... I have the background set on the div that the videos are in, but that is not the way it is happening in the page

abduraooft

08-27-2010, 01:21 PM

Add overflow:auto; to #videos .video-player to clear the floats (http://www.quirksmode.org/css/clearing.html)

CarlMartin10

08-27-2010, 01:26 PM

Add overflow:auto; to #videos .video-player to clear the floats (http://www.quirksmode.org/css/clearing.html) Thank you! Now we are getting somewhere ... there is now a scrollbar, however. I am assuming that once the videos are in the box, and they fit within the width and height of the box, this will go away.

Now, I just need to get them to be in this configuration (see attached image). This is where I really get confused.