When someone visits your website, he decides whether to stay or leave your site within 3 seconds of looking at it. So technically and practically you have only 3 seconds to get the visitor’s attention. A well designed website with beautiful pictures or colors is one way of drawing attention. Apart from that, a website with a video background stands out from others. I see many giant websites do this. It is cool, eye-catching and trust me it is insanely easy to do. This is a short tutorial on how to set a YouTube video as background of your webpage.
Here is how to do this
Add the following piece of code after the opening <body> tag of your HTML file.
<div style=“position: fixed; z-index: -99; width: 100%; height: 100%“>
<iframe frameborder=“0” height=“100%” width=“100%” src=“https://youtube.com/embed/YOUTUBE-VIDEO-ID?autoplay=1&controls=0&showinfo=0&autohide=1″>
Don’t forget to replace YOUTUBE-VIDEO-ID with your video ID.
Example: If your youtube video URL is https://www.youtube.com/watch?v=4oCZ7b3k_Ls
then your video id is 4oCZ7b3k_Ls
Click here to download the full source code of the Demo Video Background Page.
WordPress Plugin for Video Background
mbYTplayer is a free wordpress plugin that will help you set any youtube video as a background of you wordpress page.
Note: This free plugin sometimes show ads on the page you are applying video background.
If you don’t want to see ads and are willing to shell out a few $$ then there are a few paid wordpress plugins that does this job. One of my favorite is a plugin called – Parallax & Video Row Backgrounds. You can buy this plugin for $10 on CodeCanyon.
I hope you found this post useful. Feel free to leave a comment if you face any difficulty or problem doing this and I will try to reply as soon as I can.
My name is Monlam Makhampa and I am a freelance Web Designer. I provide Web Solutions and SEO services to small businesses and Non-profits.