Making Example Video Player

N-Bomb(Nerd) · January 23, 2012

Hello,

I mainly work with php and I don't know much about css (I can understand some of the basics), but I need something for a project that I'm working on. I basically have this div that's has the following size:

height: 398px; 
width: 650px;

Within that div I'm trying to create an example mockup of a video player.. almost like something you would see if you embedded a YouTube video. Just to show you how bad I am at css -- here's the code I've been trying to get to work now for a few hours (4++ hours):

<html>
    <head>
        <style type="text/css">
            #video_player #background
            {
                float: left;
                position: absolute;
            }
            #video_player #title
            {
                position: relative;
                background: url("http://i.imgur.com/ms7ho.png") repeat;
                height: 35px;
                width: 100%;
            }
            #video_player #title span
            {
                float: left;
                position: absolute;
                color: white;
                padding-left: 15px;
                padding-top: 6px;
                padding-bottom: 5px;
                font: 16px arial,sans-serif;
            }
            #video_player #spinner
            {
                position: absolute;
                height: 100%;
                width: 100%;
            }
            #video_player #controls
            {
                height: 35px;
                width: 100%;
            }
        </style>
    </head>
    <body>

        <div id="video_player" style="border: #d2d2d2 1px solid; width: 650px; height: 398px;">
            <div id="background"><img src="http://i.imgur.com/otRCm.jpg" width="630px" height="398px" /></div>
            <div id="title"><span>Rihanna - Only Girl (In The World)</span></div>
            <div id="spinner"></div>
            <div id="controls"><span>the video player controls go here at the bottom</span></div>
        </div>

        <script type='text/javascript' src="http://fgnass.github.com/spin.js/spin.js"></script>
        <script type='text/javascript'>
            var opts = {
              lines: 12, // The number of lines to draw
              length: 7, // The length of each line
              width: 4, // The line thickness
              radius: 20, // The radius of the inner circle
              color: '#000', // #rgb or #rrggbb
              speed: 1.5, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: true // Whether to render a shadow
            };
            var target = document.getElementById('spinner');
            var spinner = new Spinner(opts).spin(target);
        </script>

    </body>
</html>

As you can tell.. I can't quite get everything to align properly in in their correct "layers" (not sure of the correct term.. I think "overlap correctly" might of worked better there). I've been trying to use firefox, chrome, and ie to text cross-compatibility, but it's turning out to be hard. The spinner script is supposed to add the spinner into the middle of the div.. so I royally messed that up. Ideally, at the bottom of the video player I want to have an example set of controls, but I'm just wondering how hard that would be to incorporate.

I would really appreciate some help on this. I'm a total noob when it comes to css. :'(

Sign In

Making Example Video Player

Recommended Posts

N-Bomb(Nerd)

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information