Full explanatory article on my site.
A Pen by Dudley Storey on CodePen.
<div class="video-background"> | |
<div class="video-foreground"> | |
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe> | |
</div> | |
</div> | |
<div id="vidtop-content"> | |
<div class="vid-info"> | |
<h1>YouTube Fullscreen Background Demo</h1> | |
<p>The International Space Station orbits the Earth every 92 minutes, with its crew seeing a sunrise 15 times a day. It exists as a scientific, educational, and engineering platform in low orbit, 330 to 435 kilometres above the Earth. | |
<p>Original timelapse by Riccardo Rossi (ISAA), used under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Raw photos courtesy of http://eol.jsc.nasa.gov/ | |
<a href="/500/Use-YouTube-Videos-as-Fullscreen-Web-Page-Backgrounds">Full article</a> | |
</div> | |
</div> |
* { 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; | |
} | |
#vidtop-content { | |
top: 0; | |
color: #fff; | |
} | |
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; } | |
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; } | |
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; } | |
@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; } | |
} |