【问题标题】: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>

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

【问题讨论】:

    标签: 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>

    【讨论】:

    • 嗨,里卡多。稍加修饰,这是可行的。但是,视频现在不在中心,而是与左侧对齐。我尝试使用&lt;center&gt;/margin: auto,但没有任何改变。
    • 这很奇怪,因为我在我的服务器上进行了测试并在中心查看...你把边距中心放在哪里?
    • 是的,确实。这假设现在可以工作,但没有。我将 div (iframe 的父级) 包裹在 &lt;div style="margin: auto;"&gt; 中。
    • 我不明白如何加载整个引导 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 &gt; 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;
        }
      }
      

      希望这能解决你的问题

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-07-23
        • 2016-06-04
        • 1970-01-01
        • 1970-01-01
        • 2015-10-25
        • 2021-10-07
        相关资源
        最近更新 更多