0:00 I just wanted to give you a bit of an\nupdate on using videos with sections Pro
0:15 in the background layer yesterday Safari\nwas updated to version 11 and part of
0:22 that update will prevent videos\nauto-playing if they have audio so when
0:29 you drop a background video stack into a\nsection it will by default be in this
0:35 configuration where it's muted now these\nwill continue to play as normal they
0:41 will also continue to play as normal if\nyou have either the mute and or the
0:46 allow play on touch devices enabled when\nthis is enabled mute is enforced
0:53 automatically because it's the only way\nto make it play on touch so if you're
0:58 muted or you've got allow play on touch\nno change everything will still autoplay
1:03 even in Safari 11 and as of January next\nyear (2018) Chrome will is going to get the
1:09 same treatment.
1:10 So this is about what\nhappens if you want to autoplay videos
1:15 that aren't muted
1:17 ... well the short answer\nis you can't as you used to do by just
1:22 firing music at users by auto\nplaying videos, so what we've done is
1:29 added a play button so if I now\nturn the mute off and I preview this the
1:37 video is not going to play I'm using\nSafari 11 here so instead of it
1:41 automatic plane like it would have done\nwe now get a play button we click that
1:48 it disappears and the video starts as\nnormal ok so that will ensure that the
1:55 user doesn't get left with one of your\nvideos that is unable to play let's just
2:01 stuck on the first frame and just\nrepublish in your site will
2:05 automatically make that happen with no\nchanges to your existing stacks
2:10 IF you've got it unmuted, if it's all muted\nthere's no need to worry at all so what
2:17 else can we do\nwell you might not like my play button
2:20 so you can use custom play buttons that\nis just an absolute well not not so much
2:27 a fallback but it's a it's an easy way\nto do it if you don't want to set
2:31 anything up but you can use a custom\nplay button if you want and the easiest
2:36 way to do that is we button plus because\nwe've got a couple of nice features that
2:41 allow it to work with not only this\nbackground video stack but with the read
2:50 more in paragraph Pro and so on so all\nwe need to do is define a play/pause
2:57 class in our background video stack so\nI've just called it play pause with a
3:04 hyphen we go into button + right down to\nthe bottom of the settings and where it
3:09 says custom class we give it that same\nclass play port
3:15 now instantly now this button will play\nand pause the video so here we go now
3:23 we've still got our play button there\nbut if I click this button the video
3:27 will start to play and incidentally it\nwill also hide the built-in one click it
3:33 again it pauses obviously user interface\nwise that's not great so we could put
3:39 play - pause if we were using something\nelse but because we're using button plus
3:43 we can use two states and the way to do\nthat is if we change the type to be a
3:50 Joey launcher because Joey did the same\nsort of thing for top bar you could all
3:59 still kanaky use it um have to button\nStates for open and closed for the menus
4:04 just like with read more we have that\nintegration in video
4:08 so we could say play for our text and we\ncould say pause for our closed text we
4:16 could also add a couple of icons if we\nwanted to so we could make them into
4:19 combi buttons and we could say FA play\nthese are the easier font awesome names
4:27 to remember and f8 pause so we've got\nvery own style buttons but it doesn't
4:34 matter you can stall them as you want\nand if you remember we still had the
4:40 built in play button so because we've\ndefined to play pause external button we
4:50 can say that we want to never display\nthe play button okay now this comes with
4:56 a warning if you hover over the warning\nyou'll get a more descriptive warning
5:02 which just explains that because of the\nnew browser behavior if you turn off the
5:09 built-in play button and you haven't\ndefined one of your own then your users
5:14 are never going to be able to play the\nvideo it's just gonna be stuck on the
5:17 first frame so we've now hidden the\nbuilt-in play button and we've just got
5:22 iron you Joey button which will\nchange between play and pause as I say
5:29 you can stall this much more nicely and\nof course being sections we could drop
5:35 it in the section we could position it\nwhere we want with sections fix or even
5:38 sections box do all sorts of things with\nthe button so if you've got a big video
5:42 and you want to play button in the\nmiddle of it just send to the play
5:45 button and vertically send to the\ncontent or user sections fix
5:52 okay so that's the normal way of doing\nthings just using the play but there are
5:59 times when you draw the half of the\nvideo play with no sound and give the
6:04 user the option for sound so that's\ndoable as well
6:09 so rather than forcing them to click\nplay to start the video you can have the
6:14 video start as normal and of course we\ndo that by having the mute enabled
6:18 and/or the play on touch devices enabled\nnow this time instead of the play/pause
6:26 class I've got a mute class and that's\njust called mute toggle and just the
6:33 same this is a button plus - it's set to\nbe a Joey launcher this time I've
6:39 stalled it a bit more and I've stalled\nit just as icon buttons and we have the
6:46 font or some volume up and volume off\nclasses and a custom class here a mute
6:54 toggle which is just the mute toggle\nclass that we've defined in our video
7:00 background so that's the link between\nthe button and the video so when we
7:05 click this button it's going to mute and\nunmute the video if I just turn that
7:10 feature off for a minute so this time\nthe video is going to play because we've
7:15 started the video muted with our\nplayback control layer so we're not
7:20 breaking the browser police rules and\nthe video plays is normal but muted and
7:26 then we have our\nmute button here now you may want to
7:31 leave that mute button visible all the\ntime in which case you wouldn't put it
7:36 in the middle you might put it down the\ncorner or just outside the video
7:39 wherever you might even put it in your\nmenu bar but if you're doing the sort of
7:46 thing where you just want to get the\nvideo auto plain and then sort of prompt
7:50 the user to unmute it then we have a\nsetting for that not surprisingly which
7:57 we can just hide that button as soon as\nit becomes unmuted so now it's going to
8:02 behave like the play button did but\ninstead of having to wait to auto to
8:08 play the video the video will still auto\nplay as normal whether it's on page load
8:12 or when it's in view and this time we\njust have a button there prompting the
8:16 user to unmute it and when they do that\nbutton disappears
8:23 so that should give you a good few\noptions with different ways to handle
8:29 the new restrictions and I hope it's\nbeen useful and I'll talk to you next
8:35 time"}]