Question

尝试在某种意义上实现英雄背景视频。 HTML5视频并非真正的选择，因为我们正在努力确保为客户提供易用性。

Iframe必须在任何尺寸（即100vw / 100vh）上缩放并填充整个设备的整个视口。我发现的最佳解决方案是将高度/宽度设置为300％左右，以便在缩放时填充视口。显而易见的另一个缺点是，部分视频被删除了，我们并不是真正想要的。

另一个限制是该解决方案必须适用于vimeo视频和视频。 youtube，从我发现它们看起来有点不同的程度。

任何想法都会有所帮助。

Answer 1

这是一个HTML5解决方案：

＆＃13;

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

＆＃13;

<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
    <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
    <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>

＆＃13;

代码来自：http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

Codepen：https://codepen.io/dudleystorey/pen/knqyK

YouTube视频：

＆＃13;

.video-background {
    background: #000;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -99;
}
.video-foreground,
.video-background iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
#vidtop-content {
    top: 0;
}

@media (min-aspect-ratio: 16/9) {
    .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .video-foreground { width: 300%; left: -100%; }
}

＆＃13;

<div class="video-background">
    <div class="video-foreground">
        <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?
controls=0&amp;showinfo=0&amp;rel=0&autoplay=1&amp;loop=1
&amp;playlist=W0LHTWG-UmQ" allowfullscreen></iframe>
    </div>
</div>

＆＃13;

代码来自： http://thenewcode.com/500/Use-YouTube-Videos-as-Fullscreen-Web-Page-Backgrounds

Codepen：https://codepen.io/dudleystorey/pen/PZyMrd

全屏幕iframe背景视频

1 个答案: