Transcript

00:00 I just wanted to give you a bit of an update on using videos with sections Pro
00:15 in the background layer yesterday Safari was updated to version 11 and part of
00:22 that update will prevent videos auto-playing if they have audio so when
00:29 you drop a background video stack into a section it will by default be in this
00:35 configuration where it's muted now these will continue to play as normal they
00:41 will also continue to play as normal if you have either the mute and or the
00:46 allow play on touch devices enabled when this is enabled mute is enforced
00:53 automatically because it's the only way to make it play on touch so if you're
00:58 muted or you've got allow play on touch no change everything will still autoplay
01:03 even in Safari 11 and as of January next year (2018) Chrome will is going to get the
01:09 same treatment.
01:10 So this is about what happens if you want to autoplay videos
01:15 that aren't muted
01:17 ... well the short answer is you can't as you used to do by just
01:22 firing music at users by auto playing videos, so what we've done is
01:29 added a play button so if I now turn the mute off and I preview this the
01:37 video is not going to play I'm using Safari 11 here so instead of it
01:41 automatic plane like it would have done we now get a play button we click that
01:48 it disappears and the video starts as normal ok so that will ensure that the
01:55 user doesn't get left with one of your videos that is unable to play let's just
02:01 stuck on the first frame and just republish in your site will
02:05 automatically make that happen with no changes to your existing stacks
02:10 IF you've got it unmuted, if it's all muted there's no need to worry at all so what
02:17 else can we do well you might not like my play button
02:20 so you can use custom play buttons that is just an absolute well not not so much
02:27 a fallback but it's a it's an easy way to do it if you don't want to set
02:31 anything up but you can use a custom play button if you want and the easiest
02:36 way to do that is we button plus because we've got a couple of nice features that
02:41 allow it to work with not only this background video stack but with the read
02:50 more in paragraph Pro and so on so all we need to do is define a play/pause
02:57 class in our background video stack so I've just called it play pause with a
03:04 hyphen we go into button + right down to the bottom of the settings and where it
03:09 says custom class we give it that same class play port
03:15 now instantly now this button will play and pause the video so here we go now
03:23 we've still got our play button there but if I click this button the video
03:27 will start to play and incidentally it will also hide the built-in one click it
03:33 again it pauses obviously user interface wise that's not great so we could put
03:39 play - pause if we were using something else but because we're using button plus
03:43 we can use two states and the way to do that is if we change the type to be a
03:50 Joey launcher because Joey did the same sort of thing for top bar you could all
03:59 still kanaky use it um have to button States for open and closed for the menus
04:04 just like with read more we have that integration in video
04:08 so we could say play for our text and we could say pause for our closed text we
04:16 could also add a couple of icons if we wanted to so we could make them into
04:19 combi buttons and we could say FA play these are the easier font awesome names
04:27 to remember and f8 pause so we've got very own style buttons but it doesn't
04:34 matter you can stall them as you want and if you remember we still had the
04:40 built in play button so because we've defined to play pause external button we
04:50 can say that we want to never display the play button okay now this comes with
04:56 a warning if you hover over the warning you'll get a more descriptive warning
05:02 which just explains that because of the new browser behavior if you turn off the
05:09 built-in play button and you haven't defined one of your own then your users
05:14 are never going to be able to play the video it's just gonna be stuck on the
05:17 first frame so we've now hidden the built-in play button and we've just got
05:22 iron you Joey button which will change between play and pause as I say
05:29 you can stall this much more nicely and of course being sections we could drop
05:35 it in the section we could position it where we want with sections fix or even
05:38 sections box do all sorts of things with the button so if you've got a big video
05:42 and you want to play button in the middle of it just send to the play
05:45 button and vertically send to the content or user sections fix
05:52 okay so that's the normal way of doing things just using the play but there are
05:59 times when you draw the half of the video play with no sound and give the
06:04 user the option for sound so that's doable as well
06:09 so rather than forcing them to click play to start the video you can have the
06:14 video start as normal and of course we do that by having the mute enabled
06:18 and/or the play on touch devices enabled now this time instead of the play/pause
06:26 class I've got a mute class and that's just called mute toggle and just the
06:33 same this is a button plus - it's set to be a Joey launcher this time I've
06:39 stalled it a bit more and I've stalled it just as icon buttons and we have the
06:46 font or some volume up and volume off classes and a custom class here a mute
06:54 toggle which is just the mute toggle class that we've defined in our video
07:00 background so that's the link between the button and the video so when we
07:05 click this button it's going to mute and unmute the video if I just turn that
07:10 feature off for a minute so this time the video is going to play because we've
07:15 started the video muted with our playback control layer so we're not
07:20 breaking the browser police rules and the video plays is normal but muted and
07:26 then we have our mute button here now you may want to
07:31 leave that mute button visible all the time in which case you wouldn't put it
07:36 in the middle you might put it down the corner or just outside the video
07:39 wherever you might even put it in your menu bar but if you're doing the sort of
07:46 thing where you just want to get the video auto plain and then sort of prompt
07:50 the user to unmute it then we have a setting for that not surprisingly which
07:57 we can just hide that button as soon as it becomes unmuted so now it's going to
08:02 behave like the play button did but instead of having to wait to auto to
08:08 play the video the video will still auto play as normal whether it's on page load
08:12 or when it's in view and this time we just have a button there prompting the
08:16 user to unmute it and when they do that button disappears
08:23 so that should give you a good few options with different ways to handle
08:29 the new restrictions and I hope it's been useful and I'll talk to you next
08:35 time"}]