Bootstrap 模态 vimeo 播放按钮

Question

我在这里有一个 JSFiddle - http://jsfiddle.net/n90Lexgc/

我正在使用引导模式加载 vimeo 视频。

我添加了 CSS 以使视频更大且响应迅速。

我的问题是我丢失了视频中的播放按钮。

如果我点击视频，它会播放并停止，但我没有播放按钮。

        <!-- 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

并不是你的按钮不见了，而是它们被推得太深了，你看不到它们。

您需要从模态体中删除一些填充。

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

JSFiddle