1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "eyebrow": "Leadership",
  "largePreview": {
    "sizes": {
      "(min-width: 1280px) and (max-width: 1459px)": "//placehold.dev.area17.com/image/917x516?, //placehold.dev.area17.com/image/1834x1032? 2x",
      "(min-width: 1460px) and (max-width: 1919px)": "//placehold.dev.area17.com/image/1207x679?, //placehold.dev.area17.com/image/2414x1358? 2x",
      "(min-width: 1920px)": "//placehold.dev.area17.com/image/1192x671?, //placehold.dev.area17.com/image/2384x1342? 2x"
    },
    "ratio": "16:9",
    "width": 375,
    "height": 211,
    "alt": "Placeholder image (16:9)"
  },
  "duration": "15:24",
  "title": "Why Diversity Is Hard (and Why It's Worth It)",
  "deck": "To be competitive in today’s advertising world, McDonald’s needed to update its communications model. At the BRITE ’19 Conference, Colin Mitchell of McDonald's discusses the company's strategy."
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<figure class="m-listing-media-card">
	<div class="m-listing-media-card__media" data-behavior="VideoPlayer">
		<template data-videoplayer-video>
			<iframe src="https://www.youtube.com/embed/fVooD9Xf88A?autoplay=1&modestbranding=1&rel=0" onload="this.classList.add('is-loaded')" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</template>

		<div class="m-listing-media-card__media-image">
			{% include 'components/atoms/image/image' with largePreview only %}
		</div>

		<button class="m-listing-media-card__play" data-videoplayer-button aria-label="Play">
			{% include 'components/atoms/icon/icon' with { icon: 'arrow--play' } %}
		</button>

		{% if duration %}
			<time class="m-listing-media-card__duration" datetime="{{ duration }}">{{ duration }}</time>
		{% endif %}
	</div>

	<figcaption class="m-listing-media-card__inner">
		{% if eyebrow %}
			<span class="m-listing-media-card__eyebrow">{{ eyebrow }}</span>
		{% endif %}
		<h1 class="m-listing-media-card__title">{{ title }}</h1>
		{% if deck %}
			<p class="m-listing-media-card__deck">{{ deck }}</p>
		{% endif %}
	</figcaption>
</figure>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.m-listing-media-card {
  position: relative;
  background-color: var(--color--background--contrast);

  &__media {
    @include theme-inverse;
    position: relative;
    background-color: var(--color--background);
  }

  iframe {
    @include stretch;
    width: 100%;
    height: 100%;
    @include trans-show-hide;
    &.is-loaded {
      @include trans-show-hide--active;
      z-index: 1;
    }
  }

  &__play {
    @include reset-btn;
    display: flex;
    align-items: center;
    justify-content: center;
    @include stretch();
    margin: auto;
    width: 96px;
    height: 96px;
    background: var(--color--text);
    color: var(--color--action);
    border-radius: 50%;
    @include button-focus;
  }

  &__duration {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 1;
    @include f-ui-4;
  }

  &__media-image,
  &__play,
  &__duration {
    @include trans-show-hide--active($timing--long);
    iframe ~ & {
      @include trans-show-hide($timing--long);
    }
  }

  &__inner {
    position: relative;
    padding: 24px 28px 64px 28px;
  }

  &__eyebrow {
    @include f-heading-1;
    color: var(--color--text--aux);
  }

  &__title {
    @include f-heading-5;
    padding-top: 8px;
  }

  &__deck {
    color: var(--color--text--aux);
    padding-top: 20px;
  }
}