如何将我的 iFrame 视频居中(HTML、CSS)
Posted
技术标签:
【中文标题】如何将我的 iFrame 视频居中(HTML、CSS)【英文标题】:How to center my iFrame video (HTML, CSS) 【发布时间】:2018-06-04 01:03:27 【问题描述】:我是 html 和 CSS 编码的新手,现在遇到了挑战。 我目前正在寻找如何将 iFrame 视频置于页面中心的解决方案。
HTML
<section id="video">
<div class="row">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/rXuWb0RXfEI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
CSS:
.video-container
position:relative;
padding-bottom:56.25%;
padding-top:30px;
margin-top: 100px;
height:0;
overflow:hidden;
.video-container iframe,
.video-container object,
.video-container embed
position: absolute;
width:80%;
height:80%;
.row
text-align: center;
希望有人能帮我解决这个问题...
【问题讨论】:
Best way to center a <div> on a page vertically and horizontally?的可能重复 这可能会有所帮助; ***.com/questions/8366957/… Vertically center responsive iframe的可能重复 【参考方案1】:.videoWrapper
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
.videoWrapper iframe
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe src="https://www.youtube.com/embed/wmgWITMWcmE?rel=0&controls=0&showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
【讨论】:
我们快到了...我想要的不是 100% 的宽度,而是 80%。如果我使用 80%,视频将出现在页面的左侧而不是中心。【参考方案2】:试着改变这个:
.video-container iframe,
.video-container object,
.video-container embed
position: absolute;
top: 10%;
left: 30%;
【讨论】:
不幸的是,它不起作用。这样我只能得到 1/4 的视频。【参考方案3】:您实际上可以省略 css 的下部并使用以下内容:
.video-container
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
margin-top: 100px;
height: 0;
overflow: hidden;
width: 80%;
height: 80%;
margin: 0 auto;
【讨论】:
不幸的是,这不起作用。问题是如果我使用这个 CSS,我只能看到 1/8 的视频。 哦,对了,你还必须像这样正确设置 iframe 宽度:<iframe width="100%" height="480" src="https://www.youtube.com/embed/rXuWb0RXfEI" frameborder="0" allowfullscreen></iframe>
以上是关于如何将我的 iFrame 视频居中(HTML、CSS)的主要内容,如果未能解决你的问题,请参考以下文章