你如何使用 CSS3 HTML 最终 Java 强制 HTML5 iframe
YouTube 视频居中,覆盖全屏窗口背景?
例如“ paypal.it ”主页背景或“ unity3d.com/5 ”顶部视频,有 iframe youtube 视频。
iframe
覆盖全屏(缩放)并在调整窗口大小时覆盖所有宽度和高度。
它会调整大小,保持 100% min-width 缩放高度或 100% min-height 缩放宽度。
这个效果是如何用iframe
HTML5和CSS3实现的?
代码示例 HTML5
<div class="video" style="opacity: 1;">
<iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&html5=1" frameborder="0" style="height: 720px;">
</iframe>
</div>
代码 CSS3 HTML 最终 Java 帮助将不胜感激。
最佳答案
全尺寸 YouTube 视频,所有纵横比,仅 CSS
长话短说:DR - working fiddle
作为对@Hinrich 回答的更新/改进,我创建了一个适用于所有纵横比的纯 CSS 缩放器——甚至是极端情况。使用 vw
和 vh
设置 iframe 并使用 CSS transform
属性(相对于元素而不是父元素的偏移量)。
大多数浏览器(IE9+ 和所有常青浏览器 AFAIK)都支持 vw
和 vh
单位,以及 transform
,所以这应该适用于几乎所有浏览器,不需要 JavaScript。
.video-background {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 16/9) {
.video-background iframe {
/* height = 100 * (9 / 16) = 56.25 */
height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
.video-background iframe {
/* width = 100 / (9 / 16) = 177.777777 */
width: 177.78vh;
}
}
<div class="video-background">
<iframe src="https://www.youtube.com/embed/biWk-QLWY7U?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>
使用 CSS 变量
对于那些使用CSS变量的人,你也可以do this (fiddle) ,它允许您任意重用多个类名的大小:
:root {
--video-width: 100vw;
--video-height: 100vh;
}
@media (min-aspect-ratio: 16/9) {
:root {
--video-height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
:root {
--video-width: 177.78vh;
}
}
.video-background {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: var(--video-width);
height: var(--video-height);
transform: translate(-50%, -50%);
}
关于html - 使用 HTML5 CSS3 强制 iframe YouTube 视频居中并在后台完全覆盖屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24579785/