Avoid space after iframe - html

Question

This is the code I'm using to play youtube video. I want to decrease the height of iframe. Here I changed height to 80% from 100%. So it is giving space between video and sample text. I want to avoid this space. How to do this. Any suggestions please.
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
text-align:center;
margin-bottom:1%;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%;
}
<div class="videoWrapper" id="tmp">
<iframe id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>
</div>
some text here
Problem: Avoid space between iframe and text.

Answer 1

set iframe height and width inline and remove the rules from css.
<iframe width="200" height="200" id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>

Answer 2

Add negative margin-bottom to the iframe wrapper, ie:
#videowrapper {
margin-top: -80px;
}
and then tweak the margin to make it work for you
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
text-align:center;
margin-bottom: -80px;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%;
margin-bottom: -80px;
}
<div class="videoWrapper" id="tmp">
<iframe id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>
</div>
<div id="afteriframe">some text here</p>

Answer 3

When you have changed height of iframe you have also changed ratio of video. It is not 16:9 as it was before. You also have a div that contains an iframe which padding-bottom set to 56.25% - and this was set in order to get the right ratio of video - 16:9. If you divide 9 by 16 you'll get 0,5625 then multiply it by 100% and you'll get your 56.25%. If you want to change the ratio of video by reducing it's height from 100% to 80% then multiply 0,5625 by 80 and you'll get 45. And now if you change padding-bottom of .videoWrapper to 45% and set height of iframe back to 100% you will see same ratio of video like in your question but you will see no space between video and text.
.videoWrapper {
position: relative;
padding-bottom: 45%; /* 16:9 */
padding-top: 25px;
height: 0;
text-align:center;
margin-bottom:1%;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapper" id="tmp">
<iframe id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>
</div>
some text here
But I see no point of changing video ratio at all