如何嵌入具有响应式设计的vimeo视频

Question

如何嵌入具有响应式设计的vimeo视频

Jon*_*jie 8 video vimeo responsive-design

我在互联网上做了很多研究,但这个问题并不完全相同.我想使用<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;
}

Run Code Online (Sandbox Code Playgroud)

<div class="video-responsive">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
</div>

Run Code Online (Sandbox Code Playgroud)

但是,如果你有一个大屏幕,它也会变大,这看起来不太好.我只是想让它缩小不超过提供的width和height.

Answer 1

Del*_*ain 8

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

.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%; 
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Jos*_*ley 7

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

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

HTML

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

如果你想控制height，那么你可以只改变width你的.video-responsive容器。

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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 3

Ric*_*rdo 6

这对我有用。我用过引导

<!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>

Run Code Online (Sandbox Code Playgroud)

我不明白加载整个 bootstrap CSS 库是最受接受的解决方案。我认为这个问题是在寻求一个通用的 CSS 解决方案。 (2认同)

Answer 4

小智 2

在媒体查询中添加 css 以适应大尺寸屏幕，例如

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，5 月前
查看次数：	4070 次
最近记录：	7 年，3 月前