Centering a YouTube video in the viewport

asasass 2018-04-17 08:15:42 UTC #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/

TechnoBear 2018-04-17 08:28:36 UTC #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.

asasass 2018-04-17 08:29:24 UTC #3

It's not showing.

It's not visible.

It should be viewable.

TechnoBear 2018-04-17 08:32:07 UTC #4

Thank you.

asasass 2018-04-17 08:33:30 UTC #5

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

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

TechnoBear 2018-04-17 09:19:46 UTC #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.

asasass 2018-04-17 09:28:19 UTC #7

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

TechnoBear 2018-04-17 09:47:53 UTC #8

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

PaulOB 2018-04-17 12:51:20 UTC #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>

asasass 2018-04-17 15:48:43 UTC #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>

PaulOB 2018-04-17 20:43:28 UTC #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.

asasass 2018-04-17 23:21:02 UTC #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:

asasass 2018-04-18 02:34:01 UTC #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>

asasass 2018-04-18 02:51:45 UTC #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>

PaulOB 2018-04-18 07:44:25 UTC #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.

asasass 2018-04-18 18:04:11 UTC #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.

asasass 2018-04-18 19:51:12 UTC #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.

asasass 2018-04-18 20:01:26 UTC #19

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

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

ronpat 2018-04-18 22:00:18 UTC #20

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

asasass 2018-04-18 22:44:13 UTC #21

It still stays attached to the browser.

Both left and right side.

ThemesPodcastArticlesPremium