Simple Steps to Set Youtube Video As Your Webpage Background

Most of us are setting background for our pages as a static images but it would be attractive if add some animated pictures or moving images as a webpage background. We can also set youtube video as  your webpage background for our website.

Most popular search engine like Bing is setting animated picures or videos as their page background

Let us see how Bing sets the video background

  • By using the HTML tag <video> they are serving the videos on their homepage.The video size cannot be resized within the browser, it is fixed.
  • The bing allows you to use any video or series of videos as your page background.
  • They allow us to use jQuery plugins,Tubular and BigVideo.js
  • Instead of using javascript,they are using HTML and CSS tags which helps us to set any youtube video as our page background .

To set youtube video as a background just paste the following codings in your web template.

  • In your web template near to the <body> tag simply paste the codings:
  • In the way you have to change the video ID.You should replace the video ID with your youtube video ID you are going to set as background.

CODINGS TO BE INSERTED

<div style=”position: fixed; z-index: -99; width:100%;height: 100%”>

<iframe frameborder=”0” height=”100%” width=”100%”

Src=https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1>

</iframe>

</div>

Note: The actual ID of your youtube have to placed in the ID

  • Here the z-index tag is useful to set the negative such that the video can cover the whole page,below the content also.
  • The <iframe> tag is used here to embed the video into the webpage.
  • Set the height to 100% and width also to 100%.

But this video won’t work in mobile phones and we can’t mute the volume without the help of java script.

ADDING YOUTUBE MUSIC TO THE BACKGROUND

We can also embed youtube music as a play background.When you open the websites it will play the music that was embedded.It will make the users to stay happy.

The raw audio files like MP3,WAV or MIDI format files can be embedded as the music background for the webpage.

Just follow the below codings:

<embed height=”0” width=”0”

Src=http://youtube.googleapis.com/v/Video_ID&autoplay=1&loop=1/>

The autoplay is set to 1 it enables to play and the height and width is to zero to enable the invisibility. Hope you done set youtube video as your webpage background.