Centering a YouTube video in the viewport


#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.


#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.


#24

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


#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.


#27

Like this:

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

#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/


#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.