Bootstrap modal vimeo play button

Question

I have a JSFiddle here - http://jsfiddle.net/n90Lexgc/

I'm using bootstrap modal to load a vimeo video.

I've added CSS to make the video larger and responsive.

My problem is I've lost the play button in the video.

If I click the video it plays and stops, but I have no play button.

        <!-- video player -->
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content embed-responsive embed-responsive-16by9">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <div class="modal-body">

                          <iframe width="1000" height="528" frameborder="0" allowfullscreen="" class="embed-responsive-item"></iframe>

                        </div>
                    </div>
                </div>
            </div>
            <!-- video player -->

            <div class="container-fluid">
                <div clas="row">

                    <button class="js-play" data-vid="105100455">Video</button>

                </div>  

            </div>  

Answer 1

Its not that your buttons are missing, they're just pushed so far down you can't see them.

You'll need to cut some of the padding from your modal-body.

.modal-body {
    ...
    padding-bottom: 49%;
    ...
}

JSFiddle