如何使用响应式设计嵌入 vimeo 视频答案

【问题标题】：How to embed vimeo video with responsive design如何使用响应式设计嵌入 vimeo 视频
【发布时间】：2018-09-20 18:07:57
【问题描述】：

我在互联网上做了很多研究，但这个问题并不完全相同。我想使用 <iframe> 标签嵌入来自 vimeo 的视频。我也试过这段代码：

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

<div class="video-responsive">
    <iframe width="420" height="315" src="https://www.vimeo.com" frameborder="0" allowfullscreen></iframe>
</div>

但如果你有一个大屏幕，它也会变得更大，这看起来不太好。我只希望它收缩不大于提供的width 和height。

【问题讨论】：

标签： video responsive-design vimeo

【解决方案1】：

这对我有用。我使用引导程序

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
      </div>
    </div>

  </body>
</html>

【讨论】：

嗨，里卡多。稍加修饰，这是可行的。但是，视频现在不在中心，而是与左侧对齐。我尝试使用<center>/margin: auto，但没有任何改变。
这很奇怪，因为我在我的服务器上进行了测试并在中心查看...你把边距中心放在哪里？
是的，确实。这假设现在可以工作，但没有。我将 div （iframe 的父级） 包裹在 <div style="margin: auto;"> 中。
我不明白如何加载整个引导 CSS 库是最被接受的解决方案。我认为问题是要求一个通用的 CSS 解决方案。
问题是 Vimeo 而不是 YouTube。

【解决方案2】：

这是来自 Bootstrap 的一个技巧，用于创建保持其纵横比的响应式元素。在本例中，我将使用 16:9，因为它是一个视频对象，但我已经使用它来制作圆形、正方形和各种形状。

此技术使用容器和::before 元素。

HTML

<div class="video-responsive">
  <iframe class="video-responsive-item" src="..."></iframe>
</div>

::before 元素值得关注，因为它确实是这项工作的原因。改变 padding-top 会改变你的纵横比，即16:9 = 9 / 16 = 56.25%

.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

如果您想控制height，那么您只需更改.video-responsive 容器的width。

CSS

.video-responsive {
  position: relative;
  display: block;
  width: 300px;
  overflow: hidden;
}


.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.video-responsive-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

【讨论】：

效果很好，如果您从 Cms 之类的地方嵌入视频，请使用：video-responsive > iframe

【解决方案3】：

试试这个，它适用于任何类型的媒体设备。

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; overflow: hidden; 
  max-width: 100%; 
} 

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

<div class='embed-container'>
  <iframe src='https://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

【讨论】：

几乎是正确的，但如果你缩小它，它会剪切视频。

【解决方案4】：

@media screen and (min-width: 767px) {
  .video-responsive{
     height: 360px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 320px) {
  .video-responsive{
     height: 300px;
     padding-bottom: 0;
   }
}

删除这个css添加然后尝试

【讨论】：

你的答案太多了。只需编辑您的一个答案，然后更新它。我不知道更新的是什么。

【解决方案5】：

在媒体查询中为大尺寸屏幕添加 css

@media only screen and (min-width: 1600px) {
  .video-responsive {
    padding-bottom: 40%;// whatever you want
    - or -
    give height to this div
  }
}

【讨论】：

可以加个sn-p吗？

【解决方案6】：

如果您想要一个始终保持视频播放器纵横比的响应式视频，那么您的做法是正确的。

就您的观点而言，它在大分辨率下不断增长，您可以通过以下方式解决此问题：

媒体查询 为大屏幕添加媒体查询，以便您可以按照先前答案之一https://stackoverflow.com/a/49767577/1993956 中的建议降低视频的宽高比@

最大宽度 如果您确实关心播放器的纵横比，另一种方法是为您的视频容器添加一个最大宽度。

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    max-width: 800px;
    margin: 0 auto; 
}

这是一个例子：https://codepen.io/jaireina/pen/YLWKvp

希望对您有所帮助。

【讨论】：

几乎正确，但填充破坏了底部的内容。如果我删除填充，视频不会显示。
我明白你在说什么。由于某种原因，它需要一个包装器。查看更新的示例codepen.io/jaireina/pen/YLWKvp

【解决方案7】：

我将此页面中的解决方案用于 Vimeo，它有效： http://embedresponsively.com

他们也有同样的解决方案，用于响应式嵌入 YouTube、Dailymotion、Google Maps、Getty Images 等。您只需将 css 调整为您的项目，希望此站点将保持更新以适应新版本。

【讨论】：

【解决方案8】：

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media screen and (min-width: 1600px) {
  .video-responsive{
     height: 480px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 767px) {
  .video-responsive{
     height: 360px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 320px) {
  .video-responsive{
     height: 300px;
     padding-bottom: 0;
   }
}

<div class="video-responsive">
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>
</div>

【讨论】：

它不工作。视频，尺码。并且在 sn-p 中只有黑色背景。

【解决方案9】：

您必须为其提供媒体查询，无论您决定的最大大小是多少，都只需编写媒体 w.r.t 决定的最大大小。就像我为最小宽度为 1200px 的屏幕尺寸编写了 css 媒体查询

@media screen and (min-width: 1200px) {
  .video-responsive{
    width: 1170px;
  }
}

希望这能解决你的问题

【讨论】：