对于真正的全屏解决方案,可以这样实现:
的HTML
<div > <div > <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; }}它不是完美的,例如,不能在极端的容器长宽比下很好地工作,但是在大多数情况下都做得很好。



