I'm using a skin for Flat-UI , but when I put the video inside a panel, it appears a margin below that I can not get out of nowhere.
See FIDDLE (scroll the Results bar down), or snippet 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><scriptsrc="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><linkhref="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 class video-js , but I have not found where I should change. In the file flat-ui.css (in the dist/css/ folder, the configuration of this class looks 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, ie it is not in this file that the problem is. : / Any idea what configuration I need to change to make this margin disappear? Thanks in advance!