Full Video
With Brightcove player
Attributes:
- data-bcp-video-number-loop="5": only for brightcove media, 5 max loops
- data-bcp-video-init: video will be initialized during page loading
- data-bcp-aspect-ratio="0.5625": aspect ratio
- data-bcp-video-id="6122551889001": video for desktop version
- data-bcp-video-id-xs="5033477017001": video for mobile version
Full Video
With HTML5 player
Cover version
Attributes:
- muted: muted
- autoplay: autoplay
- playsinline: no full screen on playing video
- data-video-desktop="/uploaded/full-video/autumn_winter_2022.mp4": video for desktop version
- data-video-mobile="/uploaded/embd-video/embd-example-1.mp4": video for mobile version
Classes:
- full-video--embed: is html5 player
- full-video__bg--cover: has 100vh and is cropped in smaller devices
Full Video
With HTML5 player
Cover version with mute/unmute icon
Attributes:
- muted: muted
- autoplay: autoplay
- playsinline: no full screen on playing video
- data-video-desktop="/uploaded/full-video/autumn_winter_2022.mp4": video for desktop version
- data-video-mobile="/uploaded/embd-video/embd-example-1.mp4": video for mobile version
Classes:
- full-video--embed: is html5 player
- full-video__bg--cover: has 100vh and is cropped in smaller devices
Full Video
With HTML5 player without autoplay
Attributes:
- no autoplay: no autoplay markup ("autoplay=false" doesn't exist, the assence of attribute markup means that there is no autoplay)
- loop=false: no loop
- playsinline: no full screen on playing video
- data-video-desktop="/uploaded/full-video/autumn_winter_2022.mp4": video for desktop version
- data-video-mobile="/uploaded/embd-video/embd-example-1.mp4": video for mobile version
Classes:
- full-video--embed: is html player
Full Video
With HTML5 player and mute/unmute icon
Attributes:
- autoplay: autoplay
- loop: in loop
- playsinline: no full screen on playing video
- data-video-desktop="/uploaded/full-video/autumn_winter_2022.mp4": video for desktop version
- data-video-mobile="/uploaded/embd-video/embd-example-1.mp4": video for mobile version
Classes:
- full-video--embed: is html player
Full Video
With HTML5 player and black cta
Attributes:
- muted: muted
- autoplay: autoplay
- playsinline: no full screen on playing video
- data-video-desktop="/uploaded/full-video/autumn_winter_2022.mp4": video for desktop version
- data-video-mobile="/uploaded/embd-video/embd-example-1.mp4": video for mobile version
Classes:
- full-video--embed: is html player
- cmp-button--black: black text button (can be white with cmp-button--white)
Full Video
With HTML5 player and white text
Attributes:
- muted: muted
- autoplay: autoplay
- playsinline: no full screen on playing video
- data-video-desktop="/uploaded/full-video/autumn_winter_2022.mp4": video for desktop version
- data-video-mobile="/uploaded/embd-video/embd-example-1.mp4": video for mobile version
Classes:
- full-video--embed: is html player
- full-video__text--white: white text button (can be black with full-video__text--black)
Full Video
With HTML5 player, 11px top and bottom margins for desktop and 10px for mobile
Attributes:
- mb-md-11-r23 mt-md-11-r23: 11px top and bottom margins for desktop
- mb-10-r23 mt-10-r23: 10px top and bottom margins for mobile
- muted: muted
- autoplay: autoplay
- loop: in loop
- playsinline: no full screen on playing video
- data-video-desktop="/uploaded/full-video/autumn_winter_2022.mp4": video for desktop version
- data-video-mobile="/uploaded/embd-video/embd-example-1.mp4": video for mobile version
Classes:
- full-video--embed: is html player
Full Video
With HTML5 player and clickable video
Attributes:
- muted: muted
- autoplay: autoplay
- loop: in loop
- playsinline: no full screen on playing video
- data-video-desktop="/uploaded/full-video/autumn_winter_2022.mp4": video for desktop version
- data-video-mobile="/uploaded/embd-video/embd-example-1.mp4": video for mobile version
Classes:
- full-video--embed: is html player
Full Video
With HTML5 player and title
Attributes:
- muted: muted
- autoplay: autoplay
- playsinline: no full screen on playing video
- data-video-desktop="/uploaded/full-video/autumn_winter_2022.mp4": video for desktop version
- data-video-mobile="/uploaded/embd-video/embd-example-1.mp4": video for mobile version
Classes:
- full-video--embed: is html player
- full-video__text--white: white text button (can be black with full-video__text--black)