Fitting a YouTube iframe (both horizontally and vertically) without black bars

Question

I want to fit a YouTube iframe embed in the middle of a page (70% width) so I'm doing this:

.wrapper {
    margin: auto;
    width: 70%;
}

.wrapper iframe {   
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

The problem is, I'm getting black bars around the video to fill the available space. If instead I used padding (as in this answer) the iframe would only fit horizontally and might require scrolling in the vertical direction. Any idea what might help? (older browser support is not an issue)

Edit: I know the aspect ratio of the video I want to play.

score 0 · Answer 1 · answered Nov 04 '18 at 04:53

0

You can try to use flex css for this issue. you can use the static height width to the iframe as per your requirement

.wrapper  {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper iframe{
width: 100px;
height: 100px;
}

answered Nov 04 '18 at 04:53

manpreet Mannu

1
1

I'm afraid this doesn't remove the black bars and also doesn't make the iframe fit the window. – Vojtěch Strnad Nov 04 '18 at 19:37

score 0 · Answer 2 · answered Nov 04 '18 at 21:34

0

Black bars appear when the height/width ratio of the iframe is too high (over .5, approximately).

Use this CSS to maintain a fixed height/width ratio, even when the wrapper is resized:

.wrapper {
  width: 70%;
  padding-top: 35%; // 35/70 = 0.5, the ratio can be changed here
  margin: auto;
  position: relative;
}
.wrapper iframe {
  width: 100%;
  position: absolute;
  height: 100%;
  transform: translate(0, -100%);
}

answered Nov 04 '18 at 21:34

Nino Filiu

16,660
11
54
84

This removes the black bars and makes the video fit horizontally, but not vertically. – Vojtěch Strnad Nov 04 '18 at 22:24
then wrap the wrapper inside a div with the following css: `display: flex; align-items: center;` – Nino Filiu Nov 04 '18 at 22:38
Doesn't seem to make any difference at all. – Vojtěch Strnad Nov 04 '18 at 23:37

Fitting a YouTube iframe (both horizontally and vertically) without black bars

2 Answers2