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

【问题标题】：How can I center a youtube video while keeping it responsive?如何在保持响应的同时将 youtube 视频居中？
【发布时间】：2014-09-19 14:39:57
【问题描述】：

我正在为我的游戏着陆页制作移动版本。我有一个 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%;

}

【问题讨论】：

Shrink a Youtube video to responsive width的可能重复

标签： javascript html css youtube

【解决方案1】：

代替：

left:594px;

使用：

text-align:center;

contentframecss 样式

对于响应式大小，从 <iframe> 中删除高度和宽度，并将 css 规则 width:80% 添加到 iframe 中

【讨论】：

我照你说的做了，并添加了这个：
。这将使它居中，但视频不会调整大小。我做错了吗？

【解决方案2】：

首先，要在不过多更改代码的情况下使 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 ~~要在调整大小时保持比例，请从 iframe 中删除 width 和 height 属性来源：http://jsfiddle.net/EB57H/2/~~

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

效果不好，这里是another not very elegant solution。

【讨论】：

谢谢，但是如何在调整大小时使视频的高度也缩放？
我通过更多帮助更新了我的答案。如果您的视频是动态嵌入的，还有另一种技术here
谢谢，如果我想要更大的话.. 我该怎么做呢？ :)
谢谢，我修好了。刚刚将 vw 更改为 60 和 60 :)
有了这个，您可以通过编程设置 iframe 的高度：jsfiddle.net/EB57H/3

【解决方案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>

【讨论】：