Transcript

00:00 a video feed in a wall hey everybody Joe
00:11 workmen here and today I'm really
00:13 excited to show you the new video wall
00:16 stack now for years we've had a Vimeo
00:20 wall stack right and I've been requested
00:23 so many times Joe wins YouTube's wall
00:25 coming out well what we've done here is
00:29 that we've built a video wall where you
00:32 can have Vimeo and YouTube all in the
00:35 same wall and we have more services
00:37 planned out for the future right but
00:39 right now you can install Vimeo and
00:41 YouTube feeds directly even intermixed
00:45 in the same exact wall right so really
00:48 cool there's some really great unique
00:51 features in this new stack and I can't
00:53 wait to show you let's jump on in so
00:57 here we are on the video wall preview
00:59 site and what you'll notice we scroll
01:01 down here is the first instance of video
01:04 wall now there are two different ways to
01:06 view videos inside video wall the first
01:10 way is through a static player and as
01:14 you see here I have a placeholder image
01:16 here inside of a player and below that I
01:19 have a grid of videos now if I were to
01:23 click on this video you'll notice that
01:25 it actually plays directly inside the
01:27 static player now what's really great
01:31 about this static player is that if you
01:34 scroll down the page you'll notice that
01:37 the static player will stick to the side
01:40 of the browser window and continue to
01:42 play as the user looks at the rest of
01:45 your web page this is a really great
01:47 feature now if I scroll back up and once
01:51 the static player becomes back into view
01:53 that video continues to play seamlessly
01:56 back in the static player position it's
01:59 very cool now the next way to play
02:02 videos is through the lightbox player
02:04 and this is what you would typically
02:06 think is if you were to click on one of
02:07 these videos it will open the video
02:09 inside the lightbox as you see the lot
02:12 the video animates
02:13 in you'll notice that this the actual
02:16 webpage background blurs and we have a
02:18 beautiful effect now we can have the
02:20 title in the description of the video
02:22 here and this lightbox is completely
02:24 customizable so if you want the title
02:26 the description you can you can have a
02:28 white box or a box around it that is
02:30 configurable around the content or you
02:33 can have it just straight directly on
02:35 the lightbox background as I have here
02:37 now you may have also noticed as I hover
02:41 over these grid items there are many
02:43 different options for animating the play
02:45 button here it's very simple it just
02:48 kind of makes that play button more
02:51 opaque okay and if we look to the first
02:54 example we'll see that we have a much
02:55 fancier animation here where not only is
02:58 the play button expanding to the screen
03:00 but you'll notice the thumbnail in the
03:01 image is kind of rotating and zooming in
03:04 a little bit it's a really great
03:05 animation now another way to view videos
03:09 if you didn't want a full-blown grid is
03:12 that you can also have the videos inside
03:15 of a slider so the videos are still
03:17 organized in columns however it's all
03:20 aligned in a single row and you can
03:22 simply slide through the videos and when
03:25 you decide you want to watch a video
03:26 click on it and the videos will also
03:29 play in the static player or the
03:31 lightbox it's completely up to you now
03:34 let's quickly jump into rap Reavers so
03:36 you can see kind of how these videos can
03:38 be configured so here we are inside the
03:40 Vimeo wall demo file that ships with the
03:43 stack and let's go ahead and see how we
03:45 built this demo site so if we scroll
03:48 down the page you'll notice that the
03:49 first stack here is the static player
03:51 now this is a completely separate stack
03:54 from video wall because you can place
03:56 that static player wherever you want on
03:59 the page now the options here really
04:02 simple you just give it a static player
04:03 ID so if you want multiple static
04:05 players on the page you can definitely
04:07 do that okay you can then control the
04:10 border the border size the color and
04:12 there's also the ability to have the
04:14 caption on hover so if you hover over
04:16 the static player while the video is
04:19 playing it will actually display the
04:21 title in the description of that video
04:24 for you now further down on the page
04:27 is where we get into video wall so if
04:29 you notice here when you add video wall
04:31 to the stack there is a plus button now
04:33 I already have a YouTube feed setup here
04:35 but you can go ahead and click plus and
04:37 you can add either a Vimeo feed or a
04:39 YouTube feed now what's great is you can
04:42 have as many feeds as you want inside of
04:45 a video wall you can have multiple
04:47 YouTube multiple Vimeo or a combination
04:50 of all of them and they'll all be merged
04:52 into the same wall and it will work
04:55 fluently now let's go ahead and look at
04:58 the YouTube feed stack first off we have
05:00 a little edit note so you can add maybe
05:02 a little note about what this particular
05:04 playlist is okay and then you can
05:07 configure your YouTube query now in
05:10 YouTube we have the ability to have
05:11 playlists channels channel video search
05:15 or search all videos okay so obviously
05:18 playlist if you select playlist this is
05:21 the playlist ID that shows up in the
05:23 YouTube URL ok next is the channel video
05:28 now um this is the channel ID now if
05:31 you're on a YouTube channel and the URL
05:33 is one of the more user-friendly URLs
05:35 such as youtube.com slash Weaver space
05:38 okay you're gonna actually have to find
05:40 out the YouTube channel ID now if you
05:43 own the channel you'll be able to find
05:45 that channel ID inside of your channel
05:47 settings okay next up is channel video
05:51 search and this allows you to search for
05:53 videos within a channel okay so you give
05:56 the channel ID again and then you give
05:57 your search query and the last option
06:00 for YouTube is to search all videos so
06:03 basically this is gonna search all
06:04 videos within YouTube now if we check
06:07 out the Vimeo feed we have a little bit
06:09 more options Vimeo has a lot more
06:11 queries that we can actually query via
06:13 the API so we can query things like
06:15 likes appearances albums channels
06:18 categories and even tags now
06:22 now that we've configured our feeds
06:24 let's go ahead and look at the video
06:25 wall settings first is gonna be how do
06:27 we want to sort our videos we can sort
06:29 by newest oldest likes shuffle the
06:32 videos or just have none basically it's
06:35 going to just return the sort order that
06:38 is brought to us by the various services
06:40 okay now a quick note about likes likes
06:44 currently is not supported by YouTube we
06:47 hope to add that in the future next up
06:50 is how do we want to display our player
06:53 and our wall so do we want the grid or
06:56 do we want a slider do we want the
06:58 player to be a light box or a static
07:00 player okay
07:01 so they're just simple little toggles to
07:03 determine what you want to do there then
07:05 the settings are breaking down pretty
07:07 much by each component so here we have
07:09 the video grid so do we want to show the
07:11 title under the video that customize the
07:14 borders and the shadows and the loader
07:15 color okay we can customize the number
07:18 of columns on small medium large and
07:21 extra large
07:22 now if you want granular control you can
07:24 click this plus button and you can
07:26 actually configure the break points that
07:29 are used for all of these settings next
07:32 up further down we can configure the
07:33 gutter border and titles and similarly
07:35 if we click on the plus button we can
07:37 configure those values on a per
07:39 breakpoint basis next up is the play
07:44 button there's a lot of variations that
07:46 we can have here do you want a circle a
07:48 square or no play button okay do you
07:50 want to animate the button and the
07:52 thumbnail or either/or so you can turn
07:54 off the animations for those and then
07:56 here you can configure the color and the
07:57 sizing next we have colors and sizing
08:02 for the slider navigation and then the
08:05 lightbox so you know do you want to show
08:07 the title and description some
08:09 configurations on how you want things to
08:12 animate
08:12 okay so modal animation is the lightbox
08:15 self the page animation is the actual
08:18 web page behind the lightbox there's
08:20 some actual interesting animations for
08:22 those as well and then of course all the
08:24 all the colors and sizing availability
08:27 and if you're using the static player
08:29 this we configure the player ID so that
08:32 this needs to match the ID that is
08:34 inside the static wall so I zoom through
08:38 that pretty quick okay but you see it's
08:42 pretty simple to set up
08:43 just follow kind of the logical order of
08:46 the settings it's pretty simple however
08:49 things are pretty complex in terms on
08:51 the back end right the stack does some
08:53 really amazing things for us so simply
08:57 right like integrating multiple feeds
09:00 into a single wall right and hopefully
09:03 in the future we plan on adding even
09:05 more video services so I'm really
09:08 excited for where this video wall is
09:10 taking us it really allows us to
09:13 dynamically add videos to our websites
09:16 right no longer do you need to add
09:18 videos inside your rapid Eva project if
09:21 you want to add a new video to your
09:22 website just simply create a playlist in
09:25 YouTube and start adding videos to it
09:27 you had a video into YouTube within
09:30 minutes it's gonna show up on your
09:32 website automatically you don't need to
09:34 do anything special right video wall
09:37 takes care of everything for us it is
09:39 100% automated and I might add that it
09:43 also a hundred percent works inside
09:45 rapidweaver
09:46 and this is really cool because if you
09:48 use some of the older versions of Vimeo
09:49 wall it didn't really work in rap you
09:52 had to actually publish to make sure
09:53 that everything was working but now
09:55 everything works beautifully directly
09:57 inside rapidweaver
09:58 so I hope you enjoy video wall I can't
10:01 wait to see the amazing things that you
10:03 build with it and please make sure that
10:05 you share your websites on Weaver space
10:07 so we can see them and other users can
10:10 get inspiration from them so thank you
10:13 again I hope you enjoy Vimeo wall and
10:15 we'll see you next time bye
10:24 you
10:24 "}]