0:02
excellent okay sorry about that guys I think we're live
0:09
now let's see in the chat we got people in the chat oh we got a few people there okay starting to come
0:16
in had some technical glitches this morning sorry about
0:21
that just a couple uh thumbs up in the chat if you can let me
0:27
know he Mr pow here literally have your popcorn in your hands nice Bruno thanks for popping on
0:36
Bruno I owe you a response I think it's you um about Stacks Pro sorry I've been
0:43
insanely busy because of what I'm show about to show off right now um so I've dropped the ball on helping some people
0:49
out but I will make sure I get back to you this afternoon Gunter Fernando thanks for
0:54
popping on sweet okay yeah we haven't um yeah I
1:02
think I missed two weeks in a row sorry about that um you may see me I I have a little stool back here um if you
1:09
remember I injured my foot a couple weeks ago it's still I still got like one of those boots on so um but I I like
1:15
to stand during live streams um but I I may need to uh sit on the stool for a little bit um so
1:24
okay so man I've been working working hard lately um so you know last week I did
1:31
get beta 1 of total CMS out um for those of you were able to join that hangout um
1:38
I did post post it uh for everybody on the total CS 3 beta space um so if you
1:44
just want to peruse it it is 3 hours long though so just a warning on that um
1:50
but even if you have the beta or not you can get a little preview um I am keeping the beta kind of tight-knit for right
1:56
now um just to people that I know are exper or people that purchased the uh
2:02
you know uh this the pre-sale at the summit so um yeah it is a limited number
2:08
of people for right now um until we get uh further down the line okay but that's enough about total CS 3 cuz uh yeah
2:15
we're here about to talk about a brand new stack called uh video Pro and
2:22
um so I've actually wanted to do this stack for a long time I started it a
2:27
while ago um but then I don't know what took priority it was a bunch of stuff
2:33
total CMS and a bunch of other stuff just took priority over this um I think I had started it last summer so close to
2:40
a year ago and um and yeah so I just uh recently looked
2:47
at like hey let me let me see if I can get a new it's been a while since I released something completely brand new so um yeah I polished it and took the
2:55
dust off of it and uh made it pretty flipping cool a lot cooler than I was expecting it to be actually and um so
3:03
let's let's go ahead and dive in really quick let's go ahead Ando okay um so
3:12
this is the video Pro um web page okay it's the product
3:18
page on Weaver space it is live you can actually go ahead and purchase it now um couple questions that I've already
3:24
gotten is what is the upgrade from since this is a version 1.0 product um
3:30
so I am offering an upgrade from people that own my HTML 5 video stack so if you
3:37
own that um this is technically like a completely different Beast okay but I uh
3:44
yeah I thought it would be good just to offer an upgrade path from that stack if you want a more professional um video
3:52
player so that's what that is okay um now let me actually let me step back
3:59
before we go into all the features I have like I think I counted 10 different
4:04
video stacks and they all do like different things right um they're all for
4:09
different purposes and some of them have fancy animations and some have background and overlay content some do
4:15
video slid shows and all kinds of stuff right now why do why do we need another
4:23
another one okay and the big selling point here um is
4:31
going to be probably the last feature we're going to show off today and that is going to be the ctas okay the call to
4:37
actions um there's some other really cool features as well we're going to dive into okay but video Pro essentially
4:47
is it is a if you need a video player if you need to play a video and have your
4:52
user sit there and watch a video not like something that's like a part of some fancy web page that you know is
4:59
kind of an like if you need a serious video player this is the product it doesn't have a lot of fancy animations
5:05
like Play now play has its place right I think play is really cool it's got some again that that hover animation with the
5:12
thumbnail and it's got some really cool features pops up in a light box right
5:19
um this isn't that this is if you want to very very serious video player that
5:24
has some serious professional features that's what this that's what this is okay so with that said um let's dive
5:31
into the some of the features now okay um onstead of looking at the
5:39
features list let's let's dive it straight into the demo okay so one thing you'll notice here is
5:45
uh we have device specific videos now okay meaning you kind of like uh if
5:51
you're familiar with the F6 picture stack the foundation 6 picture stack where you can Define different images
5:57
for different sizes of devices you can now do that for video okay I
6:03
could be wrong but I think this is the the first video stack to my knowledge it actually does that okay um so that's
6:10
really cool and just if you look at this demo um let's go ahead and preview I'm obviously on a large machine we'll see
6:17
that this video is playing okay um if I go ahead and and Shrink this down let's
6:22
go to like a a medium size okay now you can't just shrink it down you actually
6:27
have to refresh because I don't want to load videos Dynamic like multiple videos
6:33
so I do do it on page load right but now we're smaller and we'll see that a different video has now
6:39
loaded okay and let's go ahead and go all the way down to a mobile size okay
6:44
we're going to refresh again and play this and you'll see is a third video is
6:49
playing so I'm playing now normally you're you're not going to do this right you're going to load the same video just
6:55
at different resolutions I loaded three different videos so that you can visually see and
7:02
prove to you that we're loading three separate videos uh based on um the
7:09
device okay or the screen size okay so pretty basic feature uh but
7:17
yeah I think it's really cool okay another thing you will you should notice in here is um it might be a little faint
7:23
over the live stream um I probably could make these a little bit bigger but there are markers set here so you can Define
7:30
little markers within the timeline um for maybe key moments within a video
7:36
that you want to Target and there's some other things we could do with those markers uh that we'll get to in a little bit okay um so yeah the markers are an
7:44
interesting feature um obviously I mean this stack has a lot of the default features that a lot of video Stacks have
7:50
you know Auto playay volume controls um turn off various controls down here
7:55
right um speed features so you can actually not not a lot of video actually have speed so that's kind of an
8:01
interesting feature where we can you know 2X or 1.5x or whatever the videos okay um and you can turn a lot of those
8:07
off supports AirPlay um picture and picture supports that as well okay um
8:13
okay next up is so instead of just having a single video What If I wanted to actually have
8:20
an entire playlist of videos and so here if we go ahead and click on this little bad boy down here
8:27
on the control panel or on the control bar you'll see that I now have a list of videos that I can actually pick to
8:33
play so I can go ahead and pick a different video and it'll Play that video I can go here I can pick a
8:40
different video and it'll play that one right so you can just go through this playlist and and play the different videos now it's also interesting is that
8:47
um if you play if you just let the videos play it'll actually keep going it'll play the next video and then play
8:53
the next video um so like if I go ahead and if I played this uh video oh let's
8:59
go ahead and go to top one so if I go to this top video here um once this is done
9:06
it should automatically kick into the the next video and there it goes so it automatically kicked into the next video
9:12
in the playlist and obviously once it hits the very last video in the playlist it's going to stop okay so there we
9:19
go um so that's playlists um a really cool feature actually okay um now I do
9:24
want to note that um the playlist feature
9:30
um and the device specific videos feature they kind of they overlap a
9:35
little bit and that um as of right now you can't have device
9:43
specific videos and playlist okay so if you want to use a playlist cuz long
9:50
story but uh essentially they use the same kind of technology to to behave or
9:55
to to do what Their features do okay and um the playlist feature um basically
10:03
every video that you add which we'll look at in a little bit will be a member of that playlist okay we'll dive into
10:09
rap Weaver and or into into stacks and show you uh what that looks like all right now the big boy feature
10:18
okay um and there's more features that I haven't actually put on this demo that we'll we'll dive into okay but um this
10:25
is the the the last really big feature and it's called call to actions okay um
10:32
actually let me go and refresh this page all right um
10:40
so in call to
10:47
actions if we go ahead and play this video sorry I let's see for now I always wonder the difference between these
10:52
Stacks in standard foundation six and video wall Stacks this stack the stack list mushrooms
10:59
yes the stacklist mushrooms yeah um May maybe later on today if we have
11:06
some time at the end I can kind of I don't know I don't want to go over every video stack but they all have their own uni unique feature set now the one that
11:12
comes with Foundation 6 that is like the Bare Bones minimum it just is uses the
11:19
base browser player okay so I guess another uh actually before we dive into
11:24
this another feature of this player okay is is that your player will look the
11:30
same across multiple browsers if you were to use something like the the video stack that comes in
11:37
Foundation 6 or the the video stack that I have inside my free starter pack okay
11:43
they both use the the video player baked into the browser okay and what that
11:49
means is every browser's player is going to look a little bit different okay um
11:54
but if we use this um video Pro the player the controls everything is going
12:01
to look uniform no matter what browser you go to so um that's a big another big
12:07
oneup for this if you want consistency across your browser and how your video player looks and
12:12
behaves um then yeah uh you'll like this one okay because it has a consistent
12:21
interface okay and then there there again like I said earlier there's a lot of other Stacks that have you know play
12:27
has fancy animations impact does like slideshows right so they all have some
12:32
other extra Pizzazz right but um from like the base videos that are that the
12:37
stacks that you have in Foundation 6 in my starter pack to let's say compare to this one that's the big difference now
12:43
if you do have my HTML 5 video stack it does have this a similar base player
12:50
theme but it doesn't have any of the pro features that we have here it doesn't have device specific videos it doesn't
12:55
have playlist support it's not going to have ctas and a bunch of other stuff that we're going to look at right now
13:02
okay okay ctas what is a CTA it's a call to action and um there's two ways that
13:08
we can launch ctas I'm going to go and play this video okay and what we'll notice is there there's a little marker
13:13
right here and once we hit that marker you should notice that voila okay I have
13:18
hit that marker and I had a CTA attached to that marker okay and this CTA in this
13:24
case is just a little um oops oh interesting it reached the end of the
13:31
video I maybe the video didn't pause um I think I forgot to to click pause on that video but you okay um let's go
13:38
ahead and play that
13:43
again oh it does continue to play oh darn it I'm G to have to fix this demo um so I do have a setting to either
13:51
continue playing the video or to pause um I was expecting that to actually pause but apparently I was testing the
13:58
that new feature that I this morning and it does that so um but let's go ahead
14:03
and play this again so we can see the CTA now this CTA um as we'll see later
14:09
on inside Stacks you can put whatever you want in this you can position this box wherever you want you can configure
14:15
the background colors and all that type of stuff and um once we hit the end of
14:21
the video if you remember this this wasn't here before once this video ended
14:26
um this used my call to action stack so video Pro not only has its own
14:31
built-in call to actions that display within the player but you can also integrate with call to action stack um
14:38
to do all the things that it does so you can trigger light boxes this opened up peekaboo here you can integrate with all
14:45
kinds of stuff okay so um and you can trigger a call to action based on any
14:51
marker or if the video ends okay so really really cool and
14:56
we'll look at some other options on how we can Style some ideas about these ctas as
15:02
well um lastly this last demo here is an um interesting one it's just play on Hover so as I you see when I hover over
15:10
this video okay um it plays the video when I un hover it shows the
15:16
thumbnail right um You can also you don't have to show the thumbnail on un hover that's a feature um you can turn
15:22
that on and off you can just have the video pause but um yeah this is interesting um so I don't know if Ryan
15:30
Doby is here but um I definitely had him in mind when he was when I was building this because he wanted the ability to
15:36
hover over an image uh seamlessly and kind of have a a image thumbnail on top
15:42
and then unveil and hover to show like a product video okay and uh so yeah a
15:49
really quick elegant way I'm I'm also you see you see no video player here
15:54
okay you don't see the player controls you don't see the play button
15:59
and uh yeah it's uh pretty cool I I'm really happy with that right let's dive in into Stacks now
16:07
that I showed you all like the big main features there's a couple big features that I don't have demos for um but we'll
16:13
we'll dive those uh into those right now in the stacks
16:19
okay let's go ahead and let's open up video Pro uh this is the demo file um
16:28
there might be a couple pages I think I added this YouTube page this morning um so this page might not be in the project
16:35
if you already purchased this I know some people already purchased the project file um or the the stack which
16:40
includes the project file um I also have a few bug fixes that I already have implemented that haven't shipped yet um
16:47
if you saw the post on the community I the demo was completely broken this morning um and I fixed it and then I
16:56
fixed the bug and then I put that it was actually with that play on hover thing it was breaking all the things on the on the page um long story short I fixed it
17:03
that's why the demo is back on the product page and it works okay um and then there's a couple other style bugs
17:09
and whatnot where like the play button wasn't perfectly centered and on certain themes in the foundation one theme um so
17:16
fix that there are some hover color issues and um just conflicts with other Stacks or themes um the normal routine
17:24
stuff that uh that we have as I Rel Stacks right okay um but let's dive in
17:30
uh we're going to go through each of these These are um the exact demos that we just looked at on the product page
17:36
okay um so let's dive in uh what I'm going to do here is we'll dive through kind of all the settings and then we'll
17:42
we'll um go through each specific one specifically the the CT kind of show you
17:48
how and what we can do with those okay so here we have um we're going to
17:53
show off the device specific videos but let's kind of just do a general overview of the stack settings okay so at the
17:59
very top we have a poster image and um I have decided just to do a warehouse
18:05
poster image the reason being now I I know some people are like where's my drag and drop image and I'm willing
18:12
to modify this my way of thinking here but with videos you can't drag and drop
18:18
you have to put in a URL to a video right um further down here now I figured
18:23
if you're going to put a URL to a video we can easily put a URL to a
18:29
thumbnail too right so I don't know I am uh if some people adamantly hate that
18:36
and they want their drag and drop but they still want you know uh a URL for uh the videos I can do that I mean um yeah we
18:44
we can do that but um yeah just for right now I just thought uh having it a
18:50
URL we'll see how people react to that let me know in the comments or and if you pick it up let me know what you
18:56
think okay um some other related post images or poster settings um we can show
19:01
the poster after the video is ended so a lot of times with the default video player you just see the last frame of
19:07
the video or sometimes just a black box right um so this will then show that
19:12
poster um once the video is ended um you can also show the poster when the video is paused okay um so for SEO purposes we
19:21
have a title so you can you know type in your title so that the search engine Gods know what this video was about
19:28
basically okay um obviously your sizing options um
19:33
preload data so do you want to um automatically load video um if you want the fastest page performance um then
19:41
choose none or metadata um Auto will sometimes depending on the person's
19:46
connection it will actually start load downloading some of the video um so if you set it auto then potentially the
19:52
video will play faster um so it's it's a tit fortat sort of thing do you want
19:58
faster page load times or do you want um the video to load faster it's really up to you so um we we give you that option
20:05
there and obviously your start volume okay I don't recommend setting that to like one right set it a little lower or
20:11
I have it set pretty low maybe I think the default I have it set is 08 okay but you can set the default uh volume here
20:19
next up is we have just some features that most video Stacks you would anticipate right autoplay muted
20:27
plays in line actually I should have plays in line turned on by default um
20:32
what that does actually is if you watch the video on a mobile device if you have
20:38
this turned off um the video will load in full screen every time right on a mobile device so um I think I'm going to
20:45
turn this on by default um so right now it's turned off by default I think so we'll probably turn that
20:51
on you can set the video to Loop so it it'll just keep playing and playing and playing um and then the play on hover
20:57
feature um next up is we have the ability to change a bunch of controls and and how
21:03
when we see the controls okay so do we want to always hide the controls do we want to always show the controls do we
21:09
want to hide the controls when the video player loads do you want to hide the controls when it's paused right so just
21:16
various times on when we're going to see or not see the
21:23
controls um next is um some extra buttons okay so we have jump back and
21:29
jump forwards which is to skip 30 seconds backwards or forwards okay um we
21:35
have AirPlay um so if the airplay button will only display if the browser you're
21:41
viewing in supports AirPlay okay um and then we have the speed controls which you could do 1.5
21:47
1.75 2x blah blah blah okay um we have some settings for the play button you
21:53
can you can completely hide the play button and then you can also set the size of it um here's the markers as
22:00
we're just kind of diving through all these settings when you add in Timeline markers um you just Define a common
22:06
delimited list of the seconds where you want the marker to be so if you want it
22:12
at uh 1 minute in 60 seconds okay you have as many of these as you want it's just a common Del limited list of
22:19
seconds so if you're like one hour in that would be what 360 seconds right 60
22:26
* 60 okay um um you can Define the width and the color of those markers as well
22:35
here next um next is playlist support we'll dive into these settings in a
22:40
little bit okay when we look at the playlist demo right um and I just
22:46
realized that my cursor my little cursor dudad is uh not on so we'll do this so you guys can uh see my cursor a little
22:52
bit better oh thank you Fernando 3600
22:58
[Laughter] 360 would have been um 6 minutes not 60
23:03
minutes thanks um okay next up is uh
23:12
transcriptions okay and now this is a bit of work okay uh but you can add
23:19
transcriptions in as many languages as you want directly into here okay and uh
23:25
these transcriptions can be uh close captions sub titles descriptions and
23:30
chapters okay so if you want to divvy up your um video into chapters so you can
23:36
give people chapters to navigate through okay you can do that but um in order to do that you need
23:45
to get uh a tool that creates these vtt files okay it's a standard file um that
23:54
uh there's now actually if you load your videos into YouTube um YouTube can
23:59
actually transcribe a video for you you can actually download those vtt files for free so that's kind of cool um but
24:07
there are various other services I use a service called happy scribe okay um I
24:13
actually got it on app Sumo years ago um and uh yeah it'll generate VT files for
24:19
me um I'm Wonder there's probably some apps on the App Store if you're really into it um I'm I'm sure there has to be
24:25
some apps that will generate these for you um but it is is it is some work okay
24:30
and you will have to upload that file to your server um and then give the URL just like a URL to your video file you
24:36
have to put that URL into this stack okay and you can have as many of
24:42
these as you want so if you have a a German track and an English track um and you can do captions and chapters okay um
24:50
oops um so yeah there we go that is transcriptions I I have not
24:57
set up a demo for those yet um yeah just ran out of time but I I hopefully I'll
25:03
I'll get a video probably a shorter video transcribe it um and then uh yeah
25:09
and then create all of that stuff for it okay so that's transcriptions and it is
25:15
a lot of work um for accessibility sake might want to look if it's a kind of a
25:21
requirement um you know I I did do very cursory um and it's not def definitive
25:28
that transcriptions for videos are required from an ada standpoint or an access accessibility standpoint um a lot
25:35
of the laws just say your your website has to be made accessible um so it's up to you whether
25:41
or not that includes videos or not okay but um there we go okay um call to actions uh you just
25:49
click on that we have some options here we're going to dive into those uh in that particular demo and a few other
25:54
features that we didn't talk about yet um this actually integrates with um analytics and tracking things so if
26:01
you're using Facebook pixels Google analytics or Google tag manager um basically video Pro will send events um
26:09
to those particular trackers based on whether or not the video has started um if it hits various markers and if the
26:16
video's ended okay so uh that way you can you know do maybe do some retargeting if with Facebook pixels or
26:22
something like that you know Target someone that actually watched your video okay um so there you go
26:28
um that's some interesting use cases um now if you want to use other trackers um like my call to action stack integrates
26:35
with things like um matomo and um go squared and a couple others right um and
26:44
so if you want to integrate with those you can actually just use a CTA okay enable ctas and then you can
26:50
actually configure and um integrate with my call to action stack to do
26:56
that okay um um
27:02
cool excellent so let's dive into I do want to note that you can use YouTube
27:10
and Vimeo URLs um although I there was there is a
27:15
bug in the Shi version I've already fixed it um so in your url you just put a YouTube URL and if we look at this one
27:22
here okay um we'll see that oops cck
27:28
there it goes it loads the YouTube embed uh but inside uh the video player of
27:34
video Pro okay so um interesting feature um there you go and it does use um when
27:42
it loads from YouTube it loads the no cookie version of the YouTube embed okay
27:48
so it it does load the more secure less intrusive version of the YouTube
27:55
embed okay um same thing for Vimeo okay you can just Chuck in a Vimeo URL and um
28:02
that will work as
28:08
well interesting that YouTube embed that I just previewed it's still playing in
28:14
the background even though I'm not previewed oh there we go that was crazy
28:20
very interesting okay anyway um let's look at the playlist
28:26
okay um so pretty simple uh here is a video Pro um I've gone ahead and turn on
28:33
playlist now when you turn on playlist you can you have a couple extra buttons that you have the ability to turn on and
28:38
off it's the ability to go from next in previous videos in the playlist now um when you do
28:47
that you can go ahead and add multiple videos in here I should actually add you can add as many videos as you want I'm
28:54
just to this little blue plus button okay um now when we look look at these what you're going to want to do is uh
29:00
you're going to turn on add playlist support okay and what that will do is
29:05
that's going to unveil some new settings for us and it gives us a thumbnail a
29:11
title and a description and those are important because that's what actually shows up in
29:17
the playlist okay now if you don't have a thumbnail you just omit that and it will
29:23
basically all this text Will kind of go flush left okay it actually still looks quite nice without a thumbnail if you
29:29
don't want to supply a thumbnail okay um you don't have to supply a description
29:35
um I would recommend having a title though at least okay um so that you can
29:40
you know actually see what the videos are okay and that's pretty much it for a
29:46
playlist I mean it's simple um you just upload again the same video URL you put in the type of video it is um and then
29:53
you add playlist support and then you put in your additional information that will then display in inside of that
30:01
playlist that's really it with playlist it's really simple good interface um before we dive into ctas
30:08
let's just show this uh this hover uh demo okay
30:13
and what's unique about this is so I turned on looping a video okay I turned
30:18
on play on Hover and then I turned on always hide controls and then I turned on hide play button and that's how I was
30:26
able to achieve um this look where if I Loop it plays the video when I hover over it and the video is just
30:32
going to keep playing over and over and over again until I un
30:38
hover so there we go it restarts okay um I also have um show poster when ended
30:46
and show poster when paused um enabled actually I probably don't need show poster when ended since it's in Loop um
30:53
so that probably doesn't make sense or doesn't doesn't really matter um but yeah show poster when paused probably
31:00
makes definitely makes sense because I want to show the poster when I'm un hovering from it right just to show you if I turn that off right and I hover
31:08
over it's going to play and basically without that I mean when you un hover for this particular video doesn't make
31:13
sense maybe the video that you're displaying it does but I think it looks better um at least for this particular
31:19
video to show the poster uh when it's paused AKA un
31:26
hovered right so there we go so that was all the magic that we needed to um
31:31
create this particular demo all right let's go into ctas now
31:39
okay which I think is the bread and butter um it is the feature the selling feature of the stack I think the the the
31:44
biggest selling feature okay um there aren't many things out there that allow you to create call to
31:51
actions within your video player uh which is a very cool thing
31:59
okay so as we see in this demo let's go ahead and make this a little bit bigger right I'm in video Pro um I go
32:07
let's scroll down I said add C uh player ctas what you can do is you can set a
32:13
background color okay so you can configure the background color and opacity um of whatever the background is
32:19
going to be okay you can set the color of the close button and then you can set the blur
32:24
radius okay um now in this particular demo um I've added two different ctas in
32:32
here okay um I've added there's actually three ctas I believe first I added um
32:39
and you can add as many as you want just click this the plus button when you turn on um ctas it adds a new Drop Zone area
32:47
and you can add in your ctas now when you add a new one you'll see that there's a drop zone that is the
32:54
the contents that you're going to add to place inside of the
33:00
CTA and let's look at this stack um basically there's only a couple settings um so after the video ends is the
33:06
default so it'll do a CTA when the video ends you can also do after a marker now
33:13
when you choose after marker you're going to put in the actual marker
33:18
location now this means that uh you have to make sure that it is a marker that you've defined inside of the video stack
33:25
so here I've defined three and 10 so um in here this has to be three or 10
33:33
okay if it's a nine the CTA will never launch okay because it has to be a configured
33:40
marker next is uh we have the ability to pause the video or keep the video
33:46
playing okay let's look at some of these examples here so I'm going to go ahead and
33:54
actually over here we're going to we're going to set that to be oops uh completely
33:59
transparent right and let's look at that right so I'm going to go ahead and play
34:06
this and what we'll see is after 3
34:12
seconds okay you see after 3 seconds my CTA now I I made this one very subtle
34:18
and that all it is is a little button up here at the top right corner or yeah top left corner sorry
34:24
right and maybe this button goes somewhere maybe it's a buy button maybe during your video you're like hey click on this button now you know something
34:32
like that okay and uh yeah click this button to attend this webinar or to buy this amazing product or whatever you
34:39
want right uh I just wanted to show you that you can make these ctas it doesn't need to be like a full screen thing it
34:45
could be just a button right here let's look at that really quick and basically
34:51
what I did is um here's the CTA um I I configured it to be after the marker at
34:56
3 seconds and basically what I do is I just have a Target stack um if you have Foundation 6 you could use a a position
35:03
Swatch as well and a button stack and that's it and I set Target to go up to the top right corner okay by default um
35:11
content will be centered okay within um within the video okay but uh
35:18
with this video CTA or with Target I'm moving it up to the top left
35:24
corner pretty cool all right let's look at this other one here now this particular one is going to launch at 10
35:31
seconds okay this uh oh and also I should say that this particular one if you notice the video kept
35:37
playing um that is because I I just it's an unobtrusive CTA and I don't want to
35:43
stop the video for it right so this particular CTA does not pause the
35:48
video but this particular one at 10 seconds I do want to pause the video because this particular one is going to
35:53
maybe replace the the contents or it's going to Overlay the the video and we want to make sure that we see um what we
36:01
want right okay so let's go ahead and preview that we're going to wait 10 seconds so
36:08
we'll see it's it's right at this other marker down here so there's my one my first CTA came up and after it hits this
36:15
Mark here the second CTA is going to come okay and it looks like there's a
36:21
bug in the pause because yeah I'm going to have to fix that uh that that didn't
36:26
pause either even though I said it to say pause so um that was a feature I added this morning um the feature you
36:32
guys have uh right now doesn't have the pause video feature um so yeah looks like I need to do a little bit more
36:38
testing on that but let's pretend that it actually worked okay so if we go over
36:44
here let's just go ahead and and pause okay so as you see here um
36:49
I just manually paused it this CTA is pretty much taken over okay and uh yeah
36:56
I can make this if you wanted you can make this full screen as well okay and actually traditionally let's go ahead
37:02
and look at if I go ahead and change the style of the the CTA we're going to go
37:07
ahead and go to um let's go like to something like this something like
37:13
that and we're going to blur five pixels I think this is close to what the default values are let's let's see what
37:19
that
37:25
does all right so as you see see here and uh by default it it creates like an
37:31
overlay over the whole video and again by default it should pause the video as well
37:36
um and but for this particular CTA because it's just a button up at the top I I made this entire background
37:43
transparent right um so it makes sense for a little button CTA like this but if
37:48
we go to this other CTA which is further down oops
37:58
right this particular stylist CTA this makes perfect sense right because um this CTA is going to pause the video
38:04
it's kind of putting something directly in the middle of the video and uh yeah
38:09
uh I think it makes sense for this type of CTA which is pretty cool okay um now the
38:17
very last CTA on this page I think it's when the video
38:23
ends okay there it goes it's this uh peekaboo we saw when that video Ed peekabooo drop down here okay and let's
38:30
look at how that's done so that is done um actually
38:37
completely outside of um the video Pro stack essentially um
38:43
and actually a reminder I actually going to ship a update to call to action after this um so that you can get
38:50
this feature because um I didn't ship I didn't ship this update to call to action yet um in call to action you can
38:56
go ahead if you click plus you'll notice that there is going to be a video Pro um trigger
39:02
here okay um I also um added a foundation 6 forms trigger prior you'd
39:08
have to use the external trigger but I actually in this update for call to action um there's an a specific one just
39:14
for foundation 6 forms now you don't have to use the external trigger um external trigger will still work I
39:19
didn't remove it for backwards compatibility sake but yeah I thought it would be better just to kind of create its own but now there's one for video
39:26
Pro and let look at what that is so in video Pro um essentially what
39:32
you can do is you can say um you can launch a CTA when the video starts when
39:37
the video ends or when a marker is reached okay now another thing that it
39:43
does is you can actually support um on this oh well this particular page I only
39:49
have one video okay um if you only have one video it's fine but um basically what you could do is you can actually um
39:55
add a criteria um so this particular video has the word outro in the video
40:01
name okay and so what this does is you can put in words in here that will match
40:07
against the video URL that's currently triggering the cult actions and then um
40:12
if it doesn't match it this called action will be ignored okay so like for example um on the main demo when I have
40:18
like four or five different instances I only want to trigger this CTA on particular instances not all of them
40:25
right um so particular videos and uh so this allows you to limit um which video
40:32
your call to action is actually going to get triggered against hopefully that makes sense okay
40:39
so in this case I set it to be video ended um and then um inside call to action you set up your action so this
40:45
one is you know it's going to launch a peekaboo and then here's the peekaboo instance that it launches okay and
40:51
peekaboo just kind of unveils the content below okay but you can do all kinds of other stuff right um if you're
40:57
called action it's super powerful you can launch light boxes you can um send
41:02
events to a Toggler or light boxes you can also um you can also send stuff to
41:09
uh analytics trackers so if you want to send some custom data to matomo or goost squir or clicky clicky was the other one
41:15
I couldn't think of okay um so there we go um and yeah um I'm not going to dive
41:23
all into call to action super powerful stack and again it allows you to trigger actions from not only my stuff but a lot
41:29
of thirdparty stacks as you see here from this drop down um a lot of them are light boxes or light light box style
41:36
Stacks modal uh type of stacks but things like peekaboo um the foundation 6
41:41
Toggler super so you can like toggle a class on something based on whether or not a video is played super powerful um
41:49
there we go all right let me see if there's any questions here is it possible to use
41:55
animations with the CTA
42:00
um I'm not sure what animations you're hoping to uh use Bruno um like
42:07
animations inside like you can do hover animations and stuff like that um it's just a Swatch um so yeah if you if you
42:14
had swatches you should be able to use swatches on anything inside here if you have any sort of complex CTA okay let's
42:23
say you wanted a subscription form okay
42:28
um what I'd recommend is if you wanted something uh more complex that needed to be interacted with what you're going to
42:35
do is you're going to inside of the CTA you're going to put in let's say an off-site stack that is an iframe and
42:41
then that is going to iframe into let's say a a web page that has just a
42:46
subscription form okay and then basically to the user they're not going to know it's an if frame it'll look like
42:52
it's natively right there but um yeah for you uh it'll just you know
42:58
seamlessly go through the iframe and it'll interact and you can have a subscription form or any sort of um you
43:03
know form or widget that you want that maybe is a little bit more complex than
43:09
what can be added directly to a CTA okay basically um you know if you have stuff
43:15
that relies on a lot of JavaScript or things like that that you want to have inside of the CTA it might or might not
43:21
work okay it's kind of like a rain check sort of thing where um the the contents of the CTA doesn't actually exist on the
43:28
page until the user until it actually launched okay so um yeah basically if
43:35
you have something mildly complex that you want to have inside the CTA um I think the best approach for now at least
43:41
is um an iframe
43:48
okay um yeah uh I think I reviewed pretty much everything about this stack
43:55
every nook and cranny of it um I look forward to um yeah seeing your feedback
44:00
hopefully you guys enjoy it you can build a lot of really powerful stuff with this I'm excited to see uh where we
44:06
take things right um some of the features I've already added this morning such as um I think CTA Styles in the
44:12
version you have you can't like do the background colors and stuff yet um that is a feature I added I believe it was
44:18
this morning um all the days are fogged and they're all merging together now right so um yeah U really good stack uh
44:27
and like I said if you want a serious video player um this is this is it right
44:33
um it is really a a serious video player um it doesn't have some of the bells and
44:39
whistles and nice beautiful animations like something like play or impact or um it doesn't have features like video wall
44:46
um oh one thing I should say Okay um video Pro does and should
44:53
work I don't have demos of it but it should work perfectly with feeds or total CMS to autogenerate stuff okay um
45:03
so you can autogenerate different video Pro you can also Chuck a feeds down into
45:08
here and generate um you know videos um you can also I mean you can do a lot
45:14
okay so um yeah feeds or total CS you can generate these you can generate video Pros um there's all kinds of
45:21
different ways you can approach this depending on what you want to do um but it should work seamlessly with feeds and
45:27
total CMS um to generate your content and you should be able to use the various macros within all of these
45:35
fields which is pretty
45:42
exciting cool well with that guys you know I I thought I was going to be a little bit quicker we're at almost an
45:48
hour so um cool thank you very much I appreciate it hope you like going and check it out um there is a discounted
45:55
upgrade available for those that own my HTML 5 video stack um this product is a
46:02
completely different Beast um it does a lot more but I wanted to up offer an upgrade for those that own my HTML 5
46:08
video stack um so you get a a $15 um $15 off uh video Pro if you already own that
46:15
stack just use the same email that you um Ed to purchase HTML 5 video Even if
46:21
you purchased it 10 years ago because that Stack's been around for a long long time so um cool thank you very much
46:28
everybody I hope you have a wonderful rest of your week and uh go forth and make your websites great bye