CODEWITHSUNDEEP
csshtmlvideoalignment
Jason
Jason

Reputation: 821

Height has no effect when changing the width on <video>

When I changed the width from 1080px to 100% the video will take up the entire screen. I tried controlling the height with the height tag but no success.

jsfiddle.net

jsfiddle.net

Is there a way to get text below the video without the video taking up the entire screen leaving the text on the video? I want the full width taken up but not the entire height so the text scrolls across a black background at the bottom.

body {width:100%; height:100%; overflow:hidden; margin:0; background-color:black;}
 html {width:100%; height:100%; overflow:hidden; }
 
 #custom-message {
    font-family: verdana;
    font-size:18pt;
    color: rgb(230, 200, 98);
    z-index:1;
}

    <table style="width:100%;height:100%;background-color:#000">
        <tr valign="top">
            <td width="100%" valign="top" align="center">
                <video width="100%" src="http://henriksjokvist.net/examples/html5-video/video.ogg" autoplay loop></video>
            </td>
        </tr>
        <tr>
        <td style="color:white;height:120px"><marquee direction="right" speed="normal" behavior="loop" class="result" id="custom-message">text</marquee></td>
        </tr>
    </table>

enter image description here

Upvotes: 2

Views: 660

Answers (2)

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

change width of video tag from 1080px to 100% ,and remove the absolute positioning property of text tag.

body {width:100%; height:100%; /*overflow:hidden*/; margin:0; background-color:black;}
 html {width:100%; height:100%; /*overflow:hidden;*/ }
 
 #custom-message {
    /*position:absolute;*/
    font-family: verdana;
    font-size:18pt;
    color: rgb(230, 200, 98);
    z-index:1;
    bottom:1%;
}
<table style="width:100%;height:100%;background-color:#000">
        <tr valign="top">
            <td width="100%" valign="top" align="center">
                <video width="100%" src="http://henriksjokvist.net/examples/html5-video/video.ogg" autoplay loop></video>
            </td>
        </tr>
        <tr>
        <td style="color:white"><marquee direction="right" speed="normal" behavior="loop" class="result" id="custom-message">text</marquee></td>
        </tr>
    </table>

Upvotes: 1

Miro
Miro

Reputation: 8650

I think, you can't do it without javascript/jQuery.

Demo

I'm using the FitVid Plugin like this:

 $("video").fitVids();

Loaded from jsdelivr: https://cdn.jsdelivr.net/fitvids/1.1.0/jquery.fitvids.js

Upvotes: 1

Related Questions