How To Place A Video Opt-In On Your WordPress Homepage

Ever since I made the most recent design shift here on DavidRisley.com, the thing that people mention to me most about it is the video opt-in. Basically, I have a video on the left side and an opt-in form on the right side.

It is actually pretty simple to implement something like that. But, first, let’s answer the question…. should you?

Does The Big Video Opt-In Work?

As always, you have to test it. Just because you see something on my blog doesn’t mean it is the best idea in the world. :)

For me, that opt-in form has been performing better than any other opt-in form on the site. But, still, not as well as I would have thought going into it. It is converting at about 3.7%.

Now, considering that typical sidebar opt-ins do less than 1% conversion, a 3.7% conversion is pretty good. It is nothing compared to what I can get on a squeeze page, but it is OK.

What would I do differently? The video. The video is a little bit too long. And the still shot is rather ridiculous looking. :) I just haven’t taken the time to re-do it yet.

The idea behind the setup should be obvious, though. A video landing page for a blog homepage makes a lot of sense – IF you can produce a halfway decent video. It stands out MUCH better than a typical sidebar opt-in.

The drawback is that, on most blogs, the homepage is not the most popular page on the site. Most people come into DavidRisley.com directly into one of the blog posts. In that case, they’ll never see the big opt-in form. And due to the size, I don’t want to implement it site-wide. So, another solution is needed for the rest of the blog.

How To Implement A Video Opt-In

Two words of warning going into this:

  1. This is technical by nature and I can’t deliver a course on HTML and CSS here in this post.
  2. The procedure will be a bit different if you’re using a framework like Thesis or Headway.

With WordPress, you can give any theme a custom homepage by simply having a home.php file in your theme folder. If your theme already has a home.php file, then you have a custom homepage (whether it looks custom or not). If you don’t have one, you can simply make a copy of your index.php file, call it home.php, and you’re good to go.

Now, once you have a home.php file, then realize that any changes you make to that file will reflect ONLY on your blog’s homepage. So, you can add your custom opt-in right there.

From there (and this is where the knowledge of HTML and CSS comes in), you have to find the place in that template which is before your posts and sidebar. You’ll know where your posts are being listed because it will start with something like:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Typically, your sidebar will be called in below all of that using the get_sidebar() function. So, ABOVE where the posts start – somewhere – you’ll want to place the code for your video opt-in. A good way to test if this is the right location is to place a little letter into that spot in the code, save, and see where it shows up on your blog. So, if you put a little “x” in your theme code where you think it should be, save and preview… if the “x” appears above your posts and sidebar, you’ve nailed it.

In that place, paste in the code for a video opt-in. Here’s a sample from my own blog:

<div id="homevideo">
[VIDEO EMBED CODE HERE]
</div>
<div id="homeoptin2">
[OPT-IN BRIBE TEXT - WHATEVER YOU WANT]
<div class="optinform">
<form style="float:left;" method="post" action="http://www.aweber.com/scripts/addlead.pl">
[HIDDEN FIELDS FOR YOUR OPT-IN FORM]
<input id="textinput" type="text" name="name" value="Your First Name" onfocus="if (this.value == 'Your First Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your First Name';}" size="20"><br />
<input id="textinput" type="text" name="from" value="Your Primary Email" onfocus="if (this.value == 'Your Primary Email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Primary Email';}" size="20"><br />
<div align="center">
<input type="submit" name="Submit" id="optinbutton" value="Get Access Today!" />
</div>
</form>
</div>
</div>
<div style="clear:both;"></div>

That’s the outline of it. You’d need to put in your own opt-in text, your own video embed, and the proper code for your own opt-in form.

Here’s the CSS code to go along with it:

#homevideo {
float: left;
width: 550px;
height: 343px;
padding: 3px;
border: 5px solid white;
background-color: #EEE;
}
#homeoptin2 {
float: right;
width: 360px;
height: 323px;
padding: 20px;
border-left: 2px solid #DDDEDD;
background-color: #F9FAF9;
margin: 0px;
}
.optinform {
margin: 0 10px;
}
.optinform #textinput {
width: 310px;
background-color: #FDFCDB;
padding: 6px 10px;
font: 14px 'Nobile', Arial, Helvetica, Geneva, sans-serif;
margin-bottom: 3px;
}
#optinbutton {
background: #318537;
border: 1px solid #1D7529;
cursor: pointer;
text-shadow: 1px 1px #1D7529;
border-radius: 20px;
box-shadow: 0 1px 1px #CCC;
color: white;
font-weight: bold;
font-size: 1.4em;
padding: .438em 1em;
}

You’ll need to modify this to suit your needs. You can obviously get fancier with it if you wish. The actual opt-in code I have on this blog is fancier than what I’ve put into this post. You can always “view source” on this blog to see the whole thing, if you’re inclined.

Tips For The Opt-In Video

You can host the video anywhere you want. I am using Easy Video Player. Youtube is always an option, however I’m not a big fan of using third-party sites like that for functional videos to my sites.

In terms of the actual video:

  1. Keep it short. 2 minutes or shorter. This was a mistake in the one I recorded. It is a bit over 4 minutes and I think that’s too long.
  2. Show them the opt-in bribe. What are you going to give them?
  3. Make it live action. No screen recordings on this one. I really think a big part of the power of such a video is the personal nature of having you actually talking to your new reader.
  4. Tell them what to do. In other words, make sure you actually TELL them to opt-in. And, if the video is going to be to the left of the opt-in, you can actually point to your right when recording the video and tell them to fill out the form.

Parting Words

Squeeze page work insanely well. And, you need to keep in mind that one of the import important roles of your blog is to get them onto your mailing list.

If people enter directly into one of your posts, then the content is key. But, if they enter your homepage, they’re a casual surfer. They should get an immediate and clear call to action to connect with you. Your homepage shouldn’t be a mere listing of your latest posts. To do that is to under-utilize the real estate.

Stay geeky! ;)

Like This Post? Join Our Private Newsletter (it's free):

Your Email:

Comments

  1. Hey David
    A bit too technical for me, but I’ll save the code until I chat with one of my programmer friends and we’ll see.  Good “usage” tips as well
    Thanks
    Mark

  2. Good stuff.. but i think this is only applicable to people who has a fast loading blog ‘cos videos then to slow loading of pages… I’m i right?

    • It would apply to anybody. If your blog loads slowly, then that’s a separate problem you need to address.

      Yes, doing a video embed can slow it down a tad, but your blog is set up right, its barely noticeable at all.

      • Cool… thanks for the quick response…

        • Sharron Field says:

          ‘Thought I’d make a suggestion after reading this: If you have a slow-loading blog; you might like to try a free plugin called W3 EDGE. When set up right this plugin will minify your CSS, cache your pages, database, and objects, and better utilise the viewers’ browser-cache… All to allow for a faster-loading blog. It works for me.

  3. I actually like the ridiculous looking still. Silly is good sometimes. :) I also am a big fan of “smack that play button”. lol 

    If it makes your head spin to think of creating the whole “video optin” as an overwhelming customization, you could technically get the same effect with just your video embed code. If you have an optin on the top of your sidebar in a widget already, you can keep it there and just embed a video above the posts (in index/home.php as David describes) so that it aligns with the your sidebar optin, (just make video the same height as optin). That would create the same appearance of a “video optin” that David has with a little less new code/customization. :)

  4. I will check out “Easy Video Player” as my blog is new and want to start out on the right foot.  Also, it makes perfect sense that a brief, compelling video will give the casual surfer on the home page a “call to action.”  Appreciate your post.

    Pam :)

  5. Interesting. I am ashamed to say I didn’t even notice the video opt-in and usually, much as I like videos, I don’t tend to watch one about opt-in, because I would naturally expect marketing. Very strange, probably a preconceived notion because I do enjoy video as content. Thanks for sharing this, David.

  6. I just paíd $ 23.86 for an iTouch and my girlfriend loves
    her Canon PowerShot S95 that we got for $41.56 there arriving tomorrow by UPS.
    No need to pay those expensive retail prices ever again.. Especially when I
    also sold a 42 inch HD-TV to my boss for $655 which only cost me $ 62.84 to
    buy. Here is the website we use to get it all from, B E T A O F F E R . C O M

  7. This is beyond generous of you to share, David.  You’ve always been a stand up guy and one of the few people I’ve really respected in this industry.  This is great for me to study as well, since I’m learning design and development in my Graduate program.  Thanks for all you do.  

  8. Now this is where David’s PHP expertise come into place. ;-)

    Great tutorial and I could definitely use this someday. Thanks!

  9. Interesting post, I’ve thought about something like that or one smaller in the sidebar similar to how Yanik Starak does his. I need a better “bribe” first though…priorities. I’m also curious how you did the gray bar just below your menu. I noticed that Pat Flynn has something similar. Is it a feature of your blog framework or something you had put in for the redesign?

  10. FYI – it doesn’t play on the iPad, the sound does but not the video…Apart from that I like!

  11. I have been looking all over for a theme that actually comes with this as an option. But, as you explained it, it seems like it would be easy to add to any theme. Thanks for this!

x

10 Mistakes You May Be Making Right Now With Your Blog


How To Avoid 10 HUGE Mistakes Most Blog Owners Are Making Without Even Knowing It!


Join our private newsletter, and get a complementary copy of Blogging Gone Wrong.

Email:

testing