How to get a video in the middle of a page?

Question

I'm trying to make a website which is similar to this https://www.netflix.com/in/title/80189221. I would like to know how to get the video in the middle of the page.
My code looks like this.

iframe {
    width:240px;
    height:160px;
    align: middle;
 }

I've also tried this:

iframe {
    width:240px;
    height:160px;
    margin-left: auto;
    margin-right: auto;
}

But nothing seems to be working.

add position: absolute; in the last iframe css, hope it'll work! — ElusiveCoder, Mar 05 '19 at 04:47

score 2 · Accepted Answer · edited Mar 05 '19 at 06:01

2

Add display:block; to the iframe

.ifrmae-holder {
    height: 100vh;
    position: relative;
}
iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
}

<div class="ifrmae-holder">
<iframe width="560" height="315" src="https://www.youtube.com/embed/E4n7BQkOQ_s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

edited Mar 05 '19 at 06:01

Dharmesh Vekariya

1,138
2
13
31

answered Mar 05 '19 at 04:49

Anuresh VP

607
6
19

Thanks, but I want it to be aligned at the middle of the page and not the centre. Something like this[link](https://www.netflix.com/in/title/80189221). – Fibonacci freak Mar 05 '19 at 05:07
@Fibonaccifreak should use `position` – Anuresh VP Mar 05 '19 at 05:15

Razib Hossain · Answer 2 · 2019-03-05T05:41:16.520

I think this is the easy way to center any content

js fiddle example here

.ifrmae-holder {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="ifrmae-holder">
<iframe width="300" height="250" src="https://www.youtube.com/embed/E4n7BQkOQ_s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

How to get a video in the middle of a page?

2 Answers2