How to add YouTube video as background using HTML

Posted by admin on Wed, 01/17/2018 - 10:46

Code snippet to add YouTube video as a background for you HTML tag.

Here goes your HTML:

<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 background here!</h1>
  </div>
</div>

Here is your CSS (most of that just for beauty):

* { 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; }
}
Tags: 
html
youtube
video
×

Hey! Don't miss a new cool stuff!

Comments

04/29/2020 - 15:25
enetibliole (not verified)

http://onlinecasinopc.com/ free slots games online slot games big fish casino free casino games

04/29/2020 - 18:46
inticleni (not verified)

vegas slots online [url=http://playcasinosw.com/ ]free slots [/url] casino play slot games

04/29/2020 - 18:49
inticleni (not verified)

vegas slots online [url=http://playcasinosw.com/ ]free slots [/url] casino play slot games

04/29/2020 - 21:59
enetibliole (not verified)

http://onlinecasinopc.com/ free casino free casino slot games play online casino vegas slots online

04/29/2020 - 22:03
enetibliole (not verified)

http://onlinecasinopc.com/ free casino free casino slot games play online casino vegas slots online

04/30/2020 - 01:39
inticleni (not verified)

free casino games slots for real money casino games

04/30/2020 - 01:41
inticleni (not verified)

free casino games slots for real money casino games

04/30/2020 - 04:51
enetibliole (not verified)

casino bonus codes slots free free casino games online cashman casino slots http://onlinecasinopc.com/ - free casino games online

04/30/2020 - 08:38
inticleni (not verified)

free casino games online play online casino free casino games

04/30/2020 - 11:38
enetibliole (not verified)

real casino slots http://onlinecasinopc.com/ - free slots online casino gambling play casino casino online

04/30/2020 - 15:25
inticleni (not verified)

online casinos vegas slots online slots for real money

04/30/2020 - 20:52
enetibliole (not verified)

http://casinoplaysw.com/ cashman casino slots http://casinoplaysw.com/ - online slots slots games free

04/30/2020 - 21:52
inticleni (not verified)

best online casino http://playcasinosw.com/ - casino slots world class casino slots play casino

05/01/2020 - 03:26
enetibliole (not verified)

http://casinoplaysw.com/ real casino slots casino bonus codes play slots online free casino games online

05/01/2020 - 03:32
enetibliole (not verified)

http://casinoplaysw.com/ real casino slots casino bonus codes play slots online free casino games online

05/01/2020 - 03:38
enetibliole (not verified)

http://casinoplaysw.com/ real casino slots casino bonus codes play slots online free casino games online

05/01/2020 - 03:43
enetibliole (not verified)

http://casinoplaysw.com/ real casino slots casino bonus codes play slots online free casino games online

05/01/2020 - 04:24
inticleni (not verified)

online casino slots http://playcasinosw.com/ slots games free slots games casino online

05/01/2020 - 10:19
enetibliole (not verified)

free casino games http://casinoplaysw.com/ - casino slots play slots online slots games

05/01/2020 - 10:21
enetibliole (not verified)

free casino games http://casinoplaysw.com/ - casino slots play slots online slots games

05/01/2020 - 11:18
inticleni (not verified)

http://playcasinosw.com/ online casino real money casino bonus codes online casino games free casino games online

05/01/2020 - 17:02
enetibliole (not verified)

casino play http://casinoplaysw.com/ - cashman casino slots casino online slots slots online

05/01/2020 - 17:04
enetibliole (not verified)

casino play http://casinoplaysw.com/ - cashman casino slots casino online slots slots online

05/01/2020 - 21:40
inticleni (not verified)

gold fish casino slots casino real money play slots world class casino slots

05/01/2020 - 21:42
inticleni (not verified)

gold fish casino slots casino real money play slots world class casino slots

05/02/2020 - 03:35
enetibliole (not verified)

slots online play slots online casino gambling slots games free

05/02/2020 - 03:36
enetibliole (not verified)

slots online play slots online casino gambling slots games free

05/02/2020 - 03:55
inticleni (not verified)

casino bonus codes http://casinoslotspc.com/ casino real money online casino games free slots

05/02/2020 - 03:58
inticleni (not verified)

casino bonus codes http://casinoslotspc.com/ casino real money online casino games free slots

05/02/2020 - 10:08
enetibliole (not verified)

online casino http://casinoplaysw.com/ - online casino gambling online gambling best online casino

05/02/2020 - 10:10
enetibliole (not verified)

online casino http://casinoplaysw.com/ - online casino gambling online gambling best online casino

05/02/2020 - 10:13
enetibliole (not verified)

online casino http://casinoplaysw.com/ - online casino gambling online gambling best online casino

05/02/2020 - 10:22
inticleni (not verified)

slots for real money vegas casino slots slot games vegas slots online http://casinoslotspc.com/ - slots for real money

05/02/2020 - 10:26
enetibliole (not verified)

online casino http://casinoplaysw.com/ - online casino gambling online gambling best online casino

05/02/2020 - 17:02
enetibliole (not verified)

vegas casino slots online gambling slots for real money free online slots http://casinoplaysw.com/ - casino online slots

05/02/2020 - 17:12
enetibliole (not verified)

vegas casino slots online gambling slots for real money free online slots http://casinoplaysw.com/ - casino online slots

05/02/2020 - 17:17
enetibliole (not verified)

vegas casino slots online gambling slots for real money free online slots http://casinoplaysw.com/ - casino online slots

05/02/2020 - 17:18
inticleni (not verified)

online slots http://casinoslotspc.com/ - vegas casino slots free online slots play online casino

05/02/2020 - 17:25
inticleni (not verified)

online slots http://casinoslotspc.com/ - vegas casino slots free online slots play online casino

05/02/2020 - 17:26
enetibliole (not verified)

vegas casino slots online gambling slots for real money free online slots http://casinoplaysw.com/ - casino online slots

05/02/2020 - 17:28
enetibliole (not verified)

vegas casino slots online gambling slots for real money free online slots http://casinoplaysw.com/ - casino online slots

05/02/2020 - 23:34
inticleni (not verified)

slots online casino real money slots for real money casino games http://casinoslotspc.com/ - play slots

05/02/2020 - 23:41
inticleni (not verified)

slots online casino real money slots for real money casino games http://casinoslotspc.com/ - play slots

05/02/2020 - 23:44
inticleni (not verified)

slots online casino real money slots for real money casino games http://casinoslotspc.com/ - play slots

05/02/2020 - 23:53
enetibliole (not verified)

slots games http://casinoplaysw.com/ cashman casino slots casino real money slots online

05/03/2020 - 05:55
inticleni (not verified)

http://casinoslotspc.com/ online gambling http://casinoslotspc.com/ - real casino slots free casino slot games

05/03/2020 - 06:50
enetibliole (not verified)

http://casinoplaysw.com/ slots games big fish casino play casino online casino bonus

05/03/2020 - 06:52
enetibliole (not verified)

http://casinoplaysw.com/ slots games big fish casino play casino online casino bonus

05/03/2020 - 12:43
inticleni (not verified)

casino online http://casinoslotspc.com/ vegas slots online free casino games online casino games

05/03/2020 - 12:46
inticleni (not verified)

casino online http://casinoslotspc.com/ vegas slots online free casino games online casino games

Add new comment