Build Your Own Business Website header image

How to Add a Full Screen Video Background in Thesis 2

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.

In this session we show how to add a full screen video background in Thesis 2 that sits behind the web page. We discuss where to get the code for the video and show step by step how to add the code to your site including the proper use and placement of codes and javascripts.

Video Transcript

Rick: We are going to do something very cool although  you’re going to have to pick the right time to do it because this isn’t something you would do on every site you work on or maybe even many sites. But it is a pretty cool idea anyway and that’s how to create a full screen background video that just sits behind your webpage. And there’s all kinds of ways to do this. This is actually not what I really wanted to show you though. Let’s go look at this demo here.

So this code can be purchased… so here it is right? You’ve got the video that’s happening in the background, right? And this is code that can be purchased here on… it’s not Code Canyon but it’s related to Code Canyon. It’s Active Den. It would cost you a whopping $15 to do this and this is what we’re going to work on tonight.

Now I’m going to unmute Jamie’s microphone. Hey Jamie.

Jamie:  Hey what’s up?

Rick:  So is there anything specifically you want to ask before we just dive into it?

Jamie:  No, not at all, man. I just want to see you know, what it takes to get this thing installed there to Thesis 2 specifically.

Rick:  Okay. Well you know, I think we can probably do it in the next 15 minutes without breaking a sweat so let’s try it.

Jamie:  Alright.

Rick:  Okay.

So we’ve already downloaded an unzipped the plugin. It’s not a plugin, I’m sorry. It’s just a piece of code. And we’ve already downloaded and unzipped this code and it is some place down here. It is…shoot. Full Screen Background video player, there we go, okay.

Now this video player comes with the.. instead of help files and all you have to do is open them up and turn the help file on. And… or by double clicking on the help file and it will bring up its own little set of explanations of how to accomplish this or how to do this, in particular, on WordPress. Now we are going to be modifying these directions because Thesis actually makes it easier for us to do this than it makes for… than it is to do on a regular site.

And so the very first thing they say here in WordPress integration is that you need to add these files, the preview swf, the swf object js, the video playlist xml… and a folder that contains videos into the root of your site. So I have a local… and actually, these files comes with a bunch of different choices. It comes with backgrounds with buttons or backgrounds without an overlay or backgrounds with an overlay and some extra javascript. And what we’re going to do is we’re going to do these looping versions here.

And so the first thing to do is just to copy these files… actually you know, I just want to make sure I’m in the right one here. Yeah, using the most recent version of this. So copy this and then I’m going to come over to my site and this is Thesis 2. And this is actually the root of my site so I’m just going to paste them here. So now I’ve got the loop swf, swf object js, and video playlist xml here.

Now I’m going to come back over and grab the videos. They’ve got these little videos here to get you started. So it’s got a folder with these videos and I’m just going to copy that folder and then come back over to the site again. And I’m going to paste that folder here. So now I’ve met this first set of requirements which is to place the 3 files plus the videos in the root of my site. And so now I have to upload them. I mean, that’s just on my local machine here so let’s see… okay, Thesis 2 and that’s these 3 ones right there. I’m going to upload those to the actual website now so now they’re there… oh and videos. That needs to be uploaded to the actual website too.

Okay so while that’s doing that, now we’re going to go on to the next set of directions which is here. So the next set of directions in the WordPress blog integration says you know, to look in the folder that contains your theme, find the sylte css file, find the wrapper id and add this line of code. Well, that’s actually pretty much the hard way. I mean, Thesis makes this a lot easier. And what we’re going to do is we’re going to use z index: 2 as the thing to use. That’s the piece of code we’re going to add and we’re going to do that in the Thesis. And the wrapper that this is talking about is you know, the main container of the site. So in this case, the main container of our site is the container, right? So the container here, we’re going to add some additional css. Just copy that container and then we’re going to say z index: 2 and hit save. Let’s save the css. Actually, this doesn’t matter at the moment and then go look at the next step in his directions.

So step 1 is to find the wrapper and give it a z index of 2. Step 2 is to create a new style and give it a z index of -1 position fixed overflow hidden height 100%. I don’t think… you can’t actually copy that so we’re just going to type it. And so it’s got to be a dive called my content and actually you know, I think I’m just going to put this in the container. We could create a new package but none of these things, z index, position overflow and height… none of those things are actually a selectable element in any of those containers anyway. So what we’re going to do then… I don’t know. Let’s just keep it simple and straightforward.

So we’re going to add a single element style package. We’re going to call it my container and then we’ll call it my container. And then under additional css, we’re going to say #my… actually, what did he do? # is… oh, my content. Pardon me, my content and then z index -1 position fixed. Okay, my… and then I totally… yeah, he’s got that kennel case thing going on. My content and then our z index -1 and what’s next, position fixed and then height 100%. And what was the next one? The last bit… overflow hidden height position… yeah, position overflow hidden.

Okay so we’ve got this little block of css here and I said my container but I’m going to call it my content because that’s what he called it. In fact, in order to make it stand out, I’m going to do that. I’m not going to give it a selector though so we’re just going to leave that alone. And we’ll save that and then… actually, under body is where we’re going to put that just so I remember because this is just inside of body that we’re going to do this.

So we’re going to save that css and then the next instruction is to take this script. Let’s make sure we don’t copy any garbage. So take that script and put it in the head of our site. And I’m only going to have this happen on the homepage. So let’s see, if we come back over here to HTML and go to page and home, do I have… I do have head scripts. So head scripts for the homepage, I’m going to put those there.

And then one last thing to do, I believe, and that is to create this little structure. So div id my content, my alternative content, h1 alternative content blah blah blah blah. And in fact, what I’m going to do is copy that one little block… okay so it doesn’t have any garbage in it. And the wrapping div has the id of my content like that.

So we’ll come back over to the Thesis Skin Editor and we’re going to create a new box. It’s going to be a container. It’s going to be called my content, add the box. We’ll drag my content up above container. So it’s inside of body on top of container and we’re going to give it an id of my container. Yeah, that’s it and then we’re going to add another box and it’s going to be a text box and alternative content. Shift drag that into my content. Let’s open up this. Okay, we will keep it as a div so we’re goig to get rid of…it’s going to have the id of my alternative content so we’ll come down here and put that in as the id. Disable the p tags and then get rid of these two divs. Okay so we’ve now created a div calle dmy content that wraps a div called my alternative content that wraps an h1 and a p. And save that template and let’s see what it looks like. It doesn’t look like anything. Classic.

Okay so my content, my alternative content… this goes in the head tag. This goes in the body. Those things have been saved. Did I put it in the home or did I put it in the front page? I think maybe I put that in the home, not in the front page. I did, that’s the problem. So my content goes into… well okay, let’s just go look at it on the homepage then because that’s what this is here. Alternative full screen video, okay there’s the alternative content. Okay so let’s just see whether or not this thing is actually loading then. So my container is definitely loading and that container is loading. We look in the head… no. Why is that not showing up? Oh, maybe this is it here. No… yes, there it is.

Okay so your playlist xml… oh actually… okay our problem here is that we’re not properly referencing these files, not properly referencing their location. So it’s in the root and let’s go look at… well, let’s look at the xml file first just to make sure that our xml file is right, video playlist xml. Okay, random true, auto start true, show processes true, progress bar, loading bar, video stretch pattern full… let’s see, skin… skip URL, skip button, loop list true, videos, plasma, HDFLV. Let’s look at the javascript. Okay so this little thing is called videos and plasma HDFLV is there. Okay so this is fine.

So let’s go back and look at that script that we entered in the homepage. Okay script type equals javascript. We got that src. Okay, it doesn’t know where this is so… okay so now it does know where that is. And flashvars xml path… that is exactly the same thing. Your playlist xml and then let’s see if that was enough to fix it.

Richard says I forgot the semi-colon on a code I put in the container. Richard, I’m unmuting your microphone. I’m not quite sure I follow what you mean. Hey Richard.

Richard:  Hey, how are you doing?

Rick:  Good.

Richard:  You know, the very first code you put in there, the z 2 -2?

Rick:  Yeah.

Richard:  I don’t believe you put a semi-colon there and that was under the container, the css. But I could be wrong there.

Rick:  We’ve got z index: 2 semi-colon… yeah I mean, theoretically, that would have thrown a validation error but I don’t think it would prevent it from actually working.

Richard:  I don’t know. I just noticed.

Rick:  Let’s see….

Richard:  You know, a couple of times, I’ve been working with some of the javascripts and stuff . And there are times I have to go back in and save the css or html. If I go back and like reboot it in the sense, within the skin editor, it’ll work. That or actually going to the page outside of the page that it creates when you turn on the skin editor.

Rick:  Okay well I’m now getting the right… well, let’s make sure that’s your playlist xml. No, it’s video playlist xml. You know, you have to get all that stuff right. Okay, video_playlist xml.

Richard:  I don’t know who’s doing this but isn’t that going to like draw too much attention away from your content?

Rick:  Well, it’s…. I think that there are cases when you know, that’s what you’re trying to do. You’re trying to draw attention to the site to have somebody say, “My, that is a cool site” rather than… oh let’s see, what is this? Let’s close that one.

Richard:  Yeah, anytime I ever worked on a show where there was a lot of special effects being ordered, we had an expression, “If you can’t dazzle them with brilliance, dazzle BS.”

Rick:  Right. We say baffle but…

Richard:  Yeah. It is… I think it’s too distracting for content but hey you know, everybody’s needs are different.

Rick:  Yeah, video playlist xml. Okay, let’s try that, save it. Okay, video playlist.xml. So I’ve got that path correct. You know, I guess we have to put… I’m guessing we need to put that here too then that we need to specify the actual preview swf location. Let’s just make sure that that actually is there. Let’s see, we did swf object video playlist xml. What was the other one? Maybe I missed one of the files. Oh, loop swf. You know, I think that name needs to be in there instead. That’s loop swf rather than preview swf.

Richard:  Hey have you, by any chance, or did the guy do these download speed test on this?

Rick:  No. Okay. Because I’ve given the exact location of the first one… src… I think that’s all I need to do there. I don’t think I need a second address. Well, loop swf.

Richard:  Can you put this through your php editor and step through it on a debug?

Rick:  No, not really. Okay well, I’m missing… oh no, there it is, okay. And now we’ve got the correct location so that stuff is showing up okay. This is definitely… I guess that’s the last possibility is that we need the address for loop swf. Roger thinks I have a typo in there someplace.

Richard:  Sure, blame it on the typo.

Rick:  Oh, my content. No, yes. Thank you, Roger. That’s going to be there too. Yeah you know, I got to get this stuff right. Let’s just make sure… yeah I know I copied that one properly. Save that template.

Richard:  That was a good call.

Rick:  That was a great call. Oh, here we go except that it’s not, at the moment, it’s not… oh interestingly…

Richard:  Is it because you put that container in there inside of div?

Rick:  I don’t know, let’s see. So we’ve got our body, we’ve got our object. We’ve got our container. So this object is sitting right in the right spot but doesn’t have the right z value.

Richard:  Yeah that’s what I was thinking.

Rick:  That’s where we are. We’re back to that again, I think. Probably screwing up the name of this thing. What am I looking for?

Richard:  Container, I think.

Rick:  Content… my content. Z index -1 position fixed.

Richard:  You know, it needs to be assigned to the body instead of the container.

Rick:  Well, we’ve followed the directions. Okay, z index is 2 there. My body doesn’t actually have a color, does it? Background color… no, it does not. Okay so… okay well obviously there’s a little bit more I have to figure out about this in order for this to really work properly. And let’s just make sure this isn’t a Chrome bug and let’s look at it in Internet Explorer. No, it’s definitely failing in all of them. In fact, what’s interesting about that… well maybe I’m failing in the directions. Okay, I got those two things done so I’ve got a z index of 2. I got that stuff taken care of. That’s all working fine.

Richard:  Do you have the… that line 40?

Rick:  Well no, that’s not the part that has to be done. The z index was the thing that needed to be done for those. This is an example of 2010 and it’s already got the other code. It just needed the other thing. So in the header php file, you got body class. On the next line, insert this code. So immediately after the body tag, put this in.

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