Free tutorial about how to Add a Video Background to Your Website using youtube without using Css or JQuery.

I have found a few different div codes. And share this codes to you for free.

There are several ways to add a video background to your website.

I will give you 3 different codes for adding a video and for adding music..

1. Content template code, not effecting the sidebar.

2. Fullwidth template code, no sidebar.

3. Background with music.

To add your own YouTube video you just change the data

behind the src=

and behind the playlist=

Code 1

To create a background as you see on this pages. Template settings: Default Template.

<div style=”position: fixed; z-index: -99; width: 75%; height: 100%; top: 0px;”><iframe src=”https://www.youtube.com/embed/IwuyTC_UQ-s?rel=0&amp;loop=1&amp;playlist=IwuyTC_UQ-s;autoplay=1&amp;controls=0&amp;showinfo=0&amp;autohide=1&amp;iv_load_policy=3″ width=”75%” height=”100%” frameborder=”0″></iframe></div>

Code 2

To create a background on a fullwidth template. Template settings: Fullwidth page.

 <div style=”position: fixed; z-index: -99; width: 90%; height: 100%; top: 0px;”><iframe src=”https://www.youtube.com/embed/IwuyTC_UQ-s?rel=0&amp;loop=1&amp;playlist=IwuyTC_UQ-s;autoplay=1&amp;controls=0&amp;showinfo=0&amp;autohide=1&amp;iv_load_policy=3″ width= “90%” height=”100%” frameborder=”0″></iframe></div>

Code 3

To let your audio start at ones you use this code.

<p><audio src=”your audio link” autoplay loop></p>

When you add your music via the add media button, it will display with beneath control, and has to be manually turned on by your visitors.

The Movies

For the movies, I just went outside and shot these in my backyard.

For a terrific result you can go to the beach and film a beautiful sunset.

Or you can make a little film of a landing aircraft, a field of sunflowers, or playing kids.

 

Click here to view the result of how to add a video background to your website in full width.

 

I hope you liked this tutorial 🙂

More Youtube tutorials:

Stop  Youtube showing other videos, remove endscreen.

Make video loop.

Link your video to your website.

Make your own video, simple and easy start.

 

 

Share, if you care 😉