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 😉

(Visited 84 times, 1 visits today)
  1. Lis says:

    Hi Loes,

    Thank you so much for this information. I have seen it on other sites and wondered how it was done. Thank you for sharing these easy to follow instructions.

    I am bookmarking this page for future reference.

    Lis.

    • Loes says:

      Hi Lis, I have searched for days, composing all kind of codes, and this one worked! Hope you get a very nice moving background 🙂 Have a nice day, Loes

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>