Centering a YouTube video in the viewport

HTML & CSS
22

That screenshot seems to show that you made the window taller (therefore I see space above and below the .video-wrapper container) but not wider or shorter than the .video-wrapper container.

Try stretching the browser wider than the .video-wrapper OR shrinking it shorter than the .video-wrapper.

1 Like
23

You’re right, there’s space on both right and left sides. But when you close the browser window shorter, the space goes away.

1 Like
24

The aspect ratio of the video is therefore maintained. :wink:

2 Likes
25

So, I guess it wouldn’t make sense to want space showing when the browser window closes.

26

No, it wouldn’t.

You could allow the image to become smaller, but then it would be hard to see.

FYI, those min and max-widths are set in the .video-wrapper box.

1 Like
27

Like this:

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding:0 10px;
}
1 Like
28

Important!

How do I fix this? It’s not centered.

And responsive isn’t working.

I just put the code in now.
https://helpfix34343.blogspot.com/

29

You are not using the code which @PaulOB gave you in post 15.

What happens if you use Paul’s code?

30

I forgot to add:
class=“video-frame”

To the html.

All fixed.
https://helpfix34343.blogspot.com/

1 Like
31

Thank you for this.

32

I can either use this:

html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}
.tcell {
  display: table-cell;
  vertical-align: middle;
}
.video-wrapper {
  min-width: 40%;
  max-width: 880px;
  height: 100%;
  margin: auto;
  display:table;
  width:100%;
}
.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}
.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

or this



html, body {
	height: 100%;
	background: #000000;
	padding: 0;
	margin: 0;
}
.outer {
	display: table;
	height: 100%;
	margin: 0 auto;
	width:100%;
}
.tcell {
	display: table-cell;
	vertical-align: middle;
}
.video-wrapper {
	min-width: 40%;
	max-width: 880px;
	margin: auto;
}
.ratio-keeper {
	position: relative;
	padding-top: 56.25%;
}
.video-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
33

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.