Build Your Own Business Website header image

How to Create a Simple Video Squeeze Page

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

A member asked how he can build a simple video squeeze page out in Thesis. What he wants is a page with no header or footer.  He does want to retain the content and the sidebar.  In the sidebar he’ll put an opt-in form and in the content he’ll embed a video.  We look at how to create a function that removes all of the unwanted elements for the specific page.  Next we embed a YouTube video in the content area and then re-size it to fit the width of the content box.

Video Transcript

Rick: Brian says, “I’ve built a simple video lead page. However, the header image box leaves a marker showing where it was.” So Brian, I’m going to un-mute your microphone here. Brian are you there?

Brian: Good morning, Rick.

Rick: Brian? Good morning, Brian.

Brian: Yeah, good morning. Can you hear me?

Rick: I can hear you just fine. Can you refresh my memory? What’s the address of the site?

Brian: To be honest, I believe I’ve pulled it down. It wasn’t working and I tried another method using a box type template thing so I wonder, is it possible that you can just show us quickly how to build just a simple video page with some text next to it and nothing else on the page?

Rick: Sure. So I have a site, this isn’t going to stay up on this site because this is Lesson 2 of the new Customize Thesis Like a Pro series site but since I have it up and open, I can go ahead and get started on it. Let’s see, so I want to…actually, let’s do it over here since I’m already open, so let’s just create a page…

Brian: Just looking to…I really was just looking to get a video on the left side of the page and an AWeber opt in box on the right side of the page.

Rick: Okay, well, I’ll let you… you know, obviously, the AWeber opt in box is just cut and paste code, right?

Brian: Yeah, it could just be any widget… a widget box on the right.

Rick: And I know you’re putting inside of a widget? So you’re still using the sidebar or are you just dumping it in the middle of your text?

Brian: Yeah. Oh just using the sidebar widgets, single sidebar.

Rick: So you’d just… okay. So I’m going to go grab a YouTube video here real quick for the video because this site does not have any video sharing plugins in and oh my gosh, we’ll take quail and rose petal sauce as our video. Get the embed code and I don’t want it in an eye frame so…okay, and so we’re going to take this one here.

Brian: Yeah, it’s the size I always use.

Rick: Let me just try and stop her. Let’s see, I want to get the embed code, get the video embed code but all it’s going to give me here is a frame. If I pick that, if I use the old embed code, that’s what I want. I want the old embed code for this size and I’ll just copy that and go over to our page and then the HTML view so paste that in. Come on, paste that in. Okay, so now I got a YouTube video there and we’re going to assume that you can put the widget in the sidebar without any difficulty but what we want to do then here, we’ll publish this and we’ll do the page and what you want to do is you want to get rid of the…

Brian: Everything?

Rick: Everything including the squeeze page and the footer and this site’s not configured to have the sidebar in the right location so you’ll just have to ignore that but so you want to get rid of all the rest of this and the way to do that is let’s see… so this is page id 12, post = 12. Okay so we’re going to address ourselves to page id 12 and I think this is my custom functions, no… it’s not. Okay custom CSS, file, open file… let’s see, let’s just make sure that we’re looking at the right file here. CTLP Lesson 2, yup… okay. So then that’s custom functions php. Okay, so now what we’ll do is we’ll create… well, yes we’ll create a function that does some work only on that page and that is going to be function… pardon me, function create squeeze page base and then we’re going to say if is…oops… if is page and we said 12 right? If is page 12 enter and then we’ll say remove action thesis hook before header thesis nav bar and semi-colon and then remove action thesis hook header thesis default header and then remove action thesis hook footer thesis attribution. Okay, so we’re going to do all those things if it’s page number 12.

You know, if I had a custom header then I would have to remove my custom header from this as well as the default header and if I had a custom footer, I’d also have to remove the custom footer as well as the default footer. But since I don’t have custom header and footer in this case, I don’t have to do that. And so, now all I need to do is add this function to the page so add action thesis hook before HTML. You see, we have to do this before the other stuff would happen and then create squeeze page base semi-colon…

Brian: That’s the part I didn’t have right there.

Rick: Okay so what we’re doing here is we’ve got a function that is going to create the squeeze page base and the squeeze page base essentially is remove header or remove nav bar, remove header, remove footer and then we are adding that before any other Thesis actions happen or before Thesis actions set…

Brian: That’s why I keep getting the ghost box?

Rick: It could be because you might have done this after the ghost box is actually stuck in place at which point, it would no longer work.

Brian: Yeah.

Rick: So if we say save here and we custom functions php upload and we go back to this and we refresh it, okay. I must have misspelled this. Oh, we also have to get rid of the header too… I mean, the heading. I’m sorry. Although you don’t have any title at all in your page?

Brian: No, I could title it and then I could center the title. That would be okay.

Rick: I mean this could be… yeah, okay. So we won’t remove that but we… I’ve clearly misspelled something in this… thesis nav menu, that’s what it is.

Brian: Why is the sidebar not moved over to the right of the video?

Rick: Because of the kind of the classification of a video is, the video is an object so it’s overlaying the top of it. If I wanted the video to be a different size, I would have to tell it. If you’ll give me just a moment and I’ll do that. But let’s up this…oops, let’s upload this again to fix my little error. Let’s go back to the squeeze page and refresh it. There we go. Okay if you want this… because it’s an object, that is because right here it says, “object”, because it’s an object, it’s going to overlap anything that’s in it’s way. So you know, this is just too big to fit in the space and what we really needed to do was say do it 400 pixels or 450 pixels. Update that, you got to do it in a couple of places so 450. Well let’s see, 853 by 510. Let’s just do the math on that. So 853… no, pardon me. 450 divided by 853 is 5.27 so then we multiply that by the height of 510 and we get 269. So we just put in 269 here to get the right aspect ratio. 269…

Brian: You know what I do to get aspect ratios real quick?

Rick: No.

Brian: Is I open up Paint and I stick it in the pixels and I change it on the Paint ‘coz it does it automatically.

Rick: Although, I mean, if you don’t want to use the calculator. I think using the calculator is just easy enough. The ratio…

Brian: That’s because of all thatmath.

Rick: I suppose. But anyway, there are… so there it is sitting inside of that spot and obviously this little WordPress Admin thing down here is there because it’s set that way under Design Options. If I got rid of let’s see, where is the footer? No, that’s not it. Administration, show edit post, show admin link and the footer…

Brian: In the feature box too, right?

Rick: Do this. So now what you’ll have is you know, no header no footer. You just have content and sidebars showing up here. However it’s not that way…

Brian: But if I want a single sidebar…

Rick: What’s that?

Brian: If I wanted just a single sidebar and remove the custom rotator box, I just go back in the Admin and remove the rotator box, how do I get to the single sidebar?

Rick: Well, it’s just… it’s a setting in your… in Design Options. You know, your number of columns…

Brian: 2 columns instead of 3?

Rick: Your column order, right. But you know, you can see that that didn’t change any of the other pages, right? It only changed… oops…

Brian: It only changed the squeeze page.

Rick: The squeeze page, right. So if we take the squeeze page out, we go back to the regular thing. Okay?

Brian: Great.

Rick: Okay. Well, it was a great question.

Brian: Excellent. Thank you as always.

Rick: I’m going to expand on this whole thing more in the future because you know, that’s really how you kind of get started at it but lots of people don’t want sidebars in their squeeze page too and there’s a nice facility for removing that so I’m going to… I still will do more thorough presentation on that in the near future.

Brian: Great.

Rick: Okay so let’s see…actually, I see some people have asked some questions here so let’s see what those questions are.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment