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&loop=1&playlist=IwuyTC_UQ-s;autoplay=1&controls=0&showinfo=0&autohide=1&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&loop=1&playlist=IwuyTC_UQ-s;autoplay=1&controls=0&showinfo=0&autohide=1&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.
Link your video to your website.
Make your own video, simple and easy start.
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.
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