Skip to content Skip to sidebar Skip to footer
Home / Cross Browser / Html / Html5 Video

Control Bar Wider Than Video In Html5 + Css

Post a Comment
I tried including the width and height attributes in html5 to manipulate the dimensions of the frame of my video but it doesn't seem to get bigger or smaller proportionally to the

Solution 1:

Setting up the dimension of the width and leaving the height dimension blank will fix this issue. It happens because If you set the two dimensions, and the actual video dimensions are not the same, it will scale to to the closest appropriate proportion using one dimension, thereby leaving blank margins at the only one dimension of the video player. The video may be centered either on the horizontal or on the vertical with blank space on either side


Solution 2:

ITs your video issue as your video is not as full screen . See the following example

 <!DOCTYPE html>

<html style="height:100%; width=1200px;margin:0;padding:0;">

<body style="height:100%;width=100%;margin:0;padding:0;">
<div id="container" style="background-color:#FFA500;height:100%;width:100%;position:relative;min-height:800px;min-width:1000px;" >

    <div id="logo_login_pass" style="border:1px solid black; height:25%;width:94%;background-color:white;position:relative;float:right;min-height:150px;min-width:700px;">
        <div id="logo" style="border:1px solid black; height:80%; width:30%; background-color:green; position:absolute;bottom:14px;min-height:90px;min-width:340px;">
            For Logo
        </div>
        <div id="login_pass_form" style="border:1px solid black; height:40%;width:50%;background-color:blue;min-height:60px; min-width:300px;position:relative;float:right;bottom:-30px;">
            For Login and Password
        </div>
    </div>
    <div id="video" style="border:0px solid white; height:40%;width:49.844%;background-color:indigo;position:relative;float:left;">
        <video width="450px"  controls="controls" style="position:absolute;top:30px;right:170px;">
              <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
              <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>


            Your browser does not support the video tag.
        </video>
    </div>
    <div id="user_registration_form" style="border:0px solid white; height:74%;width:50%;background-color:purple;position:reltive;float:right;min-height:448px;">
        Registration Form
    </div>
    <div id="footer" style="border:1px solid black; height:32%;width:100%;background-color:pink;position:relative;float:right;min-height:188px;">
        Footer
    </div>
</div>

</body>

Solution 3:

just add the element size in the video for the tamnho you want

<video width="450" height="240" controls>

Post a Comment for "Control Bar Wider Than Video In Html5 + Css"