Fix for flexbox container layout issues on older browsers

[michaelcunningham19]

Confirmed affected browsers:
Internet Explorer 10
Safari on iOS 8.4 (iPad Air 2)

The container for the player poster did not have the Play button vertically aligned in the center.

Before:
https://www.dropbox.com/s/2hoae0yssccroc5/Screenshot%202016-08-08%2014.14.27.png?dl=0

After:
https://www.dropbox.com/s/ujv85f01xi75hzt/Screenshot%202016-08-08%2014.14.01.png?dl=0

When using flexbox with an older browser that implements an older version of the flexbox specification, prefixes must be added, in some cases, default values are different as well. See link:
https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx

Prefixed values were generated with Autoprefixer: https://autoprefixer.github.io/

[coveralls]

Coverage decreased (-0.02%) to 71.623% when pulling db69462 on michaelcunningham19:bugfix/poster-flexbox-prefixing into 1efbddf on clappr:master.

[tjenkinson]

thanks @michaelcunningham19 :)

@clappr/core maybe we should use autoprefixer with webpack and have this be automatic?

[towerz]

@tjenkinson not really, we already use bourbon. We should use bourbon mixins, as we are already using on other plugins. This was only an oversight.

@michaelcunningham19 could you please update the PR using proper bourbon mixins instead of expanding the prefixes?

[michaelcunningham19]

@towerz

I have updated the PR to use bourbon mixins 👍

[coveralls]

Coverage remained the same at 71.644% when pulling 62c1754 on michaelcunningham19:bugfix/poster-flexbox-prefixing into 1efbddf on clappr:master.

[towerz]

Thanks, @michaelcunningham19! 🍻