Jump to content

Recommended Posts

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.  :'(

Link to comment
https://forums.phpfreaks.com/topic/255611-making-example-video-player/
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.