linklist above HTML5-video

Test for iPad

HTML

<div class="videocnt">
    <video autobuffer controls autoplay>
      <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
    <ul>
        <li><a href="http://webkrauts.de">webkrauts</a></li>
        <li><a href="http://zeit.de">Zeit.de</a></li>
    </ul>
</div>

CSS

.videocnt {
    position: relative;
    margin-bottom: 20px; 
    width: 400px;}

video {
    width: 400px; 
    position: relative; 
    display: block; 
    z-index: 1;
}
.videocnt ul {position: absolute;top: 10px; right: 0;z-index: 10;list-style-type: none;}
.videocnt li {margin-bottom: 10px;}
.videocnt a {display: block;background-color: #a20000;color: #fff;padding: 4px 10px;}
.videocnt a:hover, .videocnt a:focus {background-color: #fd8100;color: #333;}
video {
    /* those hacks should target iPad */
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(0);
}

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

JavaScript

// If you remove the controls-attribute of the video-element, 
// the links will work on the iPad. But unfortunately the video
// won't start :-)