Transcript

00:02 excellent okay sorry about that guys I think we're live now let's see in the chat we got people
00:12 in the chat oh we got a few people there okay starting to come in had some technical glitches this
00:18 morning sorry about that just a couple uh thumbs up in the chat if you can let me
00:27 know he Mr pow here literally have your popcorn in your hands nice Bruno thanks for popping on
00:36 Bruno I owe you a response I think it's you um about Stacks Pro sorry I've been insanely busy because of what I'm show
00:45 about to show off right now um so I've dropped the ball on helping some people out but I will make sure I get back to you this
00:52 afternoon Gunter Fernando thanks for popping on sweet okay yeah we haven't um yeah I
01: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
01: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 to stand during live streams um but I I
01:18 may need to uh sit on the stool for a little bit um so okay
01:27 so man I've been working working hard lately um so you know last week I did get beta 1 of total CMS out um for those
01:35 of you were able to join that hangout um I did post post it uh for everybody on the total CS 3 beta space um so if you
01:44 just want to peruse it it is 3 hours long though so just a warning on that um but even if you have the beta or not you
01:52 can get a little preview um I am keeping the beta kind of tight-knit for right now um just to people that I know are
01:59 exper or people that purchased the uh you know uh this the pre-sale at the summit so um yeah it is a limited number
02: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
02:15 we're here about to talk about a brand new stack called uh video Pro and
02:22 um so I've actually wanted to do this stack for a long time I started it a while ago um but then I don't know what
02:31 took priority it was a bunch of stuff 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
02:40 a year ago and um and yeah so I just uh recently looked at like hey let me let me see if I can
02:48 get a new it's been a while since I released something completely brand new so um yeah I polished it and took the
02: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
03:03 let's let's go ahead and dive in really quick let's go ahead Ando okay um so
03:12 this is the video Pro um web page okay it's the product page on Weaver space it is live you can
03:20 actually go ahead and purchase it now um couple questions that I've already gotten is what is the upgrade from since
03:27 this is a version 1.0 product um so I am offering an upgrade from people
03:33 that own my HTML 5 video stack so if you own that um this is technically like a
03:40 completely different Beast okay but I uh yeah I thought it would be good just to offer an upgrade path from that stack if
03:49 you want a more professional um video player so that's what that is okay um
03:56 now let me actually let me step back before we go into all the features I have like I think I counted 10 different video
04:05 stacks and they all do like different things right um they're all for different purposes and some of them have fancy animations and some have
04:13 background and overlay content some do video slid shows and all kinds of stuff right
04:19 now why do why do we need another another one okay
04:27 and the big selling point here um is going to be probably the last feature we're going to show off today and that
04:34 is going to be the ctas okay the call to actions um there's some other really cool features as well we're going to
04:42 dive into okay but video Pro essentially is it is a if you need a video player if
04:51 you need to play a video and have your user sit there and watch a video not like something that's like a part of some fancy web page that you know is
04: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 like Play now play has its place right I
05:08 think play is really cool it's got some again that that hover animation with the thumbnail and it's got some really cool
05:14 features pops up in a light box right um this isn't that this is if you want
05:21 to very very serious video player that has some serious professional features that's what this that's what this is
05:29 okay so with that said um let's dive into the some of the features now okay um onstead of looking at the
05:39 features list let's let's dive it straight into the demo okay so one thing you'll notice here is
05:45 uh we have device specific videos now okay meaning you kind of like uh if you're familiar with the F6 picture
05:53 stack the foundation 6 picture stack where you can Define different images for different sizes of devices
06:07 actually does that okay um so that's really cool and just if you look at this demo um let's go ahead and preview I'm
06:15 obviously on a large machine we'll see that this video is playing okay um if I go ahead and and Shrink this down let's
06:22 go to like a a medium size okay now you can't just shrink it down you actually have to refresh because I don't want to
06:30 load videos Dynamic like multiple videos so I do do it on page load right but now we're smaller and we'll see that a different video has now
06:39 loaded okay and let's go ahead and go all the way down to a mobile size okay we're going to refresh again and play
06:47 this and you'll see is a third video is 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
06:55 at different resolutions I loaded three different videos so that you can visually see and prove to you that we're loading three
07:04 separate videos uh based on um the device okay or the screen
07:13 size okay so pretty basic feature uh but yeah I think it's really cool okay another thing you will you should notice
07:20 in here is um it might be a little faint over the live stream um I probably could make these a little bit bigger but there
07:27 are markers set here so you can Define little markers within the timeline um for maybe key moments within a video
07: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
07:44 interesting feature um obviously I mean this stack has a lot of the default features that a lot of video Stacks have you know Auto playay volume controls um
07:53 turn off various controls down here right um speed features so you can actually not not a lot of video actually have speed so that's kind of an
08: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 off supports AirPlay um picture and
08:10 picture supports that as well okay um okay next up is so instead of just having a single
08:18 video What If I wanted to actually have an entire playlist of videos and so here if we go ahead and
08:25 click on this little bad boy down here 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
08: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 different video and it'll play that one
08:42 right so you can just go through this playlist and and play the different videos now it's also interesting is that um if you play if you just let the
08:50 videos play it'll actually keep going it'll play the next video and then play the next video um so like if I go ahead and if I played this uh video oh let's
08:59 go ahead and go to top one so if I go to this top video here um once this is done it should automatically kick into the
09:08 the next video and there it goes so it automatically kicked into the next video in the playlist and obviously once it hits the very last video in the playlist
09:15 it's going to stop okay so there we go um so that's playlists um a really cool feature actually okay um now I do
09:24 want to note that um the playlist feature um and the device specific videos
09:33 feature they kind of they overlap a little bit and that um as of right now you can't have device
09:43 specific videos and playlist okay so if you want to use a playlist cuz long story but uh essentially they use the
09:52 same kind of technology to to behave or to to do what Their features do okay and
10:07 of that playlist okay we'll dive into rap Weaver and or into into stacks and show you uh what that looks
10:14 like all right now the big boy feature okay um and there's more features that I haven't actually put on this demo that
10:22 we'll we'll dive into okay but um this is the the the last really big feature
10:29 and it's called call to actions okay um actually let me go and refresh this
10:35 page all right um 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 Stacks in standard foundation six and
10:54 video wall Stacks this stack the stack list mushrooms yes the stacklist mushrooms yeah
11:03 um May maybe later on today if we have 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
11:10 uni unique feature set now the one that 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 this another feature of this player okay
11:29 is is that your player will look the 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 they both use the the video player baked
11:46 into the browser okay and what that 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 to look uniform no matter what browser
12:03 you go to so um that's a big another big oneup for this if you want consistency across your browser and how your video
12:11 player looks and 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 has fancy animations impact does like
12:29 slideshows right so they all have some 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 if you do have my HTML 5 video stack it
12:46 does have this a similar base player theme but it doesn't have any of the pro features that we have here it doesn't
12:53 have device specific videos it doesn't 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 we can launch ctas I'm going to go and
13:09 play this video okay and what we'll notice is there there's a little marker 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 again oh it does continue to play oh
13:46 darn it I'm G to have to fix this demo um so I do have a setting to either continue playing the video or to pause
13:53 um I was expecting that to actually pause but apparently I was testing the that new feature that I this morning and
14:09 on inside Stacks you can put whatever you want in this you can position this box wherever you want you can configure the background colors and all that type
14:17 of stuff and um once we hit the end of 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 built-in call to actions that display
14:33 within the player but you can also integrate with call to action stack um to do all the things that it does so you
14:41 can trigger light boxes this opened up peekaboo here you can integrate with all kinds of stuff okay so um and you can
14:48 trigger a call to action based on any 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 well um lastly this last demo here is an
15:05 um interesting one it's just play on Hover so as I you see when I hover over this video okay um it plays the
15:13 video when I un hover it shows the 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 and then unveil and hover to show like a
15:45 product video okay and uh so yeah a 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 and uh yeah it's uh pretty cool I I'm
16:02 really happy with that right let's dive in into Stacks now that I showed you all like the big main features there's a couple big features
16:10 that I don't have demos for um but we'll 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 if you already purchased this I know
16:36 some people already purchased the project file um or the the stack which includes the project file um I also have a few bug fixes that I already have
16:45 implemented that haven't shipped yet um if you saw the post on the community I the demo was completely broken this
16:52 morning um and I fixed it and then I 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
17:08 then there's a couple other style bugs 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 uh we're going to go through each of
17:31 these These are um the exact demos that we just looked at on the product page okay um so let's dive in uh what I'm
17:39 going to do here is we'll dive through kind of all the settings and then we'll 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 show off the device specific videos but
17:55 let's kind of just do a general overview of the stack settings okay so at the very top we have a poster image and um I
18:03 have decided just to do a warehouse 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 you have to put in a URL to a video
18:20 right um further down here now I figured 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 and they want their drag and drop but
18:37 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 URL we'll see how people react to that
18:52 let me know in the comments or and if you pick it up let me know what you 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 the video or sometimes just a black box
19:10 right um so this will then show that poster um once the video is ended um you can also show the poster when the video
19:17 is paused okay um so for SEO purposes we have a title so you can you know type in your title so that the search engine
19:26 Gods know what this video was about basically okay um obviously your sizing options um preload data so do you want to um
19:35 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 connection it will actually start load
19:48 downloading some of the video um so if you set it auto then potentially the video will play faster um so it's it's a
19:56 tit fortat sort of thing do you want 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 I have it set pretty low maybe I think
20:13 the default I have it set is 08 okay but you can set the default uh volume here next up is we have just
20:21 some features that most video Stacks you would anticipate right autoplay muted plays in line actually I should have
20:29 plays in line turned on by default um 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 on you can set the video to Loop so it
20:54 it'll just keep playing and playing and playing um and then the play on hover 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 want to hide the controls when the video
21:12 player loads do you want to hide the controls when it's paused right so just various times on when we're going to see
21:19 or not see the controls um next is um some extra
21:27 buttons okay so we have jump back and 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 viewing in supports
21:43 AirPlay okay um and then we have the speed controls which you could do 1.5 1.75 2x blah blah blah okay um we have
21:52 some settings for the play button you 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:06 delimited list of the seconds where you want the marker to be so if you want it at uh 1 minute in 60 seconds okay you
22:15 have as many of these as you want it's just a common Del limited list of seconds so if you're like one hour in
22:22 that would be what 360 seconds right 60 * 60 okay um um you can Define the width
22:30 and the color of those markers as well here next um next is playlist support
22:39 we'll dive into these settings in a 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 bit
22:54 better oh thank you Fernando 3600
22:58 [Laughter]
22:59 360 would have been um 6 minutes not 60 minutes
23:08 thanks um okay next up is uh transcriptions okay and now this is a
23:15 bit of work okay uh but you can add 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 chapters okay so if you want to divvy up
23:33 your um video into chapters so you can give people chapters to navigate through okay you can do
23:40 that but um in order to do that you need to get uh a tool that creates these vtt
23:49 files okay it's a standard file um that uh there's now actually if you load your
23:56 videos into YouTube um YouTube can actually transcribe a video for you you can actually download those vtt files
24:03 for free so that's kind of cool um but there are various other services I use a
24:10 service called happy scribe okay um I 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 some apps that will generate these for
24:27 you um but it is is it is some work okay and you will have to upload that file to your server um and then give the URL
24:35 just like a URL to your video file you have to put that URL into this stack okay and you can have as many of these as you want so if you have a a
24:43 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 I'll get a video probably a shorter
25:06 video transcribe it um and then uh yeah 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 requirement um you know I I did do very
25:24 cursory um and it's not def definitive that transcriptions for videos are required from an ada standpoint or an
25:32 access accessibility standpoint um a lot 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 features that we didn't talk about yet
25:56 um this actually integrates with um analytics and tracking things so if you're using Facebook pixels Google analytics or Google tag manager um
26:05 basically video Pro will send events um to those particular trackers based on whether or not the video has started um
26:14 if it hits various markers and if the 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 um that's some interesting use cases um
26:31 now if you want to use other trackers um like my call to action stack integrates with things like um matomo and um go
26:40 squared and a couple others right um and so if you want to integrate with those you can actually just use a
26:47 CTA okay enable ctas and then you can actually configure and um integrate with my call to action stack to do
26:56 that okay um um cool excellent so let's dive into I do
27:06 want to note that you can use YouTube 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 there it goes it loads the YouTube embed
27:31 uh but inside uh the video player of video Pro okay so um interesting feature
27:39 um there you go and it does use um when 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 that will work as
28:08 well interesting that YouTube embed that I just previewed it's still playing in the background even though I'm not
28:17 previewed oh there we go that was crazy 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 off it's the ability to go from next in
28:41 previous videos in the playlist now um when you do that you can go ahead and add multiple
28:49 videos in here I should actually add you can add as many videos as you want I'm just to this little blue plus button okay um now when we look look at these
28:58 what you're going to want to do is uh you're going to turn on add playlist support okay and what that will do is that's going to unveil some new settings
29:07 for us and it gives us a thumbnail a title and a description and those are important
29:15 because that's what actually shows up in 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 don't want to supply a thumbnail okay um
29:32 you don't have to supply a description 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 playlist I mean it's simple um you just
29:48 upload again the same video URL you put in the type of video it is um and then you add playlist support and then you put in your additional information that
29:56 will then display in inside of that playlist that's really it with playlist it's really simple good
30:05 interface um before we dive into ctas 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 on play on Hover and then I turned on
30:21 always hide controls and then I turned on hide play button and that's how I was able to achieve um this look
30:28 where if I Loop it plays the video when I hover over it and the video is just going to keep playing over and over and
30:35 over again until I un hover so there we go it restarts okay um
30:42 I also have um show poster when ended and show poster when paused um enabled actually I probably don't need show
30:50 poster when ended since it's in Loop um so that probably doesn't make sense or doesn't doesn't really matter um but
30:58 yeah show poster when paused probably makes definitely makes sense because I want to show the poster when I'm un hovering from it right just to show you
31:05 if I turn that off right and I hover over it's going to play and basically without that I mean when you un hover
31:12 for this particular video doesn't make sense maybe the video that you're displaying it does but I think it looks better um at least for this particular video to show the poster uh when it's
31:21 paused AKA un hovered right so there we go so that was
31:29 all the magic that we needed to um 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 biggest selling feature
31:46 okay um there aren't many things out there that allow you to create call to actions within your video player uh
31:53 which is a very cool thing okay so as we see in this demo let's go
32:02 ahead and make this a little bit bigger right I'm in video Pro um I go let's scroll down I said add C uh player
32:10 ctas what you can do is you can set a 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 radius okay um now in this particular
32:29 demo um I've added two different ctas in here okay um I've added there's actually
32:35 three ctas I believe first I added um and you can add as many as you want just click this the plus button when you turn
32:42 on um ctas it adds a new Drop Zone area and you can add in your ctas now when you add a new one you'll
32:51 see that there's a drop zone that is the the contents that you're going to add to place inside of the
33:06 default so it'll do a CTA when the video ends you can also do after a marker now when you choose after marker you're
33:15 going to put in the actual marker location now this means that uh you have to make sure that it is a marker that
33:23 you've defined inside of the video stack 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 playing okay let's look at some of these
33:49 examples here so I'm going to go ahead and actually over here we're going to we're
33:56 going to set that to be oops uh completely transparent right and let's look at that right so
34:04 I'm going to go ahead and play 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 and that all it is is a little button up
34:20 here at the top right corner or yeah top left corner sorry right and maybe this button goes somewhere maybe it's a buy button maybe
34:28 during your video you're like hey click on this button now you know something like that okay and uh yeah click this button to attend this webinar or to buy
34:36 this amazing product or whatever you 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 what I did is um here's the CTA um I I
34:54 configured it to be after the marker at 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 corner pretty cool all right let's look
35:27 at this other one here now this particular one is going to launch at 10 seconds okay this uh oh and also I should say that this particular one if
35:35 you notice the video kept 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 video but this particular one at 10
35:50 seconds I do want to pause the video because this particular one is going to maybe replace the the contents or it's going to Overlay the the video and we
35:57 want to make sure that we see um what we want right okay so let's go ahead and preview
36:05 that we're going to wait 10 seconds so we'll see it's it's right at this other marker down here so there's my one my
36:12 first CTA came up and after it hits this 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 pause either even though I said it to
36:28 say pause so um that was a feature I added this morning um the feature you guys have uh right now doesn't have the pause video feature um so yeah looks
36:37 like I need to do a little bit more testing on that but let's pretend that it actually worked okay so if we go over here let's just go ahead
36:46 and and pause okay so as you see here um I just manually paused it this CTA is
36:52 pretty much taken over okay and uh yeah I can make this if you wanted you can make this full screen as well okay and
37:01 actually traditionally let's go ahead and look at if I go ahead and change the style of the the CTA we're going to go ahead and go to um let's go like to
37:10 something like this something like that and we're going to blur five pixels I think this is close to what the
37:17 default values are let's let's see what that does all right so as you see see here
37:28 and uh by default it it creates like an 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 we go to this other CTA which is further
37:51 down oops right this particular stylist CTA this
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 ends okay there it goes it's this uh
38:25 peekaboo we saw when that video Ed peekabooo drop down here okay and let's look at how that's
38:35 done so that is done um actually 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 this feature because um I didn't ship I
38:52 didn't ship this update to call to action yet um in call to action you can go ahead if you click plus you'll notice that there is going to be a video Pro um
39:01 trigger 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 for foundation 6 forms now you don't
39:16 have to use the external trigger um external trigger will still work I didn't remove it for backwards compatibility sake but yeah I thought it would be better just to kind of create
39:24 its own but now there's one for video 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 the video ends or when a marker is
39:40 reached okay now another thing that it 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 name okay and so what this does is you
40:04 can put in words in here that will match 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 like four or five different instances I
40:20 only want to trigger this CTA on particular instances not all of them right um so particular videos and uh so
40:29 this allows you to limit um which video your call to action is actually going to get triggered
40:36 against hopefully that makes sense okay so in this case I set it to be video ended um and then um inside call to
40:44 action you set up your action so this 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 called action it's super powerful you
40:59 can launch light boxes you can um send 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 of thirdparty stacks as you see here
41:30 from this drop down um a lot of them are light boxes or light light box style Stacks modal uh type of stacks but
41:38 things like peekaboo um the foundation 6 Toggler super so you can like toggle a class on something based on whether or
41:46 not a video is played super powerful um there we go all right let me see if there's any
41:53 questions here is it possible to use animations with the CTA um I'm not sure what animations you're
42:03 hoping to uh use Bruno um like animations inside like you can do hover animations and stuff like that um it's
42:11 just a Swatch um so yeah if you if you had swatches you should be able to use swatches on anything inside here if you
42:19 have any sort of complex CTA okay let's 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 then that is going to iframe into let's
42:44 say a a web page that has just a 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 seamlessly go through the iframe and
43:09 what can be added directly to a CTA okay basically um you know if you have stuff that relies on a lot of JavaScript or
43:17 things like that that you want to have inside of the CTA it might or might not work okay it's kind of like a rain check sort of thing where um the the contents
43:26 of the CTA doesn't actually exist on the 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 okay um yeah uh I think I reviewed
43:52 pretty much everything about this stack every nook and cranny of it um I look forward to um yeah seeing your feedback
44:09 such as um I think CTA Styles in the version you have you can't like do the background colors and stuff yet um that
44:16 is a feature I added I believe it was this morning um all the days are fogged and they're all merging together now
44:23 right so um yeah U really good stack uh and like I said if you want a serious
44:29 video player um this is this is it right um it is really a a serious video player
44:37 um it doesn't have some of the bells and 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 here and generate um you know videos um
45:11 you can also I mean you can do a lot okay so um yeah feeds or total CS you can generate these you can generate
45:19 video Pros um there's all kinds of 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 exciting cool well with that guys you
45:44 know I I thought I was going to be a little bit quicker we're at almost an hour so um cool thank you very much I appreciate it hope you like going and
45:53 check it out um there is a discounted 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 video stack um so you get a a $15 um $15
46:12 off uh video Pro if you already own that 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 everybody I hope you have a wonderful
46:30 rest of your week and uh go forth and make your websites great bye