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

inticleni (not verified)

http://buycbdoil11.com/ buy hemp oil cbd medic cbd tinctures cbd gummies walmart

inticleni (not verified)

http://buycbdoil11.com/ cbd gummies walmart http://buycbdoil11.com/ - best cbd oil cbd oil for pain

inticleni (not verified)

cbd gummies cbd hemp cbd

inticleni (not verified)

cbd gummies cbd hemp cbd

inticleni (not verified)

cbd oil for sale cbd oil at walmart cbd store

inticleni (not verified)

hemp oil for pain cbd vape cbd vape buy cbd http://cbdoilglk.com/ - cbd for sale

inticleni (not verified)

hemp oil for pain cbd vape cbd vape buy cbd http://cbdoilglk.com/ - cbd for sale

inticleni (not verified)

hemp oil for pain cbd vape cbd vape buy cbd http://cbdoilglk.com/ - cbd for sale

inticleni (not verified)

hemp oil for pain cbd vape cbd vape buy cbd http://cbdoilglk.com/ - cbd for sale

inticleni (not verified)

cbd oil http://cbdoilglk.com/ - buy cbd oil cbd oil cbd products

inticleni (not verified)

cbd oil online http://buycbdoilwalm.com/ - medterra cbd cbd oils cbd tinctures

inticleni (not verified)

cbd oil online http://buycbdoilwalm.com/ - medterra cbd cbd oils cbd tinctures

inticleni (not verified)

http://buycbdoilwalm.com/ cbd cream http://buycbdoilwalm.com/ - hemp oil for pain cbd oil for dogs

inticleni (not verified)

http://buycbdoilwalm.com/ cbd cream http://buycbdoilwalm.com/ - hemp oil for pain cbd oil for dogs

inticleni (not verified)

http://buycbdoilwalm.com/ cbd capsules http://buycbdoilwalm.com/ - buy cbd oil online cbd online

inticleni (not verified)

http://buycbdoilwalm.com/ cbd capsules http://buycbdoilwalm.com/ - buy cbd oil online cbd online

inticleni (not verified)

http://buycbdoilwalm.com/ cbd capsules http://buycbdoilwalm.com/ - buy cbd oil online cbd online

inticleni (not verified)

cbd oil for dogs http://buycbdoilwalm.com/ - cbd oil store medterra cbd buy cbd oil cbd for dogs

inticleni (not verified)

cdb oils cbd tinctures cbd pure cbd for dogs

inticleni (not verified)

http://buycbdoilwalm.com/ cbd products cbd medic cbd vape cbd oils

inticleni (not verified)

cbd oil http://buycbdoilwalm.com/ buy cbd cbd oil online hemp cbd

inticleni (not verified)

cbd oil http://buycbdoilwalm.com/ buy cbd cbd oil online hemp cbd

inticleni (not verified)

cdb oils http://buycbdoilwalm.com/ - buy cbd cbd drops hemp oil

inticleni (not verified)

cdb oils http://buycbdoilwalm.com/ - buy cbd cbd drops hemp oil

inticleni (not verified)

cannabis oil http://buycbdoilwalm.com/ - hemp oil pure cbd oil cbd gummies

inticleni (not verified)

cbd oils http://buycbdoilwalm.com/ cbd oil store cbd medic cbd vape

inticleni (not verified)

cbd oil store cbd oil for dogs cbd oils cbd oil at walmart

inticleni (not verified)

cbd oil store cbd oil for dogs cbd oils cbd oil at walmart

enetibliole (not verified)

cbd medic buy hemp oil cbd oil

top ed pills (not verified)

Idgcfg xgzixo erectile dysfunction pills ed pills otc

inticleni (not verified)

cbd medic cbd pills cbd for dogs cbd pills http://buycbdoilonline.us.com/ - cbd for dogs

inticleni (not verified)

cbd medic cbd pills cbd for dogs cbd pills http://buycbdoilonline.us.com/ - cbd for dogs

enetibliole (not verified)

cbd capsules cbd oil online cbd for dogs buy cbd oil online

enetibliole (not verified)

cbd capsules cbd oil online cbd for dogs buy cbd oil online

inticleni (not verified)

best cbd oil cbd pure cbd store hemp cbd http://buycbdoilonline.us.com/ - pure cbd oil

inticleni (not verified)

best cbd oil cbd pure cbd store hemp cbd http://buycbdoilonline.us.com/ - pure cbd oil

inticleni (not verified)

best cbd oil cbd pure cbd store hemp cbd http://buycbdoilonline.us.com/ - pure cbd oil

inticleni (not verified)

cbd tinctures cbd vape cbd medic cbd pills

inticleni (not verified)

best cbd oil http://buycbdoilonline.us.com/ - best cbd oil cbd online cbd medic cbd oil for sale

inticleni (not verified)

best cbd oil http://buycbdoilonline.us.com/ - best cbd oil cbd online cbd medic cbd oil for sale

inticleni (not verified)

http://buycbdoilonline.us.com/ cbd products http://buycbdoilonline.us.com/ - cbd gummies cbd oil for sale

ed meds online ... (not verified)

Hnhceb xqlnij male erection pills cheap erectile dysfunction pills

medicine for im... (not verified)

Oskfpg iispdr male ed pills ed pills that really work

medicine for im... (not verified)

Oskfpg iispdr male ed pills ed pills that really work

buy ed pills online (not verified)

Vjeona xramfo erectile dysfunction pills erection pills that work

Estherchera (not verified)

Ubzthp jiepsv Buy viagra online Rx generic viagra

bisding (not verified)

Ez Pharmacy Online https://buyciallisonline.com/ - Cialis Buyrealviagraonlihenoperscription Cialis Viagra Italia Online

Estherchera (not verified)

Scdkqy nazatl canada pharmacy online canadian pharmacy

Estherchera (not verified)

Pyhxnp zfwxwu canada pharmacy pharmacy online

Estherchera (not verified)

Tbsknb smkrpr rx pharmacy canadian pharmacy online

Add new comment