Question

我想创建一个带有youtube视频的静态页面，根本没有内容。我需要页面中心底部的视频div而不滚动，没有高度和宽度提及{因为我正在使用响应式css}。我试过以下代码

HTML：

<div class="video-content">
  <div class="video-container"><iframe width="420" height="315" src="//www.youtube.com/embed/fMJ21v7mX7U" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

css：

.video-content
{
    width:45%;
    margin-left:auto;
    margin-right:auto;
}
.video-container {
    height:315px;
    background: #666;
    position: fixed;
    bottom:40px;
    width: 45%;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

提前感谢。

Answer 1

将.video-container宽度设置为100%。现在以对角线为中心对齐，移除position:absolute .video-container iframe并添加以下css

.video-container iframe {
    display:block;
    margin:0 auto;
}

要将视频设置在页面集bottom:0至.video-container

的底部

Answer 2

你应该使用！important与视频容器的高度和宽度来覆盖你的身高和宽度到ifram的高度和宽度。

.video-container iframe，.video-container object，.video-container 嵌入{ 位置：绝对; 顶部：0; 左：0; 宽度：100％！重要; 身高：100％！重要; }

div在底部中心没有滚动

2 个答案: