Attention Span Control
Advanced Video Engagement - Workshop Replay
Chapters:
Speed:
x1
x1.5
*0.01 chapter: Introduction. Welcome*
Thank you for coming and welcome to the Attention Span Control Advanced Engagement Workshop.
In this workshop we will go through the details of much of what we talked about in the last workshop.
*0.15 chapter: Your host today*
For those of you who don't know me, my name is Nicholas LaPolla. I've been a programmer for over 25 years. I've developed programs as a web developer for 15 years. I've developed numerous programs.
*0:33*
I am the creator of Eyeball Glue for Websites, Simple Video Pro Interactive, FanBuzz and many other pieces of software.
In 2012 we launched Simple Video Pro for the first time and we had the top no.1 grossing WSO in 2012 and we still hold that record today. We have been evolving the system since then so we are not going anywhere. We've been with Simple Video Pro and Eyeball Glue for Websites. It's been a product since 2012 and we continually improved it and take your feedback on it.
*1:09*
Our second launch of SVP was also well into six figures and we've got, between Aon and myself, multiple high six figure and seven figure launches like VideoMakerFx and Explaindio that we spearheaded and managed those launches and brought them to the heights.
*1.33*
I live in California with my family. Three boys, a beautiful wife and a wonderful white dog.
I do things like training in martial arts in my spare time. I got my first black belt in 2007. That was a proud day for me. It was an excellent day and a hard day, too.
*1.50 chapter: A few technical difficulties*
Before we go on, I am going to do a little review of what we went through last time, in the last webinar. I am doing this because many of you were not on the first webinar and apparently, some people haven't received the replay, yet.
Can you all see my screen? I have someone saying they are not seeing the screen. Please, let me know if you can see the screen.
Ruth, if you can't see the screen, please, refresh your browser. It should pop up for you. Okay. Thank you everybody. I appreciate that.
Brian, if you can't see the screen, please, refresh your browser and you'll be able to see the screen as I am going.
I'll wait just a second for you to do that.
Dick, before we get going dot, dot, dot, dot. Hmm.
Oh, hi, Frances. How are you? Good to see you here. Good to see everybody here.
*2.50 chapter: Reality check. Quick recap*
Before we get going I am going to do a quick recap. The average online visitor leaves a website in about 30 seconds. They pop in and they pop out. This is particularly bad because Google tracks how long people are on your pages. When they do that, they calculate what is called the bounce rate. If you get a lot of people bouncing off your site, a high percentage of people bouncing off your site, then Google assumes that your site doesn't have the information that people is looking for so your SEO rankings actually suffer and go down as a result. You want to have people sticking on your websites.
You don't have a lot of time. You need to get them involved. Unless they are engaged, unless they are captured, their curiosity is peaked or they are distracted or their lack of interest is overcome, you're basically screwed.
*3.46*
People are impatient these days. That's a fact.
You just can't build websites like they used to build them in 1999! Your web pages absolutely must engage and entertain people when they get there, the moment they get there.
You need to interact with people. You need to inform people, get them the information that they are looking for, deliver what they want, put the viewer in control, if possible, of what they see of the content. Then, of course, you need to be contiguous and you need to be synchronized with all of your materials, colors, layout, design everything so that people don't suffer from cognitive overload, but, at the same time, they don't suffer from boredom. There is kind of a fine line there.
*4.41 chapter: Today's topics*
Okay. This is Advanced Engagement. We are going to talk about interactive user engagement. I am not just going to talk about it. We will show you the nuts and bolts of how to put it together.
We will talk about full page presentations and put that together.
Then we will talk about dynamic multi video content. There is one that I actually left out of this list and that is user directed content.
*5.13 chapter: Last week quick review*
Now, I'll do a little bit more of a review of last week. We talked about engagement in different ways. One way, using user comments, using standard wordpress comments, if you are using wordpress.
We also talked about Facebook comments. We just created a new tool. It's in the next edition that is coming out. I'll have that link on the download page, after this webinar, so that you will be able to go and get the latest and greatest of SVP and Eyeball Glue for Websites.
We talked about video presentations. There were two types. There was the bit by bit presentation, where you show them one thing at a time and control everything that the viewers see, timed with the video and that is on the webpage and not just in the video.
We also talked about doing existing pages and animating small portions of them, but allowing people, if they want to, to pause the video.
*6.12*
Then scroll around, but, at the same time, giving them the potential of having a tour of the page where the video scrolls the page automatically and takes them on a tour, highlighting things that you want them to focus on. They don't just breeze on by and skip stuff.
Then we talked about user directed content.
Now, we only have time for the bit by bit presentations, today. Along with some user directed content. I want to show you both of those. It's very powerful. Then in the next webinar we will go over the existing page tours and how to tour people up and down a page. That is actually pretty easy but you can do a lot with it.
*7.00 chapter: Why do you need to have video?*
Why do you need to have video? Still a little bit more review for those of you who weren't here.
Did you know, that, according to comScore, 64% of consumers are more likely to purchase products after watching videos about those products? It is really important. I still see a ton of pages out there where it is just static images, a little description on the side and then a price or an Add to cart button.
I am amazed because the companies that are doing really, really well in ecom, in affiliate sales and things like that, they are doing video.
Using video on your landing pages can improve conversions such as opt-ins and stuff like that, by up to 80%. That is insane, not to do video. For various reasons, people don't like to. Some people are afraid of video, some people don't want to be on their own videos.
*7.58*
But you don't need to be on your own videos. You don't need to be afraid. You don't even need your voice. You just need the tools to put the stuff together.
Having a video on your homepage has been shown to increase conversions on the site, generally, by about 20%.
That is not even having a video on every page. Just on your homepage. It gets people's attention.
Now, almost any type of video can do the trick. Of course, videos like Doodle Videos hold attention because the viewer naturally wants to see the finished drawing.
I was actually reminded, just yesterday, that I had promised to do some interaction between Eyeball Glue and Doodle videos. In the last minute I put together a pretty cool presentation that I think you will enjoy. I kind of wanted to steer away from doing the same bland, you know, the numbers this year were greater than the numbers last year and then the charts went up. That kind of thing.
Is it okay if we have a little bit of fun today, a little levity? How does that sound to you, guys and gals? Is that okay with you, guys?
*9.20 chapter: Control the eyes - Control Attention*
Here is what we are going to be showing you today. We will show you how to control the eyeballs, how to control the attention of the viewer, of the visitor to your webpage.
This is the way that we achieved an 82% watch-through rate on an extremely long video. We are talking about a 13 minute video. We achieved an 82% watch through rate. 82% of the people were actually finishing the video. We're getting within five seconds at the end of the video.
We also used the same techniques to reduce our bounce rate. Remember I told you just about a couple of minutes ago about bounce rate and how Google measures when someone comes to your site and leave immediately. That is considered a bounce. If you have too high of a percentage of people doing that, then it is bad for your SEO, it's bad for any kind of ranking hopes that you have.
*10.15*
The lower the bounce rate, the better and we were able to achieve 10.78%, which we are told is, by leading experts in SEO, that is almost unheard of. 20% is actually very difficult to get to but we achieved 10.78. That is pretty incredible. Using this technology.
We also improved our conversions, from when we used just static pages to using the Eyeball Glue, to up to 400% better conversions on sales than we had in the past. That's pretty incredible and these are the techniques that I will show you today. So without further ado let me get right into what we are doing today. Before we begin, I am going to show you a quick demonstration. This is where the fun begins. I hope you will like it. Let me turn off my speakers here.
*12.41 chapter: Quick demo*
-- The video plays showing the demonstration. --
All right. There was our little demonstration. Of course, we have two step opt in forms where people can go and sign up where you can put the opt in form right below. Now let's go into how we created this. What do you guys think? Cool?
No. I am not from the Bronx. I just like to do the Bronx. The accent, all right? Mafia proofed. Absolutely. My cousin Vennie, you know, he set up a thing, okay. It's legit.
*13.20 chapter: Overview of the page*
What I did is I created a page that is just vanilla. I didn't put a lot of time to design this. I will when I put out the actual demo that will be public for you guys to take a look at and play with.
By the way, we will be having a Q & A at the end. If your questions are not answered while I go through this presentation, then they will be answered in the Q & A. You will have a chance to put your questions in then.
Let's take a look at the page. I will slip in and out the Italian, Brooklyn accent thing.
We have this page. Basically we have all the content laid out. We don't have any backgrounds or anything like that.
Patrick, if you have no visuals, please, either try opening this in Chrome or just refresh your browser.
*14.37*
We have this page. It is basically laid out pretty sparse. But you can see all the content is there. This is a lot of what I see on webpages. There might be a little more design behind it. Like I said this is kind of last minute thing I put together.
Michael is asking "Only on wordpress?" No. You can use one install of Eyeball Glue on a wordpress site. A lot of people do it in a subfolder and then you can use that as your video manager to manage videos and these kinds of presentations on other external pages through embeds so you have your own personal video management studio.
I am not going to be able to stop and answer tons of questions because if I do, then we will be here for about three and a half hours. We will take care of the questions in the Q & A.
*15.43*
Thank you very much. Appreciate the questions tough.
If you have questions, please, get a Notepad, maybe write them down, jot them down. If I am not answering during the webinar or doing the workshop, then please, let me know in the chat box when the Q & A comes.
We have this page, like i said, I didn't put a lot of design into it like layout, colors and all that stuff.
We are going to do some of that right now because I want to show you some of our design tools which we continuously improve. You can see that you have to scroll down and people will go "Okay". They will just browse and see what they want to see.
You want to control their eyes, you want to engage them right away. That is what this presentation does. Let's go ahead and edit this page.
*16.31 chapter: Decide what you want to do*
The first step is to decide what we want to do. What we are doing here is we are going to do some animations where it is timed with our audio in the video. It is timed with the video. We will also add some design elements to this page. I want to put a background behind this content.
Remember the background had the cars and stuff? I want to show you how you can do that. It is really simple.
*17.00 chapter: Put a background behind the content*
It's really simple. Just highlight the content and go up to the toolbar. This little icon says: "Insert EBG video background". This is actually changing. We are removing it from the toolbar and we are putting it down here, like we do the video settings. Then all you have to do is put a shortcode up. It will be much easier to manage and change. But in this version we've got the toolbar button.
Select the content first. Select the background. Pick an image. This gives the ability to create wide band, meaning it goes all the way accross the browser window, image backgrounds and video backgrounds. This is really cool because, normally, you need to have a theme or something that does it for you.
This way you don't need to do that. You can just use the Eyeball Glue background plugin. I am going to say: "Full width of browser window".
*17.56*
That's what I was missing. Then we will go and get that url again. Web url. Https always. Copy to the clipboard. Here I do not want this background to repeat. I am ready to put it in. There we go.
There is our background.
Now, let me take a look at this. You will see what I mean by wide band image. But there is going to be something wrong with it.
Notice the cars aren't fully displayed. That is because this is designed to grow and shrink with the content that you are displaying.
We will be adding some features to actually make it a static height. It just causes some issues because we want to make this compatible with mobile, which it is, by the way.
All you need to do is put a few returns in. Just to pad space. Update and then refresh.
*19.13*
Now, I've got a couple of extra, but I just put a background color in there. So that looks much better.
Now you can see how you can add design elements to the page using Eyeball Glue, using it's built in design elements to actually break out of the restrictions of your theme. Normally, these backgrounds only go the width of the content area which is just from here to here. But we've got it so that it will actually stretch across whatever size browser screen they have. That is step one.
*19.46 chapter: How to animate a text*
Now, we are going to animate some of this text. Let me show you how to do that. It is pretty easy. We have a wizard and everything. The first video that we have is our Eddie Sanduccie's "forget about it" insurance. And forget about it. We are going to go and edit the "forget about it" main video.
I've already put the videos on this page just to save time. It is very simple. You just click, enter the name of the video and click Add Video. I put in the video source right here. It is very specific and it is very clear.
Now, this video if you go to the Actions tab, we want to autoplay it so that's checked. Cool!
I put a cool frame around it. That is kind of Eddie Sanduccie's fancy metal frame. He is kind of a fancy guy. At least he thinks he is. Then I've also hidden the control bar.
*20.49*
I am going to do that right here. You have full control over your control bar which you can display and hide. I am going to hide the whole thing. And here is where the rubber meets the road on these interactive presentations.
This is where it gets really cool. I am going to check this box and it brings up this little wizard.
*21.12 chapter: Video Presentation Wizard*
The first thing we want to do is to choose the action that we want to happen. And for this I want to animate that text on to the screen. Let's go ahead and do that. I will select Text Content Animation and then select the type of animation that I want.
I can select any of these. By the way, when you select these it is cool because it previews right here. If I change that, see how it is previewing?
If I change that to, oh, I don't know, Rotate In Up Left, you can see, now the animation changes. It gives you a little preview. I will select, I didn't remember what I selected in the last one. Let's see. Bounce In Up.
We will select Bounce In Up. We can see what that does. Then we can choose if we want it to go Left To Right, Reverse, All At Once or Shuffle the Characters.
*22.33*
We can also choose if we want it to go One word at a time or One character at a time. I will go One character at a time.
Now you can see. It goes one character at a time.
That is the animation I've chosen. Pretty easy. It is just point, click, select your animations from the list. That is it. Now we are going to name this section and we are going to call it "legittext", because it is legit.
Now we have to pick a time that we want to animate it. This is also very easy. You just click this little icon. The video comes up.
All right. Right when I was saying: " It's 100% legit." That is where we want this to happen. Insert the time. I actually want it to happen a little earlier so I will make it 6 seconds. Then click the green button. It adds it to the list.
*23.47*
Now, let's check and see how that looks.
Copy this. See this text in red here? It says place the highlighted content into your content.
I am going to copy that. That is the shortcode for this animation. We will just go up and we will put it right in front of the text. With text animations I do want it to be big, because of the way the wordpress editor is. We need it to be the same size as the text for animating. Then I just removed the end and paste it on after the content that I want to animate and now we are good. Now I can just save the video. I am going to speed this up in a minute.
I see there is some confusion as to the differences between Eyeball Glue and Simple Video Pro.
*24.44 chapter: Eyeball Glue and Simple Video Pro*
Simple Video Pro is the umbrella that covers everything. Eyeball Glue is a new edition that we've made to Simple Video Pro. We had in the past a little problem with people remembering the name, Simple Video Pro. They would always mess it up and confuse it with others.
Ever since we started saying we have Eyeball Glue for Websites I had people coming to me saying "Where is the Eyeball Glue?" On top of that, Eyeball Glue really is a better description of what this tool does because it literally glues with video, people. And it glues their eyes to the screen. Their eyes are darting around, they are watching everything that is happening. They haven't seen this before. It is novel, it is new. It's cool. It keeps their attention. Thus we are actually changing it and we are just calling it what it is. It's Eyeball Glue. Eyeball Glue for Websites.
*25.50*
When we say that it does include Simple Video Pro. It is all powered by Simple Video Pro Interactive. I hope that clarifies for you. If your plugin still says SVP, if you have a current license as of March, then you have the Glue. We are changing in the next version. The plugin name actually has changed. It is now Eyeball Glue for Websites powered by Simple Video Pro.
You will see all of this stuff in your system, if you have a current renewal. If you don't, then I will show you where you can renew in just a little bit to get all of this at a very good, good, good, good, ridiculously good price. I'll be sharing that with you in just a minute, Tony.
Amy says: "How much is EBG? I have the first SVP?" It all depends on if you are current on your renewals.
*26.52*
If you are current on your renewals, then you are good. You've got it. You got everything. We always provide a year's worth of these updates, when you renew.
Where were we? We were going to check this out. I don't remember if I saved the page. I think I did. I saved the video. Let's update the page to be sure. Let's take a little look at what happened here. Refresh the page.
Notice that. There are no words here. The "100% legit" is not there so watch what happens.
See how that came up? Right when I timed it. It is as simple as that. You simply go to the three steps in the wizard, name the Content, Copy the shortcode, you are done.
Now it is just a matter of repeating that for each of these pieces that you want to animate.
*28.01*
Some people might stop there and leave everything the way it is, some people might want to continue. I choose to continue because I want to make a really cool presentation.
The thing about animations that you should know is that they take up space on the page even before they are revealed, before they animate. If you have a bunch of animations on the page, you will have this space right here, this gap.
I am going to do a little housekeeping here because my computer always gets these Adobe programs that take up like 13-20% of my memory. Hang on. There. It's an Adobe application version checker and it sits there and it just runs it. 30% of my CPU and I don't get it. I will just shut that down. Sorry about that.
Now, let's make it so that, until we need this, it is not taking up space.
*29.15*
John says: "So this is a part of SVP? Correct. We don't have to pay anymore money for Eyeball Glue because it is the new name for SVP". If you are current on your renewals, that is absolutely correct. There is no additional cost for Eyeball Glue. We won't pull one of these deals that some other people have pulled where they were like: "Oh, version 2.0? No. No. No. NO. You have to buy version 2.0. It is a different product. We don't do that. But, at the same time we want to have a legitimate, not legitimate, totally legit. We want to have a legitimate and sustainable business whereas we can keep providing these services to you. That is why it is an annual renewal. But it is locked in and it will never go up. I will explain that in a minute.
*29.58 chapter: Hide content to save space*
I will make it so that we don't occupy that space. In the Presenter, before we do this animation we are going to do a reveal.
The whole section will be completely hidden. It won't take up any space until we want it to be there. I am going to do an Instant Reveal. Oh, let's just... . It doesn't really matter. I'll do a Reveal Slide UP. And we will call it the same name. Actually, no, we will not. We will call it "legit". Then this one "legit text".
I will make it one second before the step that we already have that animate. We will put a 5 in there. I could pick it from the video.
This is something that I like to do. You don't have to but it makes it easier to see what is going on. I will move this to the top.
*30.56*
I really should have done it in order. We will keep it in order now.
The same process. Copy the shortcode. We will put it above and below. I will take the end because it needs to be sandwiched.
"Reveal content here". We will move that and we will put the end here. Then I will take up some space.
Now this will not take up any space until we are ready. I will show you what I mean. Oops! I have to save the video. Silly!
I will speed it up here. Notice. No space is taken up by the text until it is ready to come. You will see this. I will move it down to make space for it.
Is everybody following? Are we going too fast? Are we going too slow? Can I speed up? What do you think?
I will go down here. We will get rid of that section.
*32.30*
Brian says: "Perfect." Mountain Jim says:"Speed up." Okay. Good. Excellent.
Now we don't want that thing to stay on the screen all the time. This will go away and it will make room for the next thing.
Now I am going to start doing this "in a row" so that you can see them not just one at a time because that will take too long. We will do several at a time. Then you can see the result. Fair enough.
Now we have this legit section that we want to get rid of.
*33.15 chapter: Content exits - How to get rid of a piece of text *
Here are the content exits. I will pick Slide Out to Right. The whole thing will slide out to the right. It is the same name that we have sliding up so I can just copy that, put it in here.
Notice when you paste something here, the next step doesn't show up? Just hit the spacebar. Now I can pick a time for the video.
Right when I say "Yes." We will get rid of it. I will click the green button.
Now here is a cool thing. I've already got the motion content shortcode put up here so anything I do with this section, after I put this code, right here, I don't have to do it again. I don't have to put it again because it has already got the id, it's already defined. Everything is cool.
I don't need to copy this code because I already did it when I did step one here.
*34.35*
Now I can bring that back in, I cold put it out, I can shake it, whatever I want to do. Right now I am going to make it leap. All right. Next section.
*34.46 chapter: Reveal an image*
Now I will reveal this image. This whole section will be revealed. Look at this. There is no space for it. If I reveal that, we will only see the top part. We will not see the images of the cars and the motorcycle and the Jeep. How do we solve that situation? Simple.
We come in here. We say "OK". I want to change the size of the video. This is super-easy. I will go down to let's say 40%. When I say 40% we are talking about 40% of this content width. Whatever your website is, no matter how wide your content area is, this will be 40%. That makes it mobile compatible. It works for mobiles. Totally responsive. So I resize it and placed 40%.
Let's see when I want to do that. Actually, I know what I want to do. I want to do one second right after.
*35.36*
I don't even need this. I can put in 10 seconds as is right after we slided out the other one.
Then it says "Change size 40". That goes to 40%.
As soon as we change that size we want to fly in these images because now there is room for them.
We will go that. Guess how? It's simple. Pick the action. Here are the reveals. Which one did I have before, that I liked? We will slide in left.
The name of this one is "carbackground". And the time I want it come in is right after I change the video size so I don't need to look in the video. I can just put an 11 in here.
By the way, if you want to fine tune this, you can put in half seconds, quarter seconds etc. I'll click the button.
In this case we have not put the shortcode around that image content.
*37.06*
Let's go and do that. I will copy this. CTRL-C. I come up here. Go right before that shortcode. See the shortcode? It says video background section. I want to do the whole thing. I want to do the background section.
Paste it in there. Again. This have to move, the ending, so that it is sandwiched, so that the content to reveal in the middle of the shortcodes. And we display it at the end. Paste it right there.
Now the video background section is surrounded. It is around the video background section. Now, let's see what the next step is.
*37.51 chapter: Animate another piece of text*
Now I want to animate this text. I want the background to come in. Boom! Then we will animate this text. We have already seen how to do that. I will do it real quick.
Let me know if my pace is going good. I can speed up a little bit if you want.
I will choose text animation. Then we will pick Fade in. Oops! Wrong dropdown. Select the animation. We will fade in. Left to right. I should say Left. Fade in left. That is how that works. Now we will name the section and it will be called, because we do all kinds of vehicles, I will call it "all kinds". Hit the spacebar.
Now we will pick, actually, we don't need to pick because as soon as it animates .... Well, you know what? Let's pick. Why not?
Notice how the video starts where you left off?
*39.15*
There. When I say "cars, motorcycles". That is when I want it to come in. I will click to Insert the time into the field. Click the button. Take the shortcode for the animation. Remember that on animations we want it to be the same size as the text. So it doesn't get confused because of this wordpress editor thing. Delete that. Copy the end to the end. That is it.
You can see that with a little bit of practice this gets easy really fast. Next step.
*39.52 chapter:Hiding the content for the car background*
As soon as I'm done talking about that car backgrounds, I like the way I said car, I come in here. I want to remove that section. I finished.
Let's go to content exits. Let's hide content. What we will going to do with that? We will slide it out to the right. We will pick again, the car background. Now that includes all the words and stuff. It is all in the same one. I can pick the time there. Let's do that.
Again, the video starts where we left off so you don't have to wait.
I want to go just before 18 seconds there. I will change this to 17. I found that works better.
Now a question for you. Do I need to copy this code again? Eh? Forget about it! Tell me. Do I need to copy this code again? I hope you were paying attention.
*41.03*
I think we got it right here. This car background. What do you think?
Ed LaPolla. Man after my own heart.
Patrick, you are almost there.
The answer is no. The reason is that we have already put it up here when we animated this section into the screen.
Once you got one called car background we don't have to put it there again. We can do other stuff with it.
This just assumes that you haven't done it, yet, because every step, we don't know. Since we already got one call to car background, I don't have to put that in there again.
It is already done for me. Forget about it!
What's the next step? Ah, now we get into some cool stuff. All right. Let's save the video changes. Let's take a look at what we've got so far. Make sure you save your video and your content.
*42.09*
We made changes to the content, right?
Periodically, I check my work to make sure I am doing everything okay. Check this out. Let's see how it goes.
There you go. Boom!
Of course we haven't done anything with this other content, but we are going to. We are just working down the page as we go. That is why we were saying in the earlier webinar or the earlier workshop, I mentioned that, it is easier if you put your page together first and then do all your animations and things that you want. That makes it a lot easier because everything is already there. You have it planned out. You know what you want to do. Then this is a matter of timing it to the video. That also works for doing the tours as well.
*43.37 chapter: Doodle video example*
Now I want to start the presentation, but before, yes, I guess we could do that. Yes, let's go ahead.
Now, check this out. I have this video. It's a secret. I've built this Doodle video, with Doodly. Let me show it to you. This is the video. It's real quick.
I have the Doodle video, it goes through, it does its thing. Now we have the story going on. I put that in video no.2.
This is demo background no.2 I put that in there. Don't need to save it. I just copied the shortcode.
Now with the background videos I tend to put them at the bottom of the page because they are really not a part of the presentation flow. I am going to make it a part of it.
There is the background video.
*44.50 chapter:How to set up a background video*
Here is how you set up a background video. It will cover the whole page. This is important. Take notes.
If I go to Appearance, we are in video no.2, it is what I want to use, it is the Doodle video. This is where we get in the multi video presentations.
I check this box. "Use as video background". Boom! Right there. That's it.
I can select an alternate mobile image because on mobile devices there is no way to automatically play a video. We have a way to get around that. We can put a background image in there.
This particular presentation works best on desktop. I have not created one for mobile. When I do, I will actually take the Doodle video and my video and put them together in one video. Either that or I will take a screencast of the whole presentation playing on a website, recording the system audio.
*45.58*
Then I will take that screencast and make it my mobile alternate background video.
Robert, if you are having problems with the video background in your theme just open a ticket at support@simplevideopro.com and we will hook you up.
I am always, always, always striving to make sure that this whole system is compatible with as many themes as possible. There have been times where I found that the themes were not designed correctly so we contacted the theme builder and then they made changes or I will make the changes. I am kind of fanatic about compatibility. No problem. We will get you hooked up.
Now we can do a few things here. We can play the background video with no sound, we can loop the background, if we just want it to play.
Most of the time you will autoplay the background. In this case I don't want to.
*47.04*
Yes, there will be a replay Mike. Absolutely. We don't want this to play automatically.
Here is an important piece of background video and this might be what's happening with you, Robert. I don't know. I haven't seen it.
You have to make the percentage width at least 100%. What happens, if you look at this little text, it says: "Important. Use the percentage width below to specify the width. 100% will span the browser window."
That means that it goes from here all the way to here. But, because of the aspect ratio of videos being like a rectangle, sometimes it won't reach the bottom of the page on bigger monitors.
What we do is we increase the percentage to make it cover the entire window so it will actually go off the size a little bit. I set it at 110%.
If you don't do that, then it will be confusing because it will look like the video is just sitting up in a corner or something.
*48.14*
You have to have it at least 100% down here.
I've done that. I don't think I need to do anything else on this one. I will save it.
Excuse me for one second. I am not actually even sure what microphone is turned on right now. Tell me. Can you hear this noise I am making right now?
-- 48.42 - 48.45 Tapping noise --
How many of you can hear that?
I don't know which microphone I am on. Ah, good, It is on my desk mic. I was hoping it wasn't on the one that I have on my headset here. If it is, then, when I turn away to do that... I am not actually turning away from the mic but now I am. That's good.
We will go to the main video. That is the one that's controlling all this stuff.
*49.17*
We know that, in the presenter, that at 17 seconds we slide up that car background.
Right after that we will start this little presentation. We will move this video. That is super-easy to do.
*49.34 chapter: Starting a presentation. Sticky video*
I will say: "Start sticky video". What "sticky video" means is that if the screen scrolls, that video stays right up here. Start sticky video and we will go to the left. Then, when do we want to do that? We want to do it right after we slide out the car background so I don't need to check the time. But you can by clicking that.
Added to the presentation. Now that's done. That's it. Two steps. You do not have to copy shortcodes or anything.
That's to start the sticky video presentation.
*50.14 chapter: How to hide the background video*
Now we want to Fade in this background video. It will take the whole background of the page. Let's do that.
I will say "Content reveals". Actually, I am not going to fade this one, I will just slide it down. That will be good enough.
I will do that right after we started the tour. I don't want people to wait. We will do that at 19. Actually, let's do it immediately after. We will do it at 18. Oops! Doing the wrong thing. Sorry.
You need to name the section, silly. I am going to call it "bgvideo". That is the name of the section. We will go 18.5 seconds. I will click Add. We have not defined this, yet. We haven't told EBG where to put this. I will do it right now.
We will put it right around this video, right here. Remember, the code need to be around it.
*51.30*
There we go. That's it.
Now, this video no.2 will be hidden until we reveal it. Right here.
*51.39 chapter: Playing videos on queue*
Then, we want it to play on queue. See these ids down here? That is the id for the "Forget about it" Doodle video. I will copy that id and I will use it in just a second.
Now, I can say: "Video Play Control". I can Play Another Video. I can pause another video, I can pause this video. I cannot start this video back up. If I pause the one I am on, it will never reach the next second to start up again until something else plays it.
Yes, Rob, this can take a little bit longer. I am trying to be thorough for you, guys. I hope it is okay with you. When you watch the replay and we get the chapters and everything on it, you will be able to refer to it and basically do just about anything. We are not going to do it in four hours. No.
*52.40*
I will select to play another video. In other words, this video, no.1, the main video, will play this Doodle video. The id to play, I just got from right here. Now I will speed back up again because I think everybody has got that.
The time to play. I want to play it right after I display it. We will do it at 19 seconds.
When I start talking about when you get a shiny, new car and all that stuff. I am doing this right in sequence: 17, 18, 18.5, 19. It's not rocket science. I now that I want to play this stuff immediately after everything just plays and stuff.
Now, watch what happens. Actually, all this stuff will be in our way so how will I handle that?
I think you, guys, can understand this. We have not hidden any of this stuff here.
*53.41*
I will just move it out of the way for now. We will have some space in here. Just to get it out of the way. This is for demonstration purposes. Normally, I wouldn't do this. I just want to be able to demonstrate this to you.
This thing plays the video at 19 seconds. I will save the video changes. We will update.
Ed says: "Breaking it down into individual step chapters will be great, otherwise having to follow the whole webinar to find one step to do is pretty hard." Absolutely. We will make good use of our chapter utility and our chapter tools so you quickly get to what you want to use, as a reference. Now, let's take a look.
*55.04 chapter: Correct the timing*
Notice what happened there. It was off. It wasn't timed right. We will deal with this in a second.
Now there are two ways to do this. There is the hard way, which is to go back into Doodley or whatever program you use to make these animated videos, these Doodle art videos. Go back in here and try to retime all of these little pieces so that they are timed to the main video. But what happens then if you decide: "Oh, I want to reshoot that main video. I want to add a couple of things."
Now, you have to go back and you have to recreate the other video, which is a real pain in the neck. We won't do that.
We will say:"Hey! Stop it!" We will pause that background video, when we want. It doesn't have to be a background video, by the way.
*56.21*
It can be another video on the page. Again, this whole starting and stopping, pausing and playing thing, automatically, doesn't apply to mobile. But, 50-60% of your visitors are still on desktop on many, many sites. I know ours are. Don't forget about that.
Yes, Jimmy Kim's Doodle video making software. If you don't have it, you should. But if you don't, let me know at ask@simplevideopro.com. Send me an email at ask@simplevideopro.com and we will see if we can get you hooked up at the launch rate. Most of the people here should have it.
Excellent, Rob. Send me an email to ask @ simplevideopro.com and I'll get you hooked up.
*57.14 chapter: Pausing the video at the right place*
Now I want to pause that other video at the right place. I will say "Pause another video". Again, the video ID the one we are working with this is this background video, it is no. 2. Timed in seconds. I can go in here.
When I start talking about "you are happy about the car" , a few seconds after, I did have to look at the other video to see how long it was exactly. It was like five seconds or four seconds, something like that. I will go and insert this time into the field.
Right at 23 seconds we will pause that other video. Then, we will play it again, when we are done with that piece and we start on the car accident piece.
*58.15 chapter: Play another video*
Now, we will say "Play another video". Then we will enter the id to play. We've already got that here. Seconds. It will be a couple of seconds here.
Bam! I want to say "Bam!", I want it to continue because I want it to go on to the next part. Insert the time into the field. Now we will do that a couple of more times here. I have hit the green button.
Now we will pause it at the end. Pause it in the video. In video. Click the button. it Goes back to where we were.
All right. There we go. Now we will say "Denied". Right where it says:"Denied" I will pause this. Because I am going to make a point.
*59.25 chapter: Emphasize points that you want to make*
Now this is the part of where we talked about emphasis. This is the technique that you can use to emphasize different points that you want to make.
Usually there will be positive points about your product. In this case I am doing a Reverse. It's a the negative point about the competition. What you do, after I put this in here, I have to click the green button, don't forget that, is you increase the size of that video.
Now we are in video tour mode or sticky video mode so right here where it says "Sticky Video Re-size" I will resize that video to 80%. It will resize to the center of the screen.
Now, I want to do that right after we pause the main video, right after I say "Bam!". Let's do that.
We will say, down here is 34 seconds. We will put 34.5 seconds.
*1.00.30*
Sorry. I have to name it. No, I don't. 34.5 seconds. We will do it immediately after we pause the video, the background video. Boom!
Is everybody following? Is this okay? Does anybody have anything they are missing?
Redge asks: " Is easy sketch okay?" Yes. Any video. You can do this for sketch videos. You can do this with live videos, you can do this with sports videos. Anything. Okay. So far people are following. Good.
It is not too complicated. It is just a number of steps and you choose how many steps you want. You can do one step on a page. You can do a simple tour and then back to the top. It is all up to you.
Now, I will go through here. Let me get back to where I was. Tour size. Okay so we will emphasize a point. Then we will go back to where we were.
*1.01.43*
If we go down to the sizing, it says Return to Default Size-Left or right. I will go back to where I was. Then I will tell it when I want to do that, which is going to be immediately.
I want to just emphasize that second time I say "Denied" . I will insert that in here. Click the green button. All of that is good. I was bringing the tour back to its default size.
What we were doing is timing this background video, using the main video to start and stop the background so everything is cool. Then we did an emphasis point that I will show you in a second and we go back to the default location, which is on the left. Basically, it takes it back to its normal size.
Now, after we go back to our normal size at 36 seconds, I want to play the background video again.
*1.02.54*
I am just curious. Does anybody ever seen any system that let's you control, set up a full background video and then control it? With another video? Anybody ever seen anything like that? I think I know the answer.
Now, video id to play. Again. This is the background video.
Richard says: "No." Selwin says "No". No. Neither of I.
Chris says: "Of course not." Jake: "That is why I am here."
Ary, not quite similar. Trust me.
Yes, Tim. That is a really good point. Tim just made a really good point. He says: "Oh, sure." I think that is meant to be in a Brooklyn accent. He says: "Oh, sure. Yeah, those guys that charge $2000 a month. They do that." That is actually true. We will talk about that in a little bit. We've seen some tools that, they still don't scratch the surface of what we are doing.
*1.04.23*
But yes, they charge $500 to $2000 a month for their tools. And they still haven't touched us.
Now we will play this video. Enter the time to play. I want it to play right after I go back to shrinking my video backup. I will do it at 37 seconds. Hit the green button. Put it in there.
Now, the last thing I want to do, when that video is over, when I am finished making my point ... .
Now, when that video is over or when we've made our point, I want to get rid of that section with the background video so I am going to make the video go off the screen. We will do a slide out to the right.
The question is what was the video background section name? That is really easy to find. We just go up here. We put it at the bottom.
*1.05.31*
"bgvideo". Easy. It is already there on the screen. When do we want to hide this thing? Let's find out. Okay. It is where I want to say "anyways". That is going on to the next subject.
I will insert this time into the field. That is when we want to get rid of this background video section. I have already defined the section. Right here. I don't need to copy this code. That is it.
After we do that, we will end this sticky tour where this thing is up in the corner, stuck on. See I want to move the screen. It doesn't move. Yes. Just the background video.
*1.06.33 chapter: Ending the sticky tour*
I want to end the tour. We just select, under Sticky video (Tour guide), End sticky video (return to original position).
The time to do that is right after we slide this other thing out. 55 seconds. Boom! Done! It says "end". That is how you know where the end is.
*1.06.58 chapter: Animating another piece of text*
Now I want to do a couple of other things. We have this whole thing where I say " No worries." "You Don't Gotta Worry About Nothin"' We will slide that up and do a reveal.
I want to slide it. Did I slide it up? I did the Expand Up. I like the Expand Up. It is kind of cool. It points things in there.
We will call that one "noworries". We will do it right there. "Forget about it. You don't gotta nothin' to worry about." This is what I say.
*1.07.47 chapter: How to navigate easier when you have a long video*
By the way, if you pass the time, you can use these. If it is a very long video and becomes difficult to navigate, you can use these. They go back five seconds. If you have a really long video and you can't get: "Oh, man. I just missed. It keeps jumping back like five minutes." Whatever. You can just use these. You can keep clicking them.
Right up "forget about it, no worries", I will insert the time. Click the action. Put it in there. Now, we will take the code. Put it up there. I will stick it above and below because for motion content, you want to be on a separate line. For animation content you want to be on the same line. We just surrounded that.
I will take up the space now. All the space here, that I made for demonstration purpose, that we don't need.
*1.08.58*
Don't over do it. Now "don't worry" will come up.
Now we have these two sections here. After we display this "don't worry", we want it to go away in just a minute. Let's do that. Then I will show you dynamic content and then we are done. We are a little bit late because we got a couple of distractions.
I am in the presenter. The last thing I want to do is I want to move that out of there. I want to fade it out.
We give you lots of different ways to transition content and we are constantly adding more. I've actually got a few more that I am putting in. It is kind of secret because I am still testing them.
The idea is to give you a variety so you don't bore people. You use one like 2-3 times and then switch it up.
*1.09.52*
Now we have to do the "no worries' section which is space that here. Hit spacebar. When do we want to do that?
*1.10.08 chapter: Dynamic user defined content*
Now we are going into the questions. This is where the dynamic user defined content delivery comes in. We will put that into here. Hit the green button.
You don't have to copy this shortcode again because we already did it. It is already up there for the last step.
Now, we are done with this presentation. I will save video changes. Go back into the same video.
*1.10.41 chapter: In video apps*
Now we will do in video apps. If you don't know what that is, that is when the video has buttons inside the video. Oh, you know what I missed? I missed one.
Right here. I was supposed to make room for this text to show up by making the video smaller. Right here.
Let me add that. I will show you how to add that. It is really easy.
*1.11.03*
We want to shrink the video up because that text will come up and I don't want it to be below the fold.
Now we have already done this one: Sticky video resize. That is when we were doing the little tour guide thing that is stuck to the screen. If you want to resize one that is not in sticky video mode, then use this. I will say Resize in place. It does not move. We got that.
I will do that. I am just looking at my notes. It's over here. We do that just before we bring the words up. I will do it right at 58 seconds. There we go.
*1.11.53 chapter: How to allow users to choose what they want to see*
Let's add some interactivity so our user can choose what they want to see.
This part is actually really cool. It is very easy, too. The same as before. You just do the same thing over and over again.
We have to make a choice. We have this choice car. By the way, here is a new feature I added that is coming out. When I release this today.
Yes, Tim. Thank you for reminding me. I am kind of behind schedule. When we have time, I will take care of you. Thank you.
We will do the car choice first. I will browse. Now what is cool about this, I am picking the button. You can use any image you want. But here is the little caveat. Let me show you something.
*1.12.42 chapter: Resizing for mobile*
When you are looking at the Appearance tab, see this Max Width? I really have to rename that. In fact, I will make a note: "Max width." I have to rename this.
This is a starting width. If I have a video and my starting width is, let's say, 1000 pixels, that means that anything I put inside that video will be resized in accordance with that 1000 pixels width. It will be a ratio, it will be proportionate. That is the word I am looking for. All right. So it will be proportionate to this size here. If I want a button to go one third of, across the video screen, I will make that button 333 pixels wide.
Since I've done this, Eyeball Glue knows the button is 333 pixels, the proportion width that is set up here is 1000 pixels.
*1.13.42*
I know that button should always be one third the size of that video so that when the video resizes per mobile or resizes in different aspects of the training, when you are resizing, the buttons resize also proportionately to the video size so it is always mobile compatible, it is always in step with what your presentations are doing.
It is really important to put that and it is also really important to put your percentage width in because that is what makes it responsive and makes it resize depending on how big the browser screen is and how big the content width is. If you have a responsive theme that resizes for mobile, this will make the videos and the skins and everything resize as well. And the buttons inside.
I think that makes sense. Let me know if it doesn't.
Where was I? I was in video apps.
*1.14.40 chapter: New feature - in content apps*
New feature: Put the overlay in your content, not inside the video
Another thing that I added on this next version is you can now take a shortcode and put it on your content not inside the video. You can put it on the content and that button will do all the things that the button inside the video can do. That is new too. That is pretty cool stuff because now you can use buttons outside the video to start and stop other videos.
Now this particular button, I will make it, this is the car one, right? Yes. This is my button for my car. I just select it. If you have it on your desktop, you can literally just drag it up. Done that. Is that easy. Click Select.
Now I have my button. If I mouse over it can, oh, yes, that is the right one. I am not doing any behavioral tracking right now.
*1.15.41 chapter: Causing an event*
I will cause an event. There are two ways. You can link to a url which would be like an affiliate link or something like that or you can cause an event. That means when you click the button you can set in motion all different activities, all different actions.
We will do a couple of things here. We will start another video. I look down here: "Forget about it car". That is video no.3. I will put Play another video. Video no.3.
I will start that video at the beginning so I don't have to put anything in Start at. I will pause this video, whenever the banner is clicked. Then I am going to hide this video, whenever the banner is clicked. So since they clicked, this video will not go away.
I can scroll the section. All kinds of other stuff can happen.
*1.16.36*
I can seek to different chapters. It just goes on and on. We are not going to get into all of that right now.
Now, I want to reveal content. When I click this button I want to reveal a whole section about cars.
It's funny. When I go to New York, my family tease me. They say : "How do you drive your carrr?" "Do you like to walk the dooog?" They think I am hilarious. Anyways.
Now we will take this shortcode, just like we did on all the other ones. I put in the name of the section. I have to identify it, all right?
I go up here. I want to start that right here. Right before video no.3. The car video. Then I will put video no.3 and everything else in between. Copy. Copy. Delete this hidden content to reveal here.
*1.17.45*
Go down to the bottom and just before video no.4, which is the motorcycle, I will end that.
I will do the same thing for motorcycle. I'll do that in a second.
I want to put this icon over here because that is where I point for cars. Then I want to put it in the video. Where?
All right. Here is where I say "motorcycle car". Insert the time into the field. I will do this when it is 64 seconds because car is the second thing I mention.
I want to put the duration for 9999 which means keep it there until the end of the video. Then I will also set an animation. I will call it "Zoom into view' because that is kind of cool.
When they click this button, this section will zoom into view. It will start video no.3. It will pause this video, hide this video.
*1.18.55*
All these things will happen. We can hide other content on the page. All kind of stuff.
Now I will add the next one, which is "Choice" video or "motorcycle". I will pick this icon. We will pick this motorcycle icon and we will cause an event. We will start another video, which will be video no. 4. Pause this video, hide this video. If they pick this one, it will do a different section. It will reveal a different section. That section will be "choice motorcycles".
I will copy that code. We will put it right before video no.4, at the end because it has to be sandwiched. I will put it after the end of "motorcycles" but before the background video.
You don't want to hide this background video in any other action. That is why this is before that. It will sandwich this whole thing here.
*1.20.09 chapter: Opt in forms*
I also added an opt in form. You add opt in forms. Go to Eyeball Glue for Websites in the new version, Simple video Pro in the old version. Eyeball Glue for Websites and then AR webforms, which would be autoresponder webforms.
If you look in here, I have a "forget about it cars" and "forget about it" motorcycles. If I go and edit those, I hooked them up to Aweber, I targeted a campaign, which is just a task because this is really just for testing. Set the background image to a faded background. The color scheme. Then I selected this two step opt in. And a custom button title.
Now, I run out of time. I was going to make a custom button because it looks better but for right now, we just have an old text button.
We will add the ability to change the font size and the font weight of that text.
*1.21.10*
So that is that. Now all you do is you go up to the top, you put your cursor where you want, you click insert EBG Web form. You pick your web form from the list. Make your selections and then click Ok and it puts a shortcode in. That is all I did to put these web forms in. They are two step opt in forms. They are pretty cool. Proven to convert better.
That is it. We are done. I will save this video. We have our two buttons in. Our buttons do cool things. Oh, wait. I have one more thing to do. I forget to select an animation. We will do a Zoom into view for the second button. Then I have two give it the time. What do we do the first button for? 64. So this one will be at 63, I think because motorcycle was first.
*1.22.08*
You can have one after the other. Put that on the other side. Save video changes. I will save the page. Notice the timing.
*1.23.32 chapter: Correcting a mistake*
I have a little mistake. This came back. You can do whatever you want with this video, when it is done. If they click the button, it comes up with the car form. If they are on motorcycle, that's the motorcycle there and the motorcycle rates.
That is in a nutshell the user directed content. We give them what they are interested in. The only thing I have to do is to figure out what happened with this "don't gotta worry about nothin"'. There's no worries. It is called "noworries". I go take a look to see where I made the mistake. I go to the Video presenter. Find my "noworries". Oh, I selected the Fade in. I will put Fade out. Now it will be just fine.
It is pretty simple. Usually here there is a mistake like that, there is a mistake in the time or something.
That is it. That is how you set up that whole thing.
The nuts and bolts, from A to Z.
END OF THE VIDEO
Thank you for coming and welcome to the Attention Span Control Advanced Engagement Workshop.
In this workshop we will go through the details of much of what we talked about in the last workshop.
*0.15 chapter: Your host today*
For those of you who don't know me, my name is Nicholas LaPolla. I've been a programmer for over 25 years. I've developed programs as a web developer for 15 years. I've developed numerous programs.
*0:33*
I am the creator of Eyeball Glue for Websites, Simple Video Pro Interactive, FanBuzz and many other pieces of software.
In 2012 we launched Simple Video Pro for the first time and we had the top no.1 grossing WSO in 2012 and we still hold that record today. We have been evolving the system since then so we are not going anywhere. We've been with Simple Video Pro and Eyeball Glue for Websites. It's been a product since 2012 and we continually improved it and take your feedback on it.
*1:09*
Our second launch of SVP was also well into six figures and we've got, between Aon and myself, multiple high six figure and seven figure launches like VideoMakerFx and Explaindio that we spearheaded and managed those launches and brought them to the heights.
*1.33*
I live in California with my family. Three boys, a beautiful wife and a wonderful white dog.
I do things like training in martial arts in my spare time. I got my first black belt in 2007. That was a proud day for me. It was an excellent day and a hard day, too.
*1.50 chapter: A few technical difficulties*
Before we go on, I am going to do a little review of what we went through last time, in the last webinar. I am doing this because many of you were not on the first webinar and apparently, some people haven't received the replay, yet.
Can you all see my screen? I have someone saying they are not seeing the screen. Please, let me know if you can see the screen.
Ruth, if you can't see the screen, please, refresh your browser. It should pop up for you. Okay. Thank you everybody. I appreciate that.
Brian, if you can't see the screen, please, refresh your browser and you'll be able to see the screen as I am going.
I'll wait just a second for you to do that.
Dick, before we get going dot, dot, dot, dot. Hmm.
Oh, hi, Frances. How are you? Good to see you here. Good to see everybody here.
*2.50 chapter: Reality check. Quick recap*
Before we get going I am going to do a quick recap. The average online visitor leaves a website in about 30 seconds. They pop in and they pop out. This is particularly bad because Google tracks how long people are on your pages. When they do that, they calculate what is called the bounce rate. If you get a lot of people bouncing off your site, a high percentage of people bouncing off your site, then Google assumes that your site doesn't have the information that people is looking for so your SEO rankings actually suffer and go down as a result. You want to have people sticking on your websites.
You don't have a lot of time. You need to get them involved. Unless they are engaged, unless they are captured, their curiosity is peaked or they are distracted or their lack of interest is overcome, you're basically screwed.
*3.46*
People are impatient these days. That's a fact.
You just can't build websites like they used to build them in 1999! Your web pages absolutely must engage and entertain people when they get there, the moment they get there.
You need to interact with people. You need to inform people, get them the information that they are looking for, deliver what they want, put the viewer in control, if possible, of what they see of the content. Then, of course, you need to be contiguous and you need to be synchronized with all of your materials, colors, layout, design everything so that people don't suffer from cognitive overload, but, at the same time, they don't suffer from boredom. There is kind of a fine line there.
*4.41 chapter: Today's topics*
Okay. This is Advanced Engagement. We are going to talk about interactive user engagement. I am not just going to talk about it. We will show you the nuts and bolts of how to put it together.
We will talk about full page presentations and put that together.
Then we will talk about dynamic multi video content. There is one that I actually left out of this list and that is user directed content.
*5.13 chapter: Last week quick review*
Now, I'll do a little bit more of a review of last week. We talked about engagement in different ways. One way, using user comments, using standard wordpress comments, if you are using wordpress.
We also talked about Facebook comments. We just created a new tool. It's in the next edition that is coming out. I'll have that link on the download page, after this webinar, so that you will be able to go and get the latest and greatest of SVP and Eyeball Glue for Websites.
We talked about video presentations. There were two types. There was the bit by bit presentation, where you show them one thing at a time and control everything that the viewers see, timed with the video and that is on the webpage and not just in the video.
We also talked about doing existing pages and animating small portions of them, but allowing people, if they want to, to pause the video.
*6.12*
Then scroll around, but, at the same time, giving them the potential of having a tour of the page where the video scrolls the page automatically and takes them on a tour, highlighting things that you want them to focus on. They don't just breeze on by and skip stuff.
Then we talked about user directed content.
Now, we only have time for the bit by bit presentations, today. Along with some user directed content. I want to show you both of those. It's very powerful. Then in the next webinar we will go over the existing page tours and how to tour people up and down a page. That is actually pretty easy but you can do a lot with it.
*7.00 chapter: Why do you need to have video?*
Why do you need to have video? Still a little bit more review for those of you who weren't here.
Did you know, that, according to comScore, 64% of consumers are more likely to purchase products after watching videos about those products? It is really important. I still see a ton of pages out there where it is just static images, a little description on the side and then a price or an Add to cart button.
I am amazed because the companies that are doing really, really well in ecom, in affiliate sales and things like that, they are doing video.
Using video on your landing pages can improve conversions such as opt-ins and stuff like that, by up to 80%. That is insane, not to do video. For various reasons, people don't like to. Some people are afraid of video, some people don't want to be on their own videos.
*7.58*
But you don't need to be on your own videos. You don't need to be afraid. You don't even need your voice. You just need the tools to put the stuff together.
Having a video on your homepage has been shown to increase conversions on the site, generally, by about 20%.
That is not even having a video on every page. Just on your homepage. It gets people's attention.
Now, almost any type of video can do the trick. Of course, videos like Doodle Videos hold attention because the viewer naturally wants to see the finished drawing.
I was actually reminded, just yesterday, that I had promised to do some interaction between Eyeball Glue and Doodle videos. In the last minute I put together a pretty cool presentation that I think you will enjoy. I kind of wanted to steer away from doing the same bland, you know, the numbers this year were greater than the numbers last year and then the charts went up. That kind of thing.
Is it okay if we have a little bit of fun today, a little levity? How does that sound to you, guys and gals? Is that okay with you, guys?
*9.20 chapter: Control the eyes - Control Attention*
Here is what we are going to be showing you today. We will show you how to control the eyeballs, how to control the attention of the viewer, of the visitor to your webpage.
This is the way that we achieved an 82% watch-through rate on an extremely long video. We are talking about a 13 minute video. We achieved an 82% watch through rate. 82% of the people were actually finishing the video. We're getting within five seconds at the end of the video.
We also used the same techniques to reduce our bounce rate. Remember I told you just about a couple of minutes ago about bounce rate and how Google measures when someone comes to your site and leave immediately. That is considered a bounce. If you have too high of a percentage of people doing that, then it is bad for your SEO, it's bad for any kind of ranking hopes that you have.
*10.15*
The lower the bounce rate, the better and we were able to achieve 10.78%, which we are told is, by leading experts in SEO, that is almost unheard of. 20% is actually very difficult to get to but we achieved 10.78. That is pretty incredible. Using this technology.
We also improved our conversions, from when we used just static pages to using the Eyeball Glue, to up to 400% better conversions on sales than we had in the past. That's pretty incredible and these are the techniques that I will show you today. So without further ado let me get right into what we are doing today. Before we begin, I am going to show you a quick demonstration. This is where the fun begins. I hope you will like it. Let me turn off my speakers here.
*12.41 chapter: Quick demo*
-- The video plays showing the demonstration. --
All right. There was our little demonstration. Of course, we have two step opt in forms where people can go and sign up where you can put the opt in form right below. Now let's go into how we created this. What do you guys think? Cool?
No. I am not from the Bronx. I just like to do the Bronx. The accent, all right? Mafia proofed. Absolutely. My cousin Vennie, you know, he set up a thing, okay. It's legit.
*13.20 chapter: Overview of the page*
What I did is I created a page that is just vanilla. I didn't put a lot of time to design this. I will when I put out the actual demo that will be public for you guys to take a look at and play with.
By the way, we will be having a Q & A at the end. If your questions are not answered while I go through this presentation, then they will be answered in the Q & A. You will have a chance to put your questions in then.
Let's take a look at the page. I will slip in and out the Italian, Brooklyn accent thing.
We have this page. Basically we have all the content laid out. We don't have any backgrounds or anything like that.
Patrick, if you have no visuals, please, either try opening this in Chrome or just refresh your browser.
*14.37*
We have this page. It is basically laid out pretty sparse. But you can see all the content is there. This is a lot of what I see on webpages. There might be a little more design behind it. Like I said this is kind of last minute thing I put together.
Michael is asking "Only on wordpress?" No. You can use one install of Eyeball Glue on a wordpress site. A lot of people do it in a subfolder and then you can use that as your video manager to manage videos and these kinds of presentations on other external pages through embeds so you have your own personal video management studio.
I am not going to be able to stop and answer tons of questions because if I do, then we will be here for about three and a half hours. We will take care of the questions in the Q & A.
*15.43*
Thank you very much. Appreciate the questions tough.
If you have questions, please, get a Notepad, maybe write them down, jot them down. If I am not answering during the webinar or doing the workshop, then please, let me know in the chat box when the Q & A comes.
We have this page, like i said, I didn't put a lot of design into it like layout, colors and all that stuff.
We are going to do some of that right now because I want to show you some of our design tools which we continuously improve. You can see that you have to scroll down and people will go "Okay". They will just browse and see what they want to see.
You want to control their eyes, you want to engage them right away. That is what this presentation does. Let's go ahead and edit this page.
*16.31 chapter: Decide what you want to do*
The first step is to decide what we want to do. What we are doing here is we are going to do some animations where it is timed with our audio in the video. It is timed with the video. We will also add some design elements to this page. I want to put a background behind this content.
Remember the background had the cars and stuff? I want to show you how you can do that. It is really simple.
*17.00 chapter: Put a background behind the content*
It's really simple. Just highlight the content and go up to the toolbar. This little icon says: "Insert EBG video background". This is actually changing. We are removing it from the toolbar and we are putting it down here, like we do the video settings. Then all you have to do is put a shortcode up. It will be much easier to manage and change. But in this version we've got the toolbar button.
Select the content first. Select the background. Pick an image. This gives the ability to create wide band, meaning it goes all the way accross the browser window, image backgrounds and video backgrounds. This is really cool because, normally, you need to have a theme or something that does it for you.
This way you don't need to do that. You can just use the Eyeball Glue background plugin. I am going to say: "Full width of browser window".
*17.56*
That's what I was missing. Then we will go and get that url again. Web url. Https always. Copy to the clipboard. Here I do not want this background to repeat. I am ready to put it in. There we go.
There is our background.
Now, let me take a look at this. You will see what I mean by wide band image. But there is going to be something wrong with it.
Notice the cars aren't fully displayed. That is because this is designed to grow and shrink with the content that you are displaying.
We will be adding some features to actually make it a static height. It just causes some issues because we want to make this compatible with mobile, which it is, by the way.
All you need to do is put a few returns in. Just to pad space. Update and then refresh.
*19.13*
Now, I've got a couple of extra, but I just put a background color in there. So that looks much better.
Now you can see how you can add design elements to the page using Eyeball Glue, using it's built in design elements to actually break out of the restrictions of your theme. Normally, these backgrounds only go the width of the content area which is just from here to here. But we've got it so that it will actually stretch across whatever size browser screen they have. That is step one.
*19.46 chapter: How to animate a text*
Now, we are going to animate some of this text. Let me show you how to do that. It is pretty easy. We have a wizard and everything. The first video that we have is our Eddie Sanduccie's "forget about it" insurance. And forget about it. We are going to go and edit the "forget about it" main video.
I've already put the videos on this page just to save time. It is very simple. You just click, enter the name of the video and click Add Video. I put in the video source right here. It is very specific and it is very clear.
Now, this video if you go to the Actions tab, we want to autoplay it so that's checked. Cool!
I put a cool frame around it. That is kind of Eddie Sanduccie's fancy metal frame. He is kind of a fancy guy. At least he thinks he is. Then I've also hidden the control bar.
*20.49*
I am going to do that right here. You have full control over your control bar which you can display and hide. I am going to hide the whole thing. And here is where the rubber meets the road on these interactive presentations.
This is where it gets really cool. I am going to check this box and it brings up this little wizard.
*21.12 chapter: Video Presentation Wizard*
The first thing we want to do is to choose the action that we want to happen. And for this I want to animate that text on to the screen. Let's go ahead and do that. I will select Text Content Animation and then select the type of animation that I want.
I can select any of these. By the way, when you select these it is cool because it previews right here. If I change that, see how it is previewing?
If I change that to, oh, I don't know, Rotate In Up Left, you can see, now the animation changes. It gives you a little preview. I will select, I didn't remember what I selected in the last one. Let's see. Bounce In Up.
We will select Bounce In Up. We can see what that does. Then we can choose if we want it to go Left To Right, Reverse, All At Once or Shuffle the Characters.
*22.33*
We can also choose if we want it to go One word at a time or One character at a time. I will go One character at a time.
Now you can see. It goes one character at a time.
That is the animation I've chosen. Pretty easy. It is just point, click, select your animations from the list. That is it. Now we are going to name this section and we are going to call it "legittext", because it is legit.
Now we have to pick a time that we want to animate it. This is also very easy. You just click this little icon. The video comes up.
All right. Right when I was saying: " It's 100% legit." That is where we want this to happen. Insert the time. I actually want it to happen a little earlier so I will make it 6 seconds. Then click the green button. It adds it to the list.
*23.47*
Now, let's check and see how that looks.
Copy this. See this text in red here? It says place the highlighted content into your content.
I am going to copy that. That is the shortcode for this animation. We will just go up and we will put it right in front of the text. With text animations I do want it to be big, because of the way the wordpress editor is. We need it to be the same size as the text for animating. Then I just removed the end and paste it on after the content that I want to animate and now we are good. Now I can just save the video. I am going to speed this up in a minute.
I see there is some confusion as to the differences between Eyeball Glue and Simple Video Pro.
*24.44 chapter: Eyeball Glue and Simple Video Pro*
Simple Video Pro is the umbrella that covers everything. Eyeball Glue is a new edition that we've made to Simple Video Pro. We had in the past a little problem with people remembering the name, Simple Video Pro. They would always mess it up and confuse it with others.
Ever since we started saying we have Eyeball Glue for Websites I had people coming to me saying "Where is the Eyeball Glue?" On top of that, Eyeball Glue really is a better description of what this tool does because it literally glues with video, people. And it glues their eyes to the screen. Their eyes are darting around, they are watching everything that is happening. They haven't seen this before. It is novel, it is new. It's cool. It keeps their attention. Thus we are actually changing it and we are just calling it what it is. It's Eyeball Glue. Eyeball Glue for Websites.
*25.50*
When we say that it does include Simple Video Pro. It is all powered by Simple Video Pro Interactive. I hope that clarifies for you. If your plugin still says SVP, if you have a current license as of March, then you have the Glue. We are changing in the next version. The plugin name actually has changed. It is now Eyeball Glue for Websites powered by Simple Video Pro.
You will see all of this stuff in your system, if you have a current renewal. If you don't, then I will show you where you can renew in just a little bit to get all of this at a very good, good, good, good, ridiculously good price. I'll be sharing that with you in just a minute, Tony.
Amy says: "How much is EBG? I have the first SVP?" It all depends on if you are current on your renewals.
*26.52*
If you are current on your renewals, then you are good. You've got it. You got everything. We always provide a year's worth of these updates, when you renew.
Where were we? We were going to check this out. I don't remember if I saved the page. I think I did. I saved the video. Let's update the page to be sure. Let's take a little look at what happened here. Refresh the page.
Notice that. There are no words here. The "100% legit" is not there so watch what happens.
See how that came up? Right when I timed it. It is as simple as that. You simply go to the three steps in the wizard, name the Content, Copy the shortcode, you are done.
Now it is just a matter of repeating that for each of these pieces that you want to animate.
*28.01*
Some people might stop there and leave everything the way it is, some people might want to continue. I choose to continue because I want to make a really cool presentation.
The thing about animations that you should know is that they take up space on the page even before they are revealed, before they animate. If you have a bunch of animations on the page, you will have this space right here, this gap.
I am going to do a little housekeeping here because my computer always gets these Adobe programs that take up like 13-20% of my memory. Hang on. There. It's an Adobe application version checker and it sits there and it just runs it. 30% of my CPU and I don't get it. I will just shut that down. Sorry about that.
Now, let's make it so that, until we need this, it is not taking up space.
*29.15*
John says: "So this is a part of SVP? Correct. We don't have to pay anymore money for Eyeball Glue because it is the new name for SVP". If you are current on your renewals, that is absolutely correct. There is no additional cost for Eyeball Glue. We won't pull one of these deals that some other people have pulled where they were like: "Oh, version 2.0? No. No. No. NO. You have to buy version 2.0. It is a different product. We don't do that. But, at the same time we want to have a legitimate, not legitimate, totally legit. We want to have a legitimate and sustainable business whereas we can keep providing these services to you. That is why it is an annual renewal. But it is locked in and it will never go up. I will explain that in a minute.
*29.58 chapter: Hide content to save space*
I will make it so that we don't occupy that space. In the Presenter, before we do this animation we are going to do a reveal.
The whole section will be completely hidden. It won't take up any space until we want it to be there. I am going to do an Instant Reveal. Oh, let's just... . It doesn't really matter. I'll do a Reveal Slide UP. And we will call it the same name. Actually, no, we will not. We will call it "legit". Then this one "legit text".
I will make it one second before the step that we already have that animate. We will put a 5 in there. I could pick it from the video.
This is something that I like to do. You don't have to but it makes it easier to see what is going on. I will move this to the top.
*30.56*
I really should have done it in order. We will keep it in order now.
The same process. Copy the shortcode. We will put it above and below. I will take the end because it needs to be sandwiched.
"Reveal content here". We will move that and we will put the end here. Then I will take up some space.
Now this will not take up any space until we are ready. I will show you what I mean. Oops! I have to save the video. Silly!
I will speed it up here. Notice. No space is taken up by the text until it is ready to come. You will see this. I will move it down to make space for it.
Is everybody following? Are we going too fast? Are we going too slow? Can I speed up? What do you think?
I will go down here. We will get rid of that section.
*32.30*
Brian says: "Perfect." Mountain Jim says:"Speed up." Okay. Good. Excellent.
Now we don't want that thing to stay on the screen all the time. This will go away and it will make room for the next thing.
Now I am going to start doing this "in a row" so that you can see them not just one at a time because that will take too long. We will do several at a time. Then you can see the result. Fair enough.
Now we have this legit section that we want to get rid of.
*33.15 chapter: Content exits - How to get rid of a piece of text *
Here are the content exits. I will pick Slide Out to Right. The whole thing will slide out to the right. It is the same name that we have sliding up so I can just copy that, put it in here.
Notice when you paste something here, the next step doesn't show up? Just hit the spacebar. Now I can pick a time for the video.
Right when I say "Yes." We will get rid of it. I will click the green button.
Now here is a cool thing. I've already got the motion content shortcode put up here so anything I do with this section, after I put this code, right here, I don't have to do it again. I don't have to put it again because it has already got the id, it's already defined. Everything is cool.
I don't need to copy this code because I already did it when I did step one here.
*34.35*
Now I can bring that back in, I cold put it out, I can shake it, whatever I want to do. Right now I am going to make it leap. All right. Next section.
*34.46 chapter: Reveal an image*
Now I will reveal this image. This whole section will be revealed. Look at this. There is no space for it. If I reveal that, we will only see the top part. We will not see the images of the cars and the motorcycle and the Jeep. How do we solve that situation? Simple.
We come in here. We say "OK". I want to change the size of the video. This is super-easy. I will go down to let's say 40%. When I say 40% we are talking about 40% of this content width. Whatever your website is, no matter how wide your content area is, this will be 40%. That makes it mobile compatible. It works for mobiles. Totally responsive. So I resize it and placed 40%.
Let's see when I want to do that. Actually, I know what I want to do. I want to do one second right after.
*35.36*
I don't even need this. I can put in 10 seconds as is right after we slided out the other one.
Then it says "Change size 40". That goes to 40%.
As soon as we change that size we want to fly in these images because now there is room for them.
We will go that. Guess how? It's simple. Pick the action. Here are the reveals. Which one did I have before, that I liked? We will slide in left.
The name of this one is "carbackground". And the time I want it come in is right after I change the video size so I don't need to look in the video. I can just put an 11 in here.
By the way, if you want to fine tune this, you can put in half seconds, quarter seconds etc. I'll click the button.
In this case we have not put the shortcode around that image content.
*37.06*
Let's go and do that. I will copy this. CTRL-C. I come up here. Go right before that shortcode. See the shortcode? It says video background section. I want to do the whole thing. I want to do the background section.
Paste it in there. Again. This have to move, the ending, so that it is sandwiched, so that the content to reveal in the middle of the shortcodes. And we display it at the end. Paste it right there.
Now the video background section is surrounded. It is around the video background section. Now, let's see what the next step is.
*37.51 chapter: Animate another piece of text*
Now I want to animate this text. I want the background to come in. Boom! Then we will animate this text. We have already seen how to do that. I will do it real quick.
Let me know if my pace is going good. I can speed up a little bit if you want.
I will choose text animation. Then we will pick Fade in. Oops! Wrong dropdown. Select the animation. We will fade in. Left to right. I should say Left. Fade in left. That is how that works. Now we will name the section and it will be called, because we do all kinds of vehicles, I will call it "all kinds". Hit the spacebar.
Now we will pick, actually, we don't need to pick because as soon as it animates .... Well, you know what? Let's pick. Why not?
Notice how the video starts where you left off?
*39.15*
There. When I say "cars, motorcycles". That is when I want it to come in. I will click to Insert the time into the field. Click the button. Take the shortcode for the animation. Remember that on animations we want it to be the same size as the text. So it doesn't get confused because of this wordpress editor thing. Delete that. Copy the end to the end. That is it.
You can see that with a little bit of practice this gets easy really fast. Next step.
*39.52 chapter:Hiding the content for the car background*
As soon as I'm done talking about that car backgrounds, I like the way I said car, I come in here. I want to remove that section. I finished.
Let's go to content exits. Let's hide content. What we will going to do with that? We will slide it out to the right. We will pick again, the car background. Now that includes all the words and stuff. It is all in the same one. I can pick the time there. Let's do that.
Again, the video starts where we left off so you don't have to wait.
I want to go just before 18 seconds there. I will change this to 17. I found that works better.
Now a question for you. Do I need to copy this code again? Eh? Forget about it! Tell me. Do I need to copy this code again? I hope you were paying attention.
*41.03*
I think we got it right here. This car background. What do you think?
Ed LaPolla. Man after my own heart.
Patrick, you are almost there.
The answer is no. The reason is that we have already put it up here when we animated this section into the screen.
Once you got one called car background we don't have to put it there again. We can do other stuff with it.
This just assumes that you haven't done it, yet, because every step, we don't know. Since we already got one call to car background, I don't have to put that in there again.
It is already done for me. Forget about it!
What's the next step? Ah, now we get into some cool stuff. All right. Let's save the video changes. Let's take a look at what we've got so far. Make sure you save your video and your content.
*42.09*
We made changes to the content, right?
Periodically, I check my work to make sure I am doing everything okay. Check this out. Let's see how it goes.
There you go. Boom!
Of course we haven't done anything with this other content, but we are going to. We are just working down the page as we go. That is why we were saying in the earlier webinar or the earlier workshop, I mentioned that, it is easier if you put your page together first and then do all your animations and things that you want. That makes it a lot easier because everything is already there. You have it planned out. You know what you want to do. Then this is a matter of timing it to the video. That also works for doing the tours as well.
*43.37 chapter: Doodle video example*
Now I want to start the presentation, but before, yes, I guess we could do that. Yes, let's go ahead.
Now, check this out. I have this video. It's a secret. I've built this Doodle video, with Doodly. Let me show it to you. This is the video. It's real quick.
I have the Doodle video, it goes through, it does its thing. Now we have the story going on. I put that in video no.2.
This is demo background no.2 I put that in there. Don't need to save it. I just copied the shortcode.
Now with the background videos I tend to put them at the bottom of the page because they are really not a part of the presentation flow. I am going to make it a part of it.
There is the background video.
*44.50 chapter:How to set up a background video*
Here is how you set up a background video. It will cover the whole page. This is important. Take notes.
If I go to Appearance, we are in video no.2, it is what I want to use, it is the Doodle video. This is where we get in the multi video presentations.
I check this box. "Use as video background". Boom! Right there. That's it.
I can select an alternate mobile image because on mobile devices there is no way to automatically play a video. We have a way to get around that. We can put a background image in there.
This particular presentation works best on desktop. I have not created one for mobile. When I do, I will actually take the Doodle video and my video and put them together in one video. Either that or I will take a screencast of the whole presentation playing on a website, recording the system audio.
*45.58*
Then I will take that screencast and make it my mobile alternate background video.
Robert, if you are having problems with the video background in your theme just open a ticket at support@simplevideopro.com and we will hook you up.
I am always, always, always striving to make sure that this whole system is compatible with as many themes as possible. There have been times where I found that the themes were not designed correctly so we contacted the theme builder and then they made changes or I will make the changes. I am kind of fanatic about compatibility. No problem. We will get you hooked up.
Now we can do a few things here. We can play the background video with no sound, we can loop the background, if we just want it to play.
Most of the time you will autoplay the background. In this case I don't want to.
*47.04*
Yes, there will be a replay Mike. Absolutely. We don't want this to play automatically.
Here is an important piece of background video and this might be what's happening with you, Robert. I don't know. I haven't seen it.
You have to make the percentage width at least 100%. What happens, if you look at this little text, it says: "Important. Use the percentage width below to specify the width. 100% will span the browser window."
That means that it goes from here all the way to here. But, because of the aspect ratio of videos being like a rectangle, sometimes it won't reach the bottom of the page on bigger monitors.
What we do is we increase the percentage to make it cover the entire window so it will actually go off the size a little bit. I set it at 110%.
If you don't do that, then it will be confusing because it will look like the video is just sitting up in a corner or something.
*48.14*
You have to have it at least 100% down here.
I've done that. I don't think I need to do anything else on this one. I will save it.
Excuse me for one second. I am not actually even sure what microphone is turned on right now. Tell me. Can you hear this noise I am making right now?
-- 48.42 - 48.45 Tapping noise --
How many of you can hear that?
I don't know which microphone I am on. Ah, good, It is on my desk mic. I was hoping it wasn't on the one that I have on my headset here. If it is, then, when I turn away to do that... I am not actually turning away from the mic but now I am. That's good.
We will go to the main video. That is the one that's controlling all this stuff.
*49.17*
We know that, in the presenter, that at 17 seconds we slide up that car background.
Right after that we will start this little presentation. We will move this video. That is super-easy to do.
*49.34 chapter: Starting a presentation. Sticky video*
I will say: "Start sticky video". What "sticky video" means is that if the screen scrolls, that video stays right up here. Start sticky video and we will go to the left. Then, when do we want to do that? We want to do it right after we slide out the car background so I don't need to check the time. But you can by clicking that.
Added to the presentation. Now that's done. That's it. Two steps. You do not have to copy shortcodes or anything.
That's to start the sticky video presentation.
*50.14 chapter: How to hide the background video*
Now we want to Fade in this background video. It will take the whole background of the page. Let's do that.
I will say "Content reveals". Actually, I am not going to fade this one, I will just slide it down. That will be good enough.
I will do that right after we started the tour. I don't want people to wait. We will do that at 19. Actually, let's do it immediately after. We will do it at 18. Oops! Doing the wrong thing. Sorry.
You need to name the section, silly. I am going to call it "bgvideo". That is the name of the section. We will go 18.5 seconds. I will click Add. We have not defined this, yet. We haven't told EBG where to put this. I will do it right now.
We will put it right around this video, right here. Remember, the code need to be around it.
*51.30*
There we go. That's it.
Now, this video no.2 will be hidden until we reveal it. Right here.
*51.39 chapter: Playing videos on queue*
Then, we want it to play on queue. See these ids down here? That is the id for the "Forget about it" Doodle video. I will copy that id and I will use it in just a second.
Now, I can say: "Video Play Control". I can Play Another Video. I can pause another video, I can pause this video. I cannot start this video back up. If I pause the one I am on, it will never reach the next second to start up again until something else plays it.
Yes, Rob, this can take a little bit longer. I am trying to be thorough for you, guys. I hope it is okay with you. When you watch the replay and we get the chapters and everything on it, you will be able to refer to it and basically do just about anything. We are not going to do it in four hours. No.
*52.40*
I will select to play another video. In other words, this video, no.1, the main video, will play this Doodle video. The id to play, I just got from right here. Now I will speed back up again because I think everybody has got that.
The time to play. I want to play it right after I display it. We will do it at 19 seconds.
When I start talking about when you get a shiny, new car and all that stuff. I am doing this right in sequence: 17, 18, 18.5, 19. It's not rocket science. I now that I want to play this stuff immediately after everything just plays and stuff.
Now, watch what happens. Actually, all this stuff will be in our way so how will I handle that?
I think you, guys, can understand this. We have not hidden any of this stuff here.
*53.41*
I will just move it out of the way for now. We will have some space in here. Just to get it out of the way. This is for demonstration purposes. Normally, I wouldn't do this. I just want to be able to demonstrate this to you.
This thing plays the video at 19 seconds. I will save the video changes. We will update.
Ed says: "Breaking it down into individual step chapters will be great, otherwise having to follow the whole webinar to find one step to do is pretty hard." Absolutely. We will make good use of our chapter utility and our chapter tools so you quickly get to what you want to use, as a reference. Now, let's take a look.
*55.04 chapter: Correct the timing*
Notice what happened there. It was off. It wasn't timed right. We will deal with this in a second.
Now there are two ways to do this. There is the hard way, which is to go back into Doodley or whatever program you use to make these animated videos, these Doodle art videos. Go back in here and try to retime all of these little pieces so that they are timed to the main video. But what happens then if you decide: "Oh, I want to reshoot that main video. I want to add a couple of things."
Now, you have to go back and you have to recreate the other video, which is a real pain in the neck. We won't do that.
We will say:"Hey! Stop it!" We will pause that background video, when we want. It doesn't have to be a background video, by the way.
*56.21*
It can be another video on the page. Again, this whole starting and stopping, pausing and playing thing, automatically, doesn't apply to mobile. But, 50-60% of your visitors are still on desktop on many, many sites. I know ours are. Don't forget about that.
Yes, Jimmy Kim's Doodle video making software. If you don't have it, you should. But if you don't, let me know at ask@simplevideopro.com. Send me an email at ask@simplevideopro.com and we will see if we can get you hooked up at the launch rate. Most of the people here should have it.
Excellent, Rob. Send me an email to ask @ simplevideopro.com and I'll get you hooked up.
*57.14 chapter: Pausing the video at the right place*
Now I want to pause that other video at the right place. I will say "Pause another video". Again, the video ID the one we are working with this is this background video, it is no. 2. Timed in seconds. I can go in here.
When I start talking about "you are happy about the car" , a few seconds after, I did have to look at the other video to see how long it was exactly. It was like five seconds or four seconds, something like that. I will go and insert this time into the field.
Right at 23 seconds we will pause that other video. Then, we will play it again, when we are done with that piece and we start on the car accident piece.
*58.15 chapter: Play another video*
Now, we will say "Play another video". Then we will enter the id to play. We've already got that here. Seconds. It will be a couple of seconds here.
Bam! I want to say "Bam!", I want it to continue because I want it to go on to the next part. Insert the time into the field. Now we will do that a couple of more times here. I have hit the green button.
Now we will pause it at the end. Pause it in the video. In video. Click the button. it Goes back to where we were.
All right. There we go. Now we will say "Denied". Right where it says:"Denied" I will pause this. Because I am going to make a point.
*59.25 chapter: Emphasize points that you want to make*
Now this is the part of where we talked about emphasis. This is the technique that you can use to emphasize different points that you want to make.
Usually there will be positive points about your product. In this case I am doing a Reverse. It's a the negative point about the competition. What you do, after I put this in here, I have to click the green button, don't forget that, is you increase the size of that video.
Now we are in video tour mode or sticky video mode so right here where it says "Sticky Video Re-size" I will resize that video to 80%. It will resize to the center of the screen.
Now, I want to do that right after we pause the main video, right after I say "Bam!". Let's do that.
We will say, down here is 34 seconds. We will put 34.5 seconds.
*1.00.30*
Sorry. I have to name it. No, I don't. 34.5 seconds. We will do it immediately after we pause the video, the background video. Boom!
Is everybody following? Is this okay? Does anybody have anything they are missing?
Redge asks: " Is easy sketch okay?" Yes. Any video. You can do this for sketch videos. You can do this with live videos, you can do this with sports videos. Anything. Okay. So far people are following. Good.
It is not too complicated. It is just a number of steps and you choose how many steps you want. You can do one step on a page. You can do a simple tour and then back to the top. It is all up to you.
Now, I will go through here. Let me get back to where I was. Tour size. Okay so we will emphasize a point. Then we will go back to where we were.
*1.01.43*
If we go down to the sizing, it says Return to Default Size-Left or right. I will go back to where I was. Then I will tell it when I want to do that, which is going to be immediately.
I want to just emphasize that second time I say "Denied" . I will insert that in here. Click the green button. All of that is good. I was bringing the tour back to its default size.
What we were doing is timing this background video, using the main video to start and stop the background so everything is cool. Then we did an emphasis point that I will show you in a second and we go back to the default location, which is on the left. Basically, it takes it back to its normal size.
Now, after we go back to our normal size at 36 seconds, I want to play the background video again.
*1.02.54*
I am just curious. Does anybody ever seen any system that let's you control, set up a full background video and then control it? With another video? Anybody ever seen anything like that? I think I know the answer.
Now, video id to play. Again. This is the background video.
Richard says: "No." Selwin says "No". No. Neither of I.
Chris says: "Of course not." Jake: "That is why I am here."
Ary, not quite similar. Trust me.
Yes, Tim. That is a really good point. Tim just made a really good point. He says: "Oh, sure." I think that is meant to be in a Brooklyn accent. He says: "Oh, sure. Yeah, those guys that charge $2000 a month. They do that." That is actually true. We will talk about that in a little bit. We've seen some tools that, they still don't scratch the surface of what we are doing.
*1.04.23*
But yes, they charge $500 to $2000 a month for their tools. And they still haven't touched us.
Now we will play this video. Enter the time to play. I want it to play right after I go back to shrinking my video backup. I will do it at 37 seconds. Hit the green button. Put it in there.
Now, the last thing I want to do, when that video is over, when I am finished making my point ... .
Now, when that video is over or when we've made our point, I want to get rid of that section with the background video so I am going to make the video go off the screen. We will do a slide out to the right.
The question is what was the video background section name? That is really easy to find. We just go up here. We put it at the bottom.
*1.05.31*
"bgvideo". Easy. It is already there on the screen. When do we want to hide this thing? Let's find out. Okay. It is where I want to say "anyways". That is going on to the next subject.
I will insert this time into the field. That is when we want to get rid of this background video section. I have already defined the section. Right here. I don't need to copy this code. That is it.
After we do that, we will end this sticky tour where this thing is up in the corner, stuck on. See I want to move the screen. It doesn't move. Yes. Just the background video.
*1.06.33 chapter: Ending the sticky tour*
I want to end the tour. We just select, under Sticky video (Tour guide), End sticky video (return to original position).
The time to do that is right after we slide this other thing out. 55 seconds. Boom! Done! It says "end". That is how you know where the end is.
*1.06.58 chapter: Animating another piece of text*
Now I want to do a couple of other things. We have this whole thing where I say " No worries." "You Don't Gotta Worry About Nothin"' We will slide that up and do a reveal.
I want to slide it. Did I slide it up? I did the Expand Up. I like the Expand Up. It is kind of cool. It points things in there.
We will call that one "noworries". We will do it right there. "Forget about it. You don't gotta nothin' to worry about." This is what I say.
*1.07.47 chapter: How to navigate easier when you have a long video*
By the way, if you pass the time, you can use these. If it is a very long video and becomes difficult to navigate, you can use these. They go back five seconds. If you have a really long video and you can't get: "Oh, man. I just missed. It keeps jumping back like five minutes." Whatever. You can just use these. You can keep clicking them.
Right up "forget about it, no worries", I will insert the time. Click the action. Put it in there. Now, we will take the code. Put it up there. I will stick it above and below because for motion content, you want to be on a separate line. For animation content you want to be on the same line. We just surrounded that.
I will take up the space now. All the space here, that I made for demonstration purpose, that we don't need.
*1.08.58*
Don't over do it. Now "don't worry" will come up.
Now we have these two sections here. After we display this "don't worry", we want it to go away in just a minute. Let's do that. Then I will show you dynamic content and then we are done. We are a little bit late because we got a couple of distractions.
I am in the presenter. The last thing I want to do is I want to move that out of there. I want to fade it out.
We give you lots of different ways to transition content and we are constantly adding more. I've actually got a few more that I am putting in. It is kind of secret because I am still testing them.
The idea is to give you a variety so you don't bore people. You use one like 2-3 times and then switch it up.
*1.09.52*
Now we have to do the "no worries' section which is space that here. Hit spacebar. When do we want to do that?
*1.10.08 chapter: Dynamic user defined content*
Now we are going into the questions. This is where the dynamic user defined content delivery comes in. We will put that into here. Hit the green button.
You don't have to copy this shortcode again because we already did it. It is already up there for the last step.
Now, we are done with this presentation. I will save video changes. Go back into the same video.
*1.10.41 chapter: In video apps*
Now we will do in video apps. If you don't know what that is, that is when the video has buttons inside the video. Oh, you know what I missed? I missed one.
Right here. I was supposed to make room for this text to show up by making the video smaller. Right here.
Let me add that. I will show you how to add that. It is really easy.
*1.11.03*
We want to shrink the video up because that text will come up and I don't want it to be below the fold.
Now we have already done this one: Sticky video resize. That is when we were doing the little tour guide thing that is stuck to the screen. If you want to resize one that is not in sticky video mode, then use this. I will say Resize in place. It does not move. We got that.
I will do that. I am just looking at my notes. It's over here. We do that just before we bring the words up. I will do it right at 58 seconds. There we go.
*1.11.53 chapter: How to allow users to choose what they want to see*
Let's add some interactivity so our user can choose what they want to see.
This part is actually really cool. It is very easy, too. The same as before. You just do the same thing over and over again.
We have to make a choice. We have this choice car. By the way, here is a new feature I added that is coming out. When I release this today.
Yes, Tim. Thank you for reminding me. I am kind of behind schedule. When we have time, I will take care of you. Thank you.
We will do the car choice first. I will browse. Now what is cool about this, I am picking the button. You can use any image you want. But here is the little caveat. Let me show you something.
*1.12.42 chapter: Resizing for mobile*
When you are looking at the Appearance tab, see this Max Width? I really have to rename that. In fact, I will make a note: "Max width." I have to rename this.
This is a starting width. If I have a video and my starting width is, let's say, 1000 pixels, that means that anything I put inside that video will be resized in accordance with that 1000 pixels width. It will be a ratio, it will be proportionate. That is the word I am looking for. All right. So it will be proportionate to this size here. If I want a button to go one third of, across the video screen, I will make that button 333 pixels wide.
Since I've done this, Eyeball Glue knows the button is 333 pixels, the proportion width that is set up here is 1000 pixels.
*1.13.42*
I know that button should always be one third the size of that video so that when the video resizes per mobile or resizes in different aspects of the training, when you are resizing, the buttons resize also proportionately to the video size so it is always mobile compatible, it is always in step with what your presentations are doing.
It is really important to put that and it is also really important to put your percentage width in because that is what makes it responsive and makes it resize depending on how big the browser screen is and how big the content width is. If you have a responsive theme that resizes for mobile, this will make the videos and the skins and everything resize as well. And the buttons inside.
I think that makes sense. Let me know if it doesn't.
Where was I? I was in video apps.
*1.14.40 chapter: New feature - in content apps*
New feature: Put the overlay in your content, not inside the video
Another thing that I added on this next version is you can now take a shortcode and put it on your content not inside the video. You can put it on the content and that button will do all the things that the button inside the video can do. That is new too. That is pretty cool stuff because now you can use buttons outside the video to start and stop other videos.
Now this particular button, I will make it, this is the car one, right? Yes. This is my button for my car. I just select it. If you have it on your desktop, you can literally just drag it up. Done that. Is that easy. Click Select.
Now I have my button. If I mouse over it can, oh, yes, that is the right one. I am not doing any behavioral tracking right now.
*1.15.41 chapter: Causing an event*
I will cause an event. There are two ways. You can link to a url which would be like an affiliate link or something like that or you can cause an event. That means when you click the button you can set in motion all different activities, all different actions.
We will do a couple of things here. We will start another video. I look down here: "Forget about it car". That is video no.3. I will put Play another video. Video no.3.
I will start that video at the beginning so I don't have to put anything in Start at. I will pause this video, whenever the banner is clicked. Then I am going to hide this video, whenever the banner is clicked. So since they clicked, this video will not go away.
I can scroll the section. All kinds of other stuff can happen.
*1.16.36*
I can seek to different chapters. It just goes on and on. We are not going to get into all of that right now.
Now, I want to reveal content. When I click this button I want to reveal a whole section about cars.
It's funny. When I go to New York, my family tease me. They say : "How do you drive your carrr?" "Do you like to walk the dooog?" They think I am hilarious. Anyways.
Now we will take this shortcode, just like we did on all the other ones. I put in the name of the section. I have to identify it, all right?
I go up here. I want to start that right here. Right before video no.3. The car video. Then I will put video no.3 and everything else in between. Copy. Copy. Delete this hidden content to reveal here.
*1.17.45*
Go down to the bottom and just before video no.4, which is the motorcycle, I will end that.
I will do the same thing for motorcycle. I'll do that in a second.
I want to put this icon over here because that is where I point for cars. Then I want to put it in the video. Where?
All right. Here is where I say "motorcycle car". Insert the time into the field. I will do this when it is 64 seconds because car is the second thing I mention.
I want to put the duration for 9999 which means keep it there until the end of the video. Then I will also set an animation. I will call it "Zoom into view' because that is kind of cool.
When they click this button, this section will zoom into view. It will start video no.3. It will pause this video, hide this video.
*1.18.55*
All these things will happen. We can hide other content on the page. All kind of stuff.
Now I will add the next one, which is "Choice" video or "motorcycle". I will pick this icon. We will pick this motorcycle icon and we will cause an event. We will start another video, which will be video no. 4. Pause this video, hide this video. If they pick this one, it will do a different section. It will reveal a different section. That section will be "choice motorcycles".
I will copy that code. We will put it right before video no.4, at the end because it has to be sandwiched. I will put it after the end of "motorcycles" but before the background video.
You don't want to hide this background video in any other action. That is why this is before that. It will sandwich this whole thing here.
*1.20.09 chapter: Opt in forms*
I also added an opt in form. You add opt in forms. Go to Eyeball Glue for Websites in the new version, Simple video Pro in the old version. Eyeball Glue for Websites and then AR webforms, which would be autoresponder webforms.
If you look in here, I have a "forget about it cars" and "forget about it" motorcycles. If I go and edit those, I hooked them up to Aweber, I targeted a campaign, which is just a task because this is really just for testing. Set the background image to a faded background. The color scheme. Then I selected this two step opt in. And a custom button title.
Now, I run out of time. I was going to make a custom button because it looks better but for right now, we just have an old text button.
We will add the ability to change the font size and the font weight of that text.
*1.21.10*
So that is that. Now all you do is you go up to the top, you put your cursor where you want, you click insert EBG Web form. You pick your web form from the list. Make your selections and then click Ok and it puts a shortcode in. That is all I did to put these web forms in. They are two step opt in forms. They are pretty cool. Proven to convert better.
That is it. We are done. I will save this video. We have our two buttons in. Our buttons do cool things. Oh, wait. I have one more thing to do. I forget to select an animation. We will do a Zoom into view for the second button. Then I have two give it the time. What do we do the first button for? 64. So this one will be at 63, I think because motorcycle was first.
*1.22.08*
You can have one after the other. Put that on the other side. Save video changes. I will save the page. Notice the timing.
*1.23.32 chapter: Correcting a mistake*
I have a little mistake. This came back. You can do whatever you want with this video, when it is done. If they click the button, it comes up with the car form. If they are on motorcycle, that's the motorcycle there and the motorcycle rates.
That is in a nutshell the user directed content. We give them what they are interested in. The only thing I have to do is to figure out what happened with this "don't gotta worry about nothin"'. There's no worries. It is called "noworries". I go take a look to see where I made the mistake. I go to the Video presenter. Find my "noworries". Oh, I selected the Fade in. I will put Fade out. Now it will be just fine.
It is pretty simple. Usually here there is a mistake like that, there is a mistake in the time or something.
That is it. That is how you set up that whole thing.
The nuts and bolts, from A to Z.
END OF THE VIDEO
Q & A Session Below:
Speed:
x1
x1.5