Tutorial : A full HTML page with an animated background and audio from YouTube.

Posted on by Rbcafe

Tutorial

A full HTML page

+animated background.

+audio from YouTube.

Source code :

<!DOCTYPE html><html><head><title>City | Rbcafe</title><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/><style type="text/css">html,body{margin:0;padding:0;border:0;height:100%;width:100%;}#city{background:url(city.gif) no-repeat center center fixed;width:100vw;height:100vh;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;-webkit-box-shadow:inset 2px 2px 20px 10px #000;box-shadow:inset 2px 2px 20px 10px #000;}#yt{height:0px;width:0px;overflow:hidden;}</style></head><body><div id="city"></div><div id="yt"><iframe src="https://www.youtube.com/embed/ArCqlpGVcIs?autoplay=1&loop=1"></iframe></div></body></html>

Steps :

  • Found a gif, in this case : giphy.com/gifs/art-pixel-city-NKEt9elQ5cR68
  • Found a YoutTube audio loop, in this case : youtube.com/embed/ArCqlpGVcIs
  • Copy the content of the html in an index.html

Final result :

Leave a Comment