Question

我在互联网上做了很多研究，但这个问题并不完全相同。我想使用<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="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
</div>

但是如果你有一个大屏幕，它也会变大，而且看起来并不好看。我只是希望它缩小不超过提供的width和height。

Answer 1

这对我有用。我用过bootstrap

＆＃13;

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

＆＃13;

Answer 2

@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 add然后尝试

Answer 3

在大尺寸屏幕的媒体查询中添加css，如

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

Answer 4

这是Bootstrap的一个技巧，可以创建保持宽高比的响应元素。在这个例子中，我将使用16：9作为视频对象，但我用它来制作圆形，正方形和各种形状。

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

HTML

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

::before元素值得关注，因为它确实使得这项工作成为可能。更改填充顶部将更改宽高比，即16:9 = 9 / 16 = 56.25%

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

如果您想控制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;
}

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

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

Answer 7

如果您想要一个始终保持视频播放器宽高比的自适应视频，那么您所做的是正确的。

对于你在大分辨率下不断成长的观点，你可以用以下方法解决这个问题：

媒体查询 为大屏幕添加媒体查询，以便您可以按照之前的答案https://stackoverflow.com/a/49767577/1993956

中的建议减少视频的宽高比

<强>最大宽度另一种方法是，如果您关心播放器的宽高比，则为视频容器添加最大宽度。

import { HttpClientModule, /* other http imports */ } from "@angular/common/http";

@NgModule({
    // ...other declarations, providers, entryComponents, etc.
    imports: [
        HttpClientModule,
        // ...some other imports
    ],
})
export class AppModule { }

以下是一个示例：https://codepen.io/jaireina/pen/YLWKvp

希望有所帮助。

Answer 8

你必须为它提供媒体查询，无论你决定最大尺寸，只需写入媒体w.r.t决定最大尺寸。就像我已经为屏幕尺寸写了css媒体查询，其最小宽度为1200px

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

我希望这能解决你的问题

Answer 9

我将本页的解决方案用于Vimeo，并且有效： http://embedresponsively.com

他们还具有相同的解决方案，用于以响应方式嵌入YouTube，Dailymotion，Google Maps，Getty Images等。您只需将CSS调整为您的项目，希望该站点可以使它保持最新状态以获取新版本。

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

9 个答案:

HTML

CSS