提问者:小点点

如何将嵌入的youtube iframe居中?


我正在做一个产品登陆页面项目,我不知道如何将iframe youtube嵌入式视频居中。 我正在尝试将此添加到我的。css中

我试过使用保证金:自动自动自动自动; 我有点卡住了,谢谢。。。

null

    header{
text-align: center;
font-family: serif;
font-size: 50px;
margin-top: 30px;
}

    #header-img{
    display: block;
    margin-left: auto;
     margin-right: auto;
     margin-top: 30px;
    }
  
    #header{
    

        

    }

    #video{
        margin: auto auto auto auto;
    }
<body>
    <header id="header">SCHIFRIN'S SPROCKETS
    <nav id:="nav-bar">
        <ul>
            <li><a class="nav-link" href="#">LINK 1</a></li>

            <li><a class="nav-link" href="#">LINK 2</a></li>

            <li><a class="nav-link" href="#">LINK 3</a></li>
        </ul>
    </nav>

    </header>

    <img src="./logo.png" alt="" id="header-img">

    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    
</body>

null


共3个答案

匿名用户

null

 #wrapper {
   text-align:center;
 }
#video{
   margin: auto;
}
<div id="wrapper">
   <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div> 

匿名用户

在div中换行iframe

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

并将css flexbox添加到该div

.frame{
    display: flex; 
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

仅限宽度和高度,如果不需要也可以删除它们。 这应该以x和y轴为中心

匿名用户

您可以将iframe包装在一个div中,并使用text-align:center这个div将内容居中。 在youtube iframe中添加居中标题也很好。

如果要在页面上嵌入多个IFRAM,则应使用class属性而不是id属性。

null

.videoWrapper{
    text-align: center;
}
<div class="videoWrapper">
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>