繁体   English   中英

背景/英雄视频未调整大小

Background/Hero video not resizing

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试创建一个以视频为背景的页面。 我已经尝试过多次尝试来实现这一点,但无论我做什么,视频总是看起来像图片一样。 它根本不会调整大小。

有问题的图片

 body { margin: 0; }.hero-section { position: relative; height: 85vh; width: 100%; display: grid; place-content: center; } video{ position: absolute; object-fit: cover; width: 100%; height: 100%; z-index: -1; } @media screen and (min-width: 900px) {.hero-section { height: 100vh; } }
 <,DOCTYPE html> <html> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width. initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Document</title> <link rel='stylesheet' href='styles.css'> </head> <body> <div class='hero section'> <video autoplay muted loop playinline src='images/uhoh.mp4'></video> </div> </body> </html> </html>

1 个回复

如果将高度设置为自动,它会随宽度缩放。

 body { margin: 0; }.hero-section { position: relative; height: 85vh; width: 100%; display: grid; } video { position: absolute; object-fit: cover; width: 100%; height: auto; z-index: -1; } @media screen and (min-width: 900px) {.hero-section { height: 100vh; } }
 <,DOCTYPE html> <html> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width. initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Document</title> <link rel='stylesheet' href='styles:css'> </head> <body> <div class='hero section'> <video controls autoplay muted loop playinline src='https.//sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4'></video> <h1>Hello world</h1> </div> </body> </html> </html>

1 全宽YouTube嵌入英雄背景视频

我正在寻找一种HTML和CSS方式将此嵌入视频显示为75vh高的英雄背景。 目前,iFrame的width: 100% , height: 75vh但其自身中的图像并未覆盖整个标头宽度。 实际上,我需要它表现得像 background-size: cover 属性 。 这是一个 ...

2 JQuery + HTML 背景视频调整大小

Jquery 非常新手。 我的网站有一个背景视频,但它只有在屏幕大于 1024 时才会打开。有一些 Jquery 用于它。 我在这里上传了完整的 Jquery 和 html 部分https://codepen.io/griffinsonic/pen/xxRWVev虽然它的 JS 格式混乱, if( ...

5 需要帮助在背景视频下添加内容(英雄部分)

这是我第一次在这里提出问题,并且在使用 adobe XD 进行设计后实际上开始从头开始制作我自己的网站。 所以基本上我得到了这个带有背景视频和一些文字的英雄部分,我想在下面添加内容,但是当我尝试时,内容一直直接出现在视频前面。 我很确定我的代码是错误的,很抱歉写得不好,但我想理解,这样我才能变得更 ...

6 如何获得全屏背景视频英雄?

因此,我有一个正在处理的网站,希望将其加载到完整的背景视频中,并在其上方放置标题。 但是,我也希望用户能够滚动到页面的其他全屏部分。 我如何使它工作。 这是Codepen链接http://codepen.io/anon/pen/rskjF 关于div是我要讲的下一部分。 它应该 ...

7 CSS 定位/调整 html5 视频背景

嘿,你们所有的互联网巫师,过去几天我一直在努力解决这个问题。 我正在尝试包含全屏视频背景,但似乎遇到了障碍。 下面是我试图完成的图像。 我尝试使用视频元素和 iframe。 当浏览器窗口调整大小时,我无法让下面的 div 总是嵌套在下面。 非常感谢任何帮助或指示。 我得到的最接近的是最小宽度 ...

8 视频背景无法调整为窗口全高

我的视频背景的实现存在两个问题: 1)调整大小后,我的视频背景不会占据屏幕的整个高度。 修复它的最佳方法是什么。 2)我无法点击“返回网站”按钮。 我该如何解决? HTML CSS ...

2018-02-24 12:52:03 2 131   html/ css
10 Vimeo背景的响应英雄

我正在尝试复制background-size: cover; 在我的网站的“英雄”部分添加了Vimeo视频。 我可以很好地观看视频,但在小屏幕上无法正确缩小视频。 这是我目前所拥有的: HTML: CSS: https://jsfiddle.net/a7j0rbm ...

2019-05-28 11:25:32 2 60   html/ css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM