Question

我正在尝试创建一个与此https://www.netflix.com/in/title/80189221类似的网站。我想知道如何在页面中间获取视频。
我的代码看起来像这样。

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

我也尝试过：

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

但是似乎没有任何作用。

Answer 1

将display:block;添加到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>

Answer 2

我认为这是将任何内容居中的简单方法

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>

如何在页面中间获取视频？

2 个答案: