Question

I’m attempting to create a video element as a string, set the height and width from variables (also strings), and I’m finding that IE9 is dropping the “%” from the dimension values. Here’s a boiled-down example:

html:

<div id="videoWrap">
</div>

javascript:

var height = '100%',
    width = '100%',
    video = '<video id="someId" width="' + width + '" height="' + height + '">' +
            '<source src="http://someSource.com" /></video>';

$('#videoWrap').append(video);

result in Chrome (or any other reasonable browser):

<div id="videoWrap">
    <video id="someId" width="100%" height="100%">
        <source src="http://someSource.com" />
    </video>
</div>

result in IE:

<div id="videoWrap">
    <video id="someId" width="100" height="100">
        <source src="http://someSource.com" />
    </video>
</div>

Anyone have any thoughts?

Answer 1

width and height are NOT how you should be styling an element for size. Those two attributes are supposed to indicate a size in pixels ONLY.

Instead, do it properly with style="width: 100%; height: 100%;".