Created
September 10, 2018 18:57
-
-
Save whichbuffer/bf7b8dcc299bbe5555483e8d4bcb899b to your computer and use it in GitHub Desktop.
YouTube Fullscreen Background Dem
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <link rel="stylesheet" type="text/css" href="css/test.css"> <!-- css file --> | |
| </head> | |
| <div class="video-background"> | |
| <div class="video-foreground"> | |
| <iframe src="https://www.youtube.com/embed/TM6pwiNSKY8?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=TM6pwiNSKY8" frameborder="0" allowfullscreen ></iframe> | |
| </div> | |
| </div> | |
| <div id="vidtop-content"> | |
| <div class="vid-info"> | |
| <h1>YouTube Fullscreen Background Demo</h1> | |
| </div> | |
| </div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { 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; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment