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; }
}
×

Hey! Don't miss a new cool stuff!

Comments

enetibliole (not verified)

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

enetibliole (not verified)

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

inticleni (not verified)

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

inticleni (not verified)

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

enetibliole (not verified)

slots online play slots online casino gambling slots games free

enetibliole (not verified)

slots online play slots online casino gambling slots games free

inticleni (not verified)

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

inticleni (not verified)

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

enetibliole (not verified)

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

enetibliole (not verified)

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

enetibliole (not verified)

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

inticleni (not verified)

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

enetibliole (not verified)

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

enetibliole (not verified)

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

enetibliole (not verified)

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

enetibliole (not verified)

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

inticleni (not verified)

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

inticleni (not verified)

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

enetibliole (not verified)

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

enetibliole (not verified)

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

inticleni (not verified)

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

inticleni (not verified)

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

inticleni (not verified)

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

enetibliole (not verified)

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

inticleni (not verified)

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

enetibliole (not verified)

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

enetibliole (not verified)

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

inticleni (not verified)

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

inticleni (not verified)

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

enetibliole (not verified)

http://casinoplaysw.com/ best online casinos play casino online casino real money slots online

inticleni (not verified)

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

enetibliole (not verified)

http://casinogamespqr.com/ slots games free free online slots online casino real money online gambling

inticleni (not verified)

casino game no deposit casino gold fish casino slots casino blackjack http://casinoslotspc.com/ - play online casino

Buy cheap viagr... (not verified)

Hcxghv vzuaob online generic viagra Buy viagra australia

Buy cheap viagr... (not verified)

Hcxghv vzuaob online generic viagra Buy viagra australia

Buy cheap viagr... (not verified)

Hcxghv vzuaob online generic viagra Buy viagra australia

enetibliole (not verified)

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

inticleni (not verified)

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

Real viagra online (not verified)

Fdxunx ksghys viagra online buy Generic viagra cheap

Real viagra online (not verified)

Fdxunx ksghys viagra online buy Generic viagra cheap

enetibliole (not verified)

casino real money online casino bonus casino online online casino real money

enetibliole (not verified)

casino real money online casino bonus casino online online casino real money

inticleni (not verified)

http://casinoslotspc.com/ cashman casino slots http://casinoslotspc.com/ - big fish casino online casinos

enetibliole (not verified)

http://casinogamespqr.com/ online slots http://casinogamespqr.com/ - online casino bonus world class casino slots

enetibliole (not verified)

http://casinogamespqr.com/ online slots http://casinogamespqr.com/ - online casino bonus world class casino slots

inticleni (not verified)

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

inticleni (not verified)

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

enetibliole (not verified)

http://casinogamespqr.com/ online casino gambling http://casinogamespqr.com/ - casino play play slots

enetibliole (not verified)

http://casinogamespqr.com/ online casino gambling http://casinogamespqr.com/ - casino play play slots

inticleni (not verified)

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

Add new comment