Videos

Video Player

Azure Media Player is our chosen media player.

Examples

Code
					
<button class="videoLink show noLine pointer" type="button" data-productid="326" aria-expanded="false">
	<svg class="textOrange" height="40px" width="40px" role="img" aria-label="Watch a Video for Bic Clic Stic Pen"><title>Watch a Video for Bic Clic Stic Pen</title> <use xlink:href="#svgIcon-watchVideo"></use> </svg>
</button>
Notes

If using a button to trigger loading of the video, add videoLink class and data-productid attribute to trigger element.

If using in a dialog, add dialog width to stylesheet: .videoDialog { @extend %dialog; max-width: 750px; }.

Resources

Sass File(s)/sass/components/_videoplayer2017.scss
JS File(s)/library/getvideodata.js
JS FunctionsVideo Javascript
Locale KeysNone

Accessibility

Update aria-label on the SVG with product name.

Video trigger element must have aria-expanded="false" attribute added.

To Top