html - Bootstrap 模态 vimeo 播放按钮

Question

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

我正在使用 Bootstrap 模式加载一个 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