Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: CSS issues

  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts

    CSS issues

    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/
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #2
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts

    Hopefully helps

    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 and here)

    2nd: the following source code needs to be put in your <head> tags
    Code:
    <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
    Code:
    #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
    Code:
    <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/

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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!
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #4
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Add overflow:auto; to #videos .video-player to clear the floats
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Add overflow:auto; to #videos .video-player to clear the floats
    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.
    Attached Thumbnails Attached Thumbnails CSS issues-videos.jpg  
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •