如何适应div背景上显示的视频？

问题描述：

有人可以帮助我适应网站背景上的视频？视频源来自Vimeo的......我用iframe，我将视频设置为SRC如何适应div背景上显示的视频？

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

我需要的状态，你可以在图像看到

确保黑网吧不是视频本身的一部分。 – MartijnK

答

给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变换和得到的500像素100％，高度容器宽度和隐藏溢出向上扩展的视频。

.vid{ 
    transform: scale(2.5); 
} 

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

并把溢出隐藏任何对象上这个“容器” DIV将位于。

谢谢!!作品:) –

没问题，祝你好运！ – Swordys

答

这背景似乎是视频的一部分。你可以改变宽度来切断黑色背景，就像这个例子。 width:93%https://jsfiddle.net/ps96r3ub/

“https://player.vimeo.com/video/45628635?loop=1&background=1” 宽度= “93％” HEIGHT = “500px的” FRAMEBORDER = “0” webkitallowfullscreen mozallowfullscreen的allowFullScreen>

但我需要固定高度的完整网站宽度上的视频...因此，我需要缩放视频并填充它 –

左右区域似乎是视频本身的一部分，您可以使用transform：scale （1.133,1）;在画面上拉伸视频，以便您看不到黑色背景，因为容器会将其切断，或者只是改变宽度以像以前一样切断它。这里的差距是在这里的源https://player.vimeo.com/video/45628635?loop=1&background=1 – mthomp

答

从Swordys代码...选中此片断...

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

这是我的实际状态的人...我需要删除黑色边框和缩放内容，以适应网站的宽度与固定高度 –

如何适应div背景上显示的视频？

相关推荐