Question

我正在为我的游戏的目标网页制作移动版本。我有一个youtube预告片，它应该根据网站大小进行扩展，同时保持居中。但事实并非如此。通过缩小浏览器大小，您可以在我的网站http://www.zatackaonline.net上看到自己。

我尝试使用我在StackOverflow上另一篇文章中找到的代码。这段代码将填满我不想要的整个屏幕。有什么方法可以将它缩小到50％的大小，同时保持嵌入的iFrame视频位置居中？

/*main.css*/

.video-container { 
position: relative; /* keeps the aspect ratio */ 
padding-bottom: 56%; /* fine tunes the video positioning */ 
padding-top: 60px; 
overflow: hidden;
}

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

}

Answer 1

首先，要在不更改代码的情况下将iframe设置为正确的宽度，您可以使用vw单元（此处为视口单元的some info）：

#contentframe iframe{
    width:50vw;
}

其次，要将容器居中，请将margin-left和margin-right值设置为auto，并指定其宽度：

#contentframe{
    /* left:294px */ // REMOVE
    width: 50vw;
    margin-left:auto;
    margin-right:auto;
}

请记住将所有这些包装在正确的媒体查询中，它应该可以解决问题！

编辑关于left:294px：我发现在响应式网站中尝试使用这些绝对值时会感到困惑，也许尽可能使用百分比值会让事情变得更轻松。

编辑2 这是一个工作小提琴：http://jsfiddle.net/EB57H/1/

修改3 ~~要在调整大小时保持比率，请从width来源中删除height和iframe属性：http://jsfiddle.net/EB57H/2/~~

<击>
<iframe width=560" height="315" src="... // BECOMES <iframe src="...

这不行，这里是another not very elegant solution。

Answer 2

而不是：

left:594px;

使用：

text-align:center;

在contentframe css样式

中

对于自适应大小，请从<iframe>中删除高度和宽度，然后将css规则width:80%添加到iframe

Answer 3

我混合了所有答案，以构建具有居中，响应和最大高度的优化解决方案，以避免视频在宽屏上占据所有页面。

CSS：

.video-container {
  width: 70vw;
  max-width: 560px ;
  margin:auto;
}

.video-container iframe,
.video-container object,
.video-container embed {
  width: 70vw;
  max-width: 560px ;
  height:calc((9/16)*70vw);
  max-height:calc((9/16)*560px);
}

HTML：

  <div class="video-container">
    <iframe
      width="853"
      height="480"
      src="https://www.youtube.com/embed/4JkIs37a2JE"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div>

如何在保持响应的同时将YouTube视频居中？

3 个答案: