Less space footer bottom

[guidomarchal]

Hi Guys,

I have to much (black) space on the bottem of my footer under the youtube video.

How can I reduce this black space?


css code

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 50%;
 height: 50%;
}

[edited by: not2easy at 1:16 pm (utc) on Dec 15, 2015]
[edit reason] No Site Links/Reviews, see TOS/Charter [/edit]

[Fotiman]

Can you post some corresponding markup? If I was to guess simply based on what I see posted here, I would guess you need to reduce the padding-bottom value on .video-container.

[Paul_o_b]

You've set the height of the iframe,object embed to 50% which means it will only be half as tall as the .video-container and thus you get the extra space.

The width and height need to be 100% to fill the video container. If you want a smaller container then reduce the width and padding-bottom on the video container.

The method you are using is to enable a fluid responsive object that retains an intrinsic aspect ratio and you need to stick to the rules as shown here:

[alistapart.com...]

[not2easy]

Thanks for that link, Paul_o_b, I just found the Thierry Koblentz article link on my old drive and came in to add it, so you saved me the trouble. Other than the width and height at 50% it has the code right. It will depend on having the video container set properly as well, the article explains it better than I could.