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

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

05/03/2020 - 13:53
enetibliole (not verified)

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

05/03/2020 - 19:08
inticleni (not verified)

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

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

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

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

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

05/04/2020 - 05:50
Buy cheap viagr... (not verified)

Hcxghv vzuaob online generic viagra Buy viagra australia

05/04/2020 - 05:53
Buy cheap viagr... (not verified)

Hcxghv vzuaob online generic viagra Buy viagra australia

05/04/2020 - 05:57
Buy cheap viagr... (not verified)

Hcxghv vzuaob online generic viagra Buy viagra australia

05/04/2020 - 07:51
enetibliole (not verified)

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

05/04/2020 - 08:53
inticleni (not verified)

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

05/04/2020 - 14:22
Real viagra online (not verified)

Fdxunx ksghys viagra online buy Generic viagra cheap

05/04/2020 - 14:23
Real viagra online (not verified)

Fdxunx ksghys viagra online buy Generic viagra cheap

05/04/2020 - 14:59
enetibliole (not verified)

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

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

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

05/04/2020 - 15:52
inticleni (not verified)

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

05/04/2020 - 21:50
enetibliole (not verified)

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

05/04/2020 - 21:54
enetibliole (not verified)

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

05/04/2020 - 22:53
inticleni (not verified)

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

05/04/2020 - 22:55
inticleni (not verified)

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

05/05/2020 - 08:57
enetibliole (not verified)

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

05/05/2020 - 08:59
enetibliole (not verified)

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

05/05/2020 - 09:56
inticleni (not verified)

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

Add new comment