SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Video controls

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Video controls

    I'm trying to create my own video controls, but am having trouble with the CSS.

    I have something like this:

    Code:
    <div class="video">
        <video src="video.webm"/>
        <nav class="controls">
        </nav>
    </div>
    Code:
    div.video {
        width: 640px; 
        height: 360px;
        background: black;
    }
    video {
        width: 100%;
        margin-top: 42px;
        margin-bottom: 42px;
    }
    div.video > nav.controls {
        width: 100%;
        height: 32px;
        color: white;
        background: gray;
    }
    The size of the div.video and margin size of the video is actually set via JavaScript. It's width is arbitrary and it's aspect ratio is always 16:9. The width of the video is set to 100% as to take up the full width. If the aspect ratio of the video is something other than 16:9 you should get bars on the bottom or side.

    My problem is figuring out how to manage the controls. I want to have them operate similar to YouTube's. I need to find a way to position them at the bottom without them disrupting the rest of the video.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't have any dealings with video controls as such but if you want to know how to place something at the bottom of a div then try this.

    Assuming the nav controls are a set height then you can place them absolutely at the bottom of the div as required by creating a stacking context on .video (add position:relative to .video). That will allow you to absolutely place the controls at bottom:0;left:0. You can preserve that space by adding padding-bottom to .video to match the height of the control and protect it.

    Not sure if that relates to your setup though


Bookmarks

Posting Permissions

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