Bootstrap modal won't show over video element

Question

I'm trying to get a modal box to show on clicking "Share" link. Following documentation, this should work. It appears that it may just be showing behind the video element, but changing the z-index hasn't helped.

Here's the JSFiddle: http://jsfiddle.net/t5cLh1wn/

<div class="container">
<div class="row">
    <div class="col-md-4 about">About</div>
    <div class="col-md-4 logo"></div>
    <div class="col-md-4 share"><a href="#myModal1" role="button" class="btn" data-toggle="modal">SHARE</a>
    </div>
</div>
<div class="row">
    <div id="video">
        <video controls autoplay="autoplay" poster="video/trailer.jpg" width="1000" onclick="if(/Android/.test(navigator.userAgent))this.play();">
            <source src="video.mp4" type="video/mp4" />
            <source src="video/trailer.webm" type="video/webm" />
            <source src="video/trailer.ogv" type="video/ogg" />
            <embed src="video/flashfox.swf" width="600" height="480" flashVars="autoplay=true&amp;controls=true&amp;loop=true&amp;src=trailer.mp4" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
    </div>
</div>
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3>Sharing options</h3>

    </div>
    <div class="modal-body">Sharing options</div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

CSS

body{
  background-color: #000;
  color: #fff;
  font-family: arial;
}
/*CENTER VIDEO PLAYER*/
#video{
  text-align: center;
}
.about{
  float: left;
  padding-left: 80px;
  font-family: Knowledge;
  border-style: none;
}
.share{
  float: left;
  padding-left: 300px;
  font-family: Knowledge;
  border-style: none;
}

.logo{
  background-image: url('image.png');
  background-repeat: no-repeat;
  width: 350px;
  height: 130px;
  border-style: none;
}

Answer 1

You need to remove hide from your modal div. That is keeping it hidden at all times. You do not need to use that, it hides by default on its own.

Updated JSFiddle

<div id="myModal1" class="modal" tabindex="-1" role="dialog">