How to manipulate margin of a Flat-UI video

Question

I’m wearing a skin for video Flat-UI, but when I put the video inside a panel, there’s a margin at the bottom that I can’t remove at all.

See on FIDDLE (roll the bar of Results down), or in the snippet down below:

.panel-info > .panel-heading {

    background-color: #2d3f51;
    color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://designmodo.github.io/Flat-UI/docs/assets/js/application.js"></script>
<script src="http://designmodo.github.io/Flat-UI/dist/js/flat-ui.min.js"></script>
<link href="http://designmodo.github.io/Flat-UI/dist/css/flat-ui.css" rel="stylesheet"/>
<link href="http://designmodo.github.io/Flat-UI/dist/css/vendor/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading" align="center">
                       Painel do vídeo</div>
                <video class="video-js" preload="auto" poster="Flat-UI-master/docs/assets/img/video/poster.jpg" data-setup="{}">
                    <source src="http://iurevych.github.com/Flat-UI-videos/big_buck_bunny.mp4" type="video/mp4">
                    <source src="http://iurevych.github.com/Flat-UI-videos/big_buck_bunny.webm" type="video/webm">
                </video>
                        Esta margem/padding/we fora (ver classe video-js)
                    </div>
            </div>
            </div>

I think the change should be in the class video-js, but I couldn’t find where to change it. In the file flat-ui.css (in the briefcase dist/css/, the configuration of this class is like this:

.video-js {
  position: relative;
  width: 100% !important;
  height: auto !important;
  padding-bottom: 47px;
  overflow: hidden;
  font-size: 0;
  vertical-align: middle;
  background-color: transparent;

  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-top-radius: 6px;
  }

But even deleting this entire section does not change anything, that is, it is not in this file that the problem is. : / Any idea which configuration I need to change to make this margin disappear? Thanks!

Answer 1

This margin is showing up because it is implemented in:

.video-js {
    position: relative;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 47px; /* Está a ser implementado aqui nesta linha */
    overflow: hidden;
    font-size: 0;
    vertical-align: middle;
    background-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top-radius: 6px;
}

To solve this just add the following code to your style sheet:

.video-js {padding-bottom: 0 !important;}