Forum Moderators: not2easy

Message Too Old, No Replies

Less space footer bottom

         

guidomarchal

11:50 am on Dec 15, 2015 (gmt 0)

10+ Year Member



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

2:12 pm on Dec 15, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

6:06 pm on Dec 15, 2015 (gmt 0)

10+ Year Member



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

7:43 pm on Dec 15, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



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.