Centering a YouTube video in the viewport

asasass · April 17, 2018, 8:15am

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:

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

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

Works:

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/

TechnoBear · April 17, 2018, 8:28am

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.

asasass · April 17, 2018, 8:29am

It’s not showing.

It’s not visible.

It should be viewable.

TechnoBear · April 17, 2018, 8:32am

Thank you.

asasass · April 17, 2018, 8:33am

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

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

TechnoBear · April 17, 2018, 9:19am

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.

asasass · April 17, 2018, 9:28am

In the middle of the screen:

TechnoBear · April 17, 2018, 9:47am

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

PaulOB · April 17, 2018, 12:51pm

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>

asasass · April 17, 2018, 3:48pm

How would I do this one?


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>

PaulOB · April 17, 2018, 8:43pm

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.

asasass · April 17, 2018, 11:21pm

How would I make this responsive?

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:

asasass · April 18, 2018, 2:34am

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?

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>

asasass · April 18, 2018, 2:51am

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?

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>

PaulOB · April 18, 2018, 7:44am

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.

asasass · April 18, 2018, 6:04pm

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.

asasass · April 18, 2018, 7:51pm

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.

asasass · April 18, 2018, 8:01pm

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

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

ronpat · April 18, 2018, 10:00pm

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

asasass · April 18, 2018, 10:44pm

It still stays attached to the browser.

Both left and right side.

Topic		Replies	Views
How would I center the text in the middle on here using only html? HTML & CSS	14	1955	May 7, 2017
What am I doing wrong here that the text isn't in the middle of the page? HTML & CSS	8	1046	December 8, 2017
How would I add text to the middle of the image? HTML & CSS	4	900	May 3, 2017
Centering a circle in a square HTML & CSS	15	27910	December 17, 2017
If I want the Square to be one size, and the Circle on top of that to be another size, how do I do that? HTML & CSS	20	3000	December 13, 2017

Related topics