Centering a YouTube video in the viewport

#1

How do I get the code that doesn't work, to work?

Is there a solution?

.outer and .tcell doesn't seem like they want to work in the codes.

That's what I always use to center things in the middle, don't understand why it's not working here.

I'm not sure how I would resolve the issue here.

Doesn't Work:
https://jsfiddle.net/m1tLp64m/28/

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

Works:
https://jsfiddle.net/m1tLp64m/30/

Code 2

Doesn't Work:
https://jsfiddle.net/o17wo3vk/6/

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

Works:
https://jsfiddle.net/o17wo3vk/8/

#2

Please explain "doesn't work". What should be happening which is not happening? You've been a member long enough to know how to phrase a question clearly. One random snippet of CSS tells us nothing.

#3

It's not showing.

It's not visible.

It should be viewable.

#4

Thank you.

#5

Also, when this code is added to it it stops being viewable.

This would be the code that centers it in the middle.

#6

So all you want to achieve is to centre the video? You can do that by adding margin:auto; to the .video-wrapper rules in your working version. There's no need for extra wrappers in the HTML.

#7

In the middle of the screen:
https://jsfiddle.net/m1tLp64m/68/

#8

I've changed the title of the topic to better reflect the question.

#9

You don't seem to have the table and table cell wrappers in place in that demo. Also you have no width to the table so it will be shrink to fit which means that the video wrapper min-width has no basis which is why the vdoe is hidden.

Try this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
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: 500px;
	margin: auto
}
.ratio-keeper {
	position: relative;
	padding-top: 56.25%;
}
.video-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>
</head>

<body>
<div class="outer">
  <div class="tcell">
    <div class="video-wrapper">
      <div class="ratio-keeper">
        <iframe class="video-frame" width="2" height="2" src="https://www.youtube.com/embed/M7lc1UVf-VE?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Also I removed the height:100% from the video wrapper because it would take up the whole height and the content would not appear centred because there's nothing to centre.

You could lose a div if you did this instead.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}
.tcell {
  display: table-cell;
  vertical-align: middle;
}
.video-wrapper {
  min-width: 40%;
  max-width: 500px;
  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%;
}

</style>
</head>

<body>
<div class="video-wrapper">
  <div class="tcell">
    <div class="ratio-keeper">
      <iframe class="video-frame" width="2" height="2" src="https://www.youtube.com/embed/M7lc1UVf-VE?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>
</body>
</html>
#10

How would I do this one?
https://jsfiddle.net/o17wo3vk/22/

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;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 70.53%;
  height: 68.08%;
}

<div class="outer">
  <div class="tcell">
    <div class="videoWrapper">

      <iframe width="2" height="2" src="https://www.youtube.com/embed/M7lc1UVf-VE?rel=0" frameborder="0" allowfullscreen></iframe>

    </div>
  </div>
</div>
#11

You wouldn't because that's nonsense.

The padding-top:56.25% is the mechanism that controls the aspect ratio of the video. You place the video at top:0 and left:0 into that padding space and make its width and height 100%. You cannot alter the videos width and height as that makes nonsense of the aspect ratio technique.

If you want to change the sized or aspect ratio of the video you change the padding-top percentage.

Use the method I gave you as it has everything in place.

#12

How would I make this responsive?
https://jsfiddle.net/8qajoc4t/7/

Here it's in the middle, but how do you get the video to change sizes?

html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

<div class='outer'>
  <div class='tcell'>

    <iframe allow='autoplay; encrypted-media' frameborder='0' height='225' src='https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&amp;showinfo=0&amp;autoplay=0&amp;iv_load_policy=3&amp;cc_load_policy=0&amp;fs=0&amp;disablekb=1&amp;vq=medium' width='400'/>

  </div>
</div>

It should get smaller when I do this:

#13

This seems to be exactly what I'm looking for.

Do you see any issues with it?

or are there any improvements you would make to it?
https://jsfiddle.net/h2zmy5ff/4/

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;
}

.wrapper {
  width: 69.64%;
  height: 100%;
  margin: 0 auto;
  background: #ccc;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="outer">
  <div class="tcell">

    <div class="wrapper">
      <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="https://i.imgur.com/9sFJbyV.png" />
        <iframe allow='autoplay; encrypted-media' frameborder='0' src='https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&amp;showinfo=0&amp;autoplay=0&amp;iv_load_policy=3&amp;cc_load_policy=0&amp;fs=0&amp;disablekb=1&amp;vq=medium' />

      </div>
    </div>
  </div>
</div>
#14

Or is this way better?

This one seems to be way improved upon from the code above.

And would you make any adjustments to it?
http://jsfiddle.net/7WRHM/12694/

html,
body {
  height: 100%;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.wrapper {
  width: 80%;
  max-width: 880px;
  height: 100%;
  margin: 0 auto;
  background: #CCC;
}

.h_iframe {
  position: relative;
  padding-top: 56.20%;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


<div class='outer'>
  <div class='tcell'>

    <div class="wrapper">
      <div class="h_iframe">
        <iframe src="http://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>
#15

I'll say it once more in case you weren't listening. I already gave you the code for this in my first post.

That is nonsense and again and not vertically centred for the reason already mentioned.

Here is the correct code again.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}
.tcell {
  display: table-cell;
  vertical-align: middle;
}
.video-wrapper {
  min-width: 40%;
  max-width: 500px;
  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%;
}

</style>
</head>

<body>
<div class="video-wrapper">
  <div class="tcell">
    <div class="ratio-keeper">
      <iframe class="video-frame" width="2" height="2" src="https://www.youtube.com/embed/M7lc1UVf-VE?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>
</body>
</html>

Just change the min and max width in .video-wrapper to control how big the video/iframe is displayed.

#17

Thank you for the clarification and the understanding, and I will use the code you provided as it seems to be better and way simpler, also, the correct code.

#18

I have a question:

With the code you provided, if I wanted to add space on the left and right side, how would I do that?

Can this be done?

Like seen here?

Right now it looks like this, with no space on either end.

#19

I think I figured it out, I would either change one of these to produce that.

html,
body {
	padding: 0;
	margin: 0;
#20

How about just opening the window a little wider or making the window a little shorter without changing PaulOB's code.

#21

It still stays attached to the browser.

Both left and right side.