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.

Click here to see what I am talking about when I say Video Background

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″>

</iframe>

</div>

 

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 BackgroundsYou 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.

0 Comments

Leave a reply

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

*

© 2014-2017   rus4   RACK UP SKILLS    PRIVACY     ABOUT
or

Log in with your credentials

or    

Forgot your details?

or

Create Account