0

Consider this snippet (which works in all major browsers):

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

td {
  position: relative;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="main">

    <div id="header">
      Header
    </div>
    <div id="content">


      <table>
        <tr>
          <td>
            <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
          </td>
        </tr>
      </table>

    </div>


  </div>

In IE11 the td item's height is set to 0, whereas in other browsers it gets the correct value.

Due to this, the video tag is also zeroed out, and it is not visible.

Is this a known issue in IE11? I know about some min-height issue (from https://caniuse.com/#feat=flexbox), but it does not seem to correlate.

How can I make this working in IE11 while preserving the support for the other browsers too?

Improve this question
2
  • I don't get why you have the <video> in a <table>? Can't you just put it in a <div> and avoid this issue altogether?
    – Moob
    Commented Mar 2, 2020 at 16:11
  • found the solution: stackoverflow.com/a/49322465/1446710
    – Daniel
    Commented Mar 2, 2020 at 16:15

2 Answers 2

Reset to default
0

Consider putting the <video> content in a <div> instead of a <table>. Additionally, there's no need to absolutely position it:

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

#videoWrapper {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
  position: relative;
  display:flex;
}

video {
  width: 100%;
  height: 100%;
}
<div id="main">

  <div id="header">
    Header
  </div>
  <div id="content">

    <div id="videoWrapper">
      <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
    </div>

  </div>

</div>

Improve this answer
2
  • Thanks but I need the table.
    – Daniel
    Commented Mar 2, 2020 at 17:01
  • 1
    @Daniel are you sure?
    – Moob
    Commented Mar 2, 2020 at 17:05
0

You created a new stacking context with td { position: relative } and without specific height/width values IE thinks it has zero height/width.

Simply remove td {} and modify your video {...} as noted in the snippet (actually remove the stacking context) and you will see IE works as expected.

Apparently more modern browsers have solved this issue.

This will be hard to test through Stackoverflow as SO (oddly enough) no longer supports IE11...

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}
/* *** REMOVE ***
td {
  position: relative;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}*/

/* *** KEEP *** */
video { width: 100%; height: 100% }
<div id="main">
    <div id="header">Header</div>
    <div id="content">
        <table>
            <tr>
                <td>
                <video controls>
                    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
                </video></td>
            </tr>
        </table>
    </div>
</div>

UPDATE

For your convenience I added a more extensive snippet showing a table with multiple columns and rows. Disabled table width/height, added table border-collapse and a demo td {...}, again without position: relative. Tested to work in IE11 (9,10 mode too).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>SO 60492668</title>

<style>
body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

table {
/*  width : 100%; /* temporary disabled */
/*  height: 100%; /* temporary disabled */
  background: blue;
  color: white;
  border-collapse: collapse; /* ADD */
}
/* *** REMOVE ***
td {
  position: relative;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}*/

/* *** KEEP *** */
td    { border: 1px solid rgba(0,0,0,.3); padding: .5rem } /* DEMO */
video { width: 100%; height: auto; max-width: 20rem }
</style>

</head>
<body>
<div id="main">
    <div id="header">Header</div>
    <div id="content">
        <table>
            <tr>
                <td>column 1</td>
                <td>column 2</td>
                <td>column 3</td>
                <td>
                <video controls>
                    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
                </video></td>
                <td>column 5</td>
            </tr>
            <tr>
                <td>column 1</td>
                <td>column 2</td>
                <td>column 3</td>
                <td>
                <video controls>
                    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
                </video></td>
                <td>column 5</td>
            </tr>
            <tr>
                <td>column 1</td>
                <td>column 2</td>
                <td>column 3</td>
                <td>
                <video controls>
                    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
                </video></td>
                <td>column 5</td>
            </tr>
            <tr>
                <td>column 1</td>
                <td>column 2</td>
                <td>column 3</td>
                <td>
                <video controls>
                    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
                </video></td>
                <td>column 5</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

Improve this answer
4
  • Thanks but I need the table. Solution is under the link I've posted as comment.
    – Daniel
    Commented Mar 2, 2020 at 17:02
  • @Daniel, take a closer look, I did not remove the table, just the position: relative. Plus, the link you gave does not have an accepted (green box) answer. It may still be open to dispute....just FYI. Additionally, I did not change any of your html code
    – Rene van der Lende
    Commented Mar 2, 2020 at 17:05
  • I've done that but that was caused another issue (video went off-screen). That's why I need both the table both td { position: relative; }. Sorry for being confusing.
    – Daniel
    Commented Mar 3, 2020 at 11:50
  • Well, you must have done something with the code in the mean time: I copied the snippet code into a new html document, tested it with the latest versions of Chrome, Edge2020, Firefox AND IE11 (plus 8,9,10 mode. IE8 mode fails) on W10. They all work like a charm without the video going off screen.
    – Rene van der Lende
    Commented Mar 3, 2020 at 13:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.