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><htmlstyle="height:100%; width=1200px;margin:0;padding:0;"><bodystyle="height:100%;width=100%;margin:0;padding:0;"><divid="container"style="background-color:#FFA500;height:100%;width:100%;position:relative;min-height:800px;min-width:1000px;" ><divid="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;"><divid="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><divid="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><divid="video"style="border:0px solid white; height:40%;width:49.844%;background-color:indigo;position:relative;float:left;"><videowidth="450px"controls="controls"style="position:absolute;top:30px;right:170px;"><sourcesrc="http://video-js.zencoder.com/oceans-clip.mp4"type='video/mp4'/><sourcesrc="http://video-js.zencoder.com/oceans-clip.webm"type='video/webm'/>


            Your browser does not support the video tag.
        </video></div><divid="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><divid="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

<videowidth="450"height="240"controls>

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