您如何强制HTML5 iframeYouTube视频居中对齐,并最终使用CSS3 HTML覆盖全屏窗口背景?
iframe
例如“ paypal.it ”首页背景或“ unity3d.com/5 ”顶部视频,作为iframe youtube视频。所述iframe盖全屏(变焦)和覆盖所有的宽度和高度,当重新大小的窗口。它调整大小以保持100%最小宽度缩放高度或100%最小高度缩放宽度。
使用iframeHTML5和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帮助有所帮助。
对于真正的全屏解决方案,可以这样实现:
的HTML
<div class="video-background"> <div class="video-foreground"> <iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe> </div> </div>
的CSS
* { box-sizing: border-box; } .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; } @media (min-aspect-ratio: 16/9) { .video-foreground { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video-foreground { width: 300%; left: -100%; } } @media all and (max-width: 600px) { .vid-info { width: 50%; padding: .5rem; } .vid-info h1 { margin-bottom: .2rem; } } @media all and (max-width: 500px) { .vid-info .acronym { display: none; } }
它不是完美的,例如,不能在极端的容器长宽比下很好地工作,但是在大多数情况下都做得很好。