dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Creating a video scroll bar (Help)

  1. #1
    Join Date
    Mar 2011
    Posts
    1

    Creating a video scroll bar (Help)

    http://www.youtube.com/

    Hello guys, how can I create a scroll bar with all the related videos shown, just like the Suggestions of youtube.com

    Greatly appreciate if anyone could help me out. Thanks.

  2. #2
    Join Date
    Mar 2011
    Posts
    4
    Something like this?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>-</title>
    <style media="screen" type="text/css">
    body, html{ padding:0px; margin:0px;}
    #container{ width:840px; height:450px;}
    #video{ width:640px; height:390px; float:left;}
    #suggestions{ float:right; width:200px; height:390px; overflow-y:scroll; overflow-x:hidden;}
    .suggestionvideos, ul{ width:200px; list-style:none; padding:4px; margin:0px;}
    .suggestionvideos, li{ height:50px; padding-bottom:4px;}
    .suggestionvideos, p{ float:right; display:inline-block; width:145px; text-align:left;}
    .suggestionvideos, span{ float:left; width:50px; height:50px; display:inline-block; background-color:#CCC;}
    /*640 x 390*/
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="video"><object width="640" height="390"><param name="movie" value="http://www.youtube.com/v/82utG7Q3G_k?fs=1&amp;hl=nl_NL&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/82utG7Q3G_k?fs=1&amp;hl=nl_NL&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390"></embed></object></div>
    	<div id="suggestions">
        <ul>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
            <li><span>video image</span><p>description</p></li>
        </ul>
        </div>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles