Suddenly stumbled upon a problem. What I do not - nothing helps.

HTML code:

<div class="hero_intro_vid"> <video controls="controls" poster="video/duel.jpg"> <source src="/wp-content/uploads/videos/ow_tracer_intro.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"'> </video> </div>

CSS:

 .hero_intro_vid {display: inline-block;margin-top: 30px;border: 1px solid #fff;border-radius: 10px;overflow: hidden;} .hero_intro_vid video {width:100%;border: 2px solid #f88100;box-sizing: border-box;}

And in the picture is the result, where you can see the indent from the picture to the frame below. Can you tell me how to fix this?

Strange indentation inside the block

  • I do not see the indent to the frame. I see that the player window rests on the frame. Which browser? - user194374
  • Google Chrome latest version - Telion
  • And what do you want to do? Player in the whole window? - user194374
  • I want the frame to closely fit the video, without a small indent at the bottom ... It is important that it be applied not to the video tag, but to the tag in which it is located. - Telion
  • Something is not clear ... I have it normally fits the div . Give all the HTML code, maybe there is something with other elements. - user194374

2 answers 2

add a style for .hero_intro_vid line-height:0;

    margin-bottom: -Xpx; will solve this problem

    • Try to write more detailed answers. Explain what is the basis of your statement? - Nicolas Chabanovsky ♦