Height setting from the embed or link code in Css-CodePudding

How to make height settings from the embed link for video background under the header, such as this website: https://www.videvo.net/, I own embed link video that is very responsive, and the change height in this link:<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>

CodePudding user response：

Welcome to Stack Overflow!

Remove padding-bottom and set the height and you should be good to go!

<div style="width:100%;height:100px;position:relative;">
<iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;">
</iframe>
</div>

CodePudding user response：

If the issue is that the header is not being shown over the video, try setting the z-index. That is just setting what layer the element is on, and therefore what is shown on top. Higher number = shown first. Otherwise what @iOSDeveloperGuy posted is correct! If you are running in chrome (and other browsers as well), you can right click and inspect specific elements. If you do this, you can see exactly what CSS styles are being applied there. This includes margins, borders, and everything else!