CODEWITHSUNDEEP
htmlvideo
Shadowxvii
Shadowxvii

Reputation: 1120

HTML5 <video> width and height

I'm working to get a video on my webpage with the video tag.

I'm using FlareVideo to create my video tag. I can get the video to work on every browser that I need (IE 7/8/9, Firefox, Chrome, Safari).

The thing is, when I set the width and heigt, it looks like Safari and Chrome do not care at all and just put the right width, but a way too high height.

Also, with IE 7 and 8, the flash player used when HTML5 video is not supported by the browser is too small.

Hope somebody can help
Thanks

EDIT: added code

The HTML code

<div id="flarevideo" class="video-player" style="display:none;"></div>

The javascript code

function vidSwap(vidURL, awidth, aheight) {
    var pwidth = 720;
    var pheight = 406;
    $("div.video-player").show();
    fv = $("#flarevideo").flareVideo({
        flashSrc: window.pathToFlashVideo,
        width: pwidth,
        height: pheight,
        autobuffer: false,
        preload: false
    });
    fv.load([
        {
            src: '[server address]' + vidURL +'.mp4',
            type: 'video/mp4'
        },
        {
            src: '{server address]' + vidURL + '.ogv',
            type: 'video/ogg; codecs="theora, vorbis"'
        }
    ]); 
}

Note that the javascript is a bit different that what it should be (width and heigth here are hardcoded instead of using the two parameters of my function). Also, the format of vidUrl is "/[name fo the video without extension"] And, window.pathToFlashVideo is the path for the flash fallback, defined on my html page

Upvotes: 0

Views: 6772

Answers (1)

Shadowxvii
Shadowxvii

Reputation: 1120

Seems like the problem was coming from the div's CSS that contained the video. I removed the height:100% and now it's working fine.

Hope this helps anybody else with the same problem

Upvotes: 1

Related Questions