CSS Styling of a video player with control buttons

Question

Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to @Marc Audet request.

Basically I had this code:

.playBT{
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 999;
    top: 25%;
    left: 25%;
    margin-left: -25px;
    margin-top: -25px;
}

However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...

Here is the code

Answer 1

You need to tweak your HTML a bit, here is one way of doing it:

<div id="video-panel">
    <div id="video-container" class="video-js-box">
        <div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
        <video id="video1">
            <source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
        </video>
    </div>
    <div id="video-controls">
        <div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
        <div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
        <div id="progressbar">
            <div id="chart"></div>
            <div id="seeker"></div>
        </div>            
    </div>
</div>

and the CSS is as follows:

#video-panel {
    border: 4px solid blue;
    padding: 4px 50px;
}
.video-js-box {
    width: auto;
    height: auto;
    outline: 1px dotted blue;
    position: relative;
    display: block;
}
video {
    outline: 1px dotted blue;
    margin: 0 auto;
    display: block;
}

#play {
    position:absolute;
    top: 50%;
    left: 50%;
    outline: 1px dotted red;
}

.imgBT{
    width:50px;
    height:50px;
    vertical-align: bottom;
    margin-left: -25px;
    margin-top: -25px;
}

#video-controls {
    outline: 1px solid red;
    overflow: auto;
}

#footerplay {
    float: left;
    margin-left: 27px;
}

#footerpause {
    float: left;
    margin-left: 27px;
}

#progressbar {
    float: left;
    outline: 1px dotted black;
    display: inline-block;
    width: 200px;
    height: 27px;
    margin-left: 27px;
}

#footerplay img, #footerpause img{
    height:27px;
}

Fiddle Reference: http://jsfiddle.net/audetwebdesign/EnDHw/

Explanation & Details

User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.

The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.

The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.

This should help you get started. The outlines and borders are for illustration only and are optional.

Good luck!