セルの中央にビデオを縦に並べる方法は？

Question

私は、上下のオーバーフローが隠れるように、固定高さのセルの中央にビデオを揃えようとしています。今まで

私が持っている：

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td height="150" style="display: block; overflow: hidden; vertical-align: middle;"> 
    <div style="position: relative;"> 
     <video autoplay loop width="100%" style="display: block;"> 
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
     </video> 
    </div> 
    </td> 
    </tr> 
</table> 

しかし、「垂直整列：中央を。」 "td"では何もしていないようです。

私は真ん中の150個のピクセルを見て探していますが、現在、それは助けることができている人にとって、トップ150 ...

を見せて、私のJSfiddle例へのリンク： https://jsfiddle.net/xtxkm02a/1/

ありがとうございます。

Answer 1

ここに私のコメントに加えてコードです。

table { 
 
    height: 300px; 
 
    border: 1px solid #000; 
 
} 
 
table td { 
 
    border: 1px solid #f00; 
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
    height: 30px; 
 
} 
 
.video { 
 
    overflow: hidden; 
 
    height: 150px; 
 
} 
 
.video video { 
 
    width: 100%; 
 
    margin-top: -75px; 
 
}

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
     <td valign="center" style=""> 
 
      <div class="video"> 
 
       <video loop> 
 
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
       </video> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table>