【问题标题】:How can I fit displayed video on div background?如何在 div 背景上显示视频?
【发布时间】:2017-02-12 15:46:21
【问题描述】:

有人可以帮我把视频放在网站背景上吗?视频源来自 Vimeo ...我使用 iframe 将视频设置为 src

<iframe src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

你可以在图片上看到我需要的状态

【问题讨论】:

  • 确保黑条不是视频本身的一部分。

标签: javascript css html iframe vimeo


【解决方案1】:

给iframe标签自己的类,放到父容器中,像这样。

<div class="container">
    <iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

然后使用 CSS 转换放大视频,将容器宽度设置为 100%,高度设置为 500px,并隐藏溢出。

.vid{
    transform: scale(2.5);
}

.container{
    width: 100%;
    height: 500px;
    overflow: hidden;
}

并将溢出隐藏在这个“容器”div 将要位于的任何对象上。

【讨论】:

    【解决方案2】:

    该背景似乎是视频的一部分。您可以更改宽度以切断黑色背景,如本例所示。 width:93%https://jsfiddle.net/ps96r3ub/

    "https://player.vimeo.com/video/45628635?loop=1&background=1" width="93%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

    【讨论】:

    • 但我需要完整网站宽度和固定高度的视频...因此我需要缩放视频并填充它
    • 左右区域似乎是视频本身的一部分,可以使用 transform: scale(1.133, 1);在框架上拉伸视频,因此您看不到黑色背景,因为容器将其切断,或者只是改变宽度以像以前一样将其切断。这个差距在源这里player.vimeo.com/video/45628635?loop=1&background=1
    【解决方案3】:

    来自 Swordys 代码...检查这个 sn-p...

    .container{
      width:100%;
      height:500px;
      overflow:hidden;
        }
    .vid{
     transform: scale(2.5);
    }
    <div class="container">
    <iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="80%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

    【讨论】:

    • 这是我的实际状态人......我需要删除黑色边框并缩放内容以适应具有固定高度的网站宽度
    猜你喜欢
    • 2019-06-16
    • 1970-01-01
    • 1970-01-01
    • 2020-08-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多