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

Ellemox (not verified)

Difference Entre Cialis Et Viagra viagra Acquisto Levitra 10 Mg Amoxicillin Drug Interaction Zithromax Crushed

Ellemox (not verified)

Propecia No Prescription Propecia 08 viagra Non Prescription Viagra Generic Kamagra Regime

Ellemox (not verified)

Propecia No Prescription Propecia 08 viagra Non Prescription Viagra Generic Kamagra Regime

Ellemox (not verified)

Propecia No Prescription Propecia 08 viagra Non Prescription Viagra Generic Kamagra Regime

Ellemox (not verified)

Propecia No Prescription Propecia 08 viagra Non Prescription Viagra Generic Kamagra Regime

Ellemox (not verified)

Comprar Kamagra Internet cialis Can Amoxicillin Cure Blackheads

StevVise (not verified)

Discount Dutasteride In Internet Can I Take An Extra Keflex Propecia Avversi online pharmacy Acheter Viagra Generique Ligne Propecia Patente Achat Kamagra Strasbourg

StevVise (not verified)

Discount Dutasteride In Internet Can I Take An Extra Keflex Propecia Avversi online pharmacy Acheter Viagra Generique Ligne Propecia Patente Achat Kamagra Strasbourg

LesBiopay (not verified)

No Rx Robaxin buy generic cialis Myrx Olanzapine Priligy Medicamento Priligy At Cvs

LesBiopay (not verified)

No Rx Robaxin buy generic cialis Myrx Olanzapine Priligy Medicamento Priligy At Cvs

Add new comment