x
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>VIDEO EMBED:</strong> 16:9 poster + native player / iframe slot<br> <strong>VARIANTS:</strong> Poster + play | Native video | Iframe embed | In a profile card </p> <p class="tw:mb-0 tw:text-sm"> <code>.video-embed</code> is layout/chrome only — no player JS. It's a <code>tw:aspect-video</code> rounded box (matches the listing-card media-box radius); drop in a poster image + play affordance, a native <code><video></code>, or a provider <code><iframe></code> and it fills the frame. </p> </div> <!-- Section 1: Poster + play affordance --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Poster + Play Affordance</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Poster + play:</strong> A static "watch" thumbnail — no in-page playback, no JS. Wrap the whole <code>.video-embed</code> in an <code><a></code> that links out to the actual video (a lightbox or new tab). The dark scrim + white circular play icon appear automatically whenever <code>.video-embed-play</code> is present. </p> </div> <div class="tw:max-w-md"> <a class="video-embed" href="https://example.com/videos/oakwood-tour" aria-label="Play video: A tour of Oakwood Primary School"> <img class="video-embed-poster" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360'%3E%3Crect width='640' height='360' fill='%238FB8DE'/%3E%3Ctext x='320' y='190' font-family='sans-serif' font-size='26' fill='%23253A6A' text-anchor='middle'%3EOakwood Primary — Campus Tour%3C/text%3E%3C/svg%3E"> <span class="video-embed-play" aria-hidden="true"> <i class="fa-solid fa-play"></i> </span> </a> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><a class="video-embed" href="..." aria-label="Play video: ..."></code><br> <code> <img class="video-embed-poster" alt="" src="..."></code><br> <code> <span class="video-embed-play" aria-hidden="true"><i class="fa-solid fa-play"></i></span></code><br> <code></a></code> </div> </div> <!-- Section 2: Native video --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Native Video</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Native video:</strong> A real <code><video controls poster="..."></code> element — the browser supplies its own play button and controls, so no <code>.video-embed-play</code> overlay is used here. </p> </div> <div class="tw:max-w-md"> <div class="video-embed"> <video controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360'%3E%3Crect width='640' height='360' fill='%236B8E4E'/%3E%3Ctext x='320' y='190' font-family='sans-serif' font-size='26' fill='white' text-anchor='middle'%3EYear 6 Leavers Assembly%3C/text%3E%3C/svg%3E"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="video-embed"></code><br> <code> <video controls poster="..."><source src="..." type="video/mp4"></video></code><br> <code></div></code> </div> </div> <!-- Section 3: Iframe embed --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Iframe Embed</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Iframe embed:</strong> A provider embed (YouTube/Vimeo). The iframe is absolutely positioned to fill the same 16:9 frame — always give it a descriptive <code>title</code>. This preview uses a static <code>srcdoc</code> stand-in rather than a live provider embed, so the showcase doesn't pull in a third party's own markup/accessibility surface — in a real page, point <code>src</code> at the actual YouTube/Vimeo embed URL. </p> </div> <div class="tw:max-w-md"> <div class="video-embed"> <iframe srcdoc="<body style="margin:0;display:flex;align-items:center;justify-content:center;height:100vh;background:%23253A6A;color:white;font-family:sans-serif;font-size:14px">Provider embed placeholder</body>" title="Oakwood Primary — Open Day Highlights" allowfullscreen></iframe> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="..." allowfullscreen></iframe></div></code> </div> </div> <!-- Section 4: In a profile card context --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">In a School-Profile Card</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Profile context:</strong> Composed inside a regular <code>.card</code> — the video is content like any other section, not a bespoke layout. </p> </div> <div class="tw:max-w-md"> <div class="card"> <div class="card-body"> <h3 class="h5 card-title tw:mb-3">Welcome from our Headteacher</h3> <a class="video-embed tw:mb-3" href="https://example.com/videos/headteacher-welcome" aria-label="Play video: Welcome from our Headteacher"> <img class="video-embed-poster" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360'%3E%3Crect width='640' height='360' fill='%23B08968'/%3E%3Ctext x='320' y='190' font-family='sans-serif' font-size='24' fill='white' text-anchor='middle'%3EHeadteacher Welcome%3C/text%3E%3C/svg%3E"> <span class="video-embed-play" aria-hidden="true"> <i class="fa-solid fa-play"></i> </span> </a> <p class="text-muted tw:text-sm tw:mb-0">2 min watch — recorded September 2026.</p> </div> </div> </div> </div> <!-- Quick Reference --> <div class="tw:border-t tw:pt-6"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p> <p class="tw:mb-0 tw:text-xs tw:font-mono"> <strong>Frame:</strong> .video-embed (tw:aspect-video, rounded 8px, no player JS)<br> <strong>Poster:</strong> .video-embed-poster (full-cover <img>)<br> <strong>Play affordance:</strong> .video-embed-play (centered white circle; auto-adds a dark scrim to .video-embed)<br> <strong>Native/iframe:</strong> a plain <video> or <iframe> inside .video-embed fills the frame automatically </p> </div> </div></div>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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>VIDEO EMBED:</strong> 16:9 poster + native player / iframe slot<br> <strong>VARIANTS:</strong> Poster + play | Native video | Iframe embed | In a profile card </p> <p class="tw:mb-0 tw:text-sm"> <code>.video-embed</code> is layout/chrome only — no player JS. It's a <code>tw:aspect-video</code> rounded box (matches the listing-card media-box radius); drop in a poster image + play affordance, a native <code><video></code>, or a provider <code><iframe></code> and it fills the frame. </p> </div> <!-- Section 1: Poster + play affordance --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Poster + Play Affordance</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Poster + play:</strong> A static "watch" thumbnail — no in-page playback, no JS. Wrap the whole <code>.video-embed</code> in an <code><a></code> that links out to the actual video (a lightbox or new tab). The dark scrim + white circular play icon appear automatically whenever <code>.video-embed-play</code> is present. </p> </div> <div class="tw:max-w-md"> <a class="video-embed" href="https://example.com/videos/oakwood-tour" aria-label="Play video: A tour of Oakwood Primary School"> <img class="video-embed-poster" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360'%3E%3Crect width='640' height='360' fill='%238FB8DE'/%3E%3Ctext x='320' y='190' font-family='sans-serif' font-size='26' fill='%23253A6A' text-anchor='middle'%3EOakwood Primary — Campus Tour%3C/text%3E%3C/svg%3E"> <span class="video-embed-play" aria-hidden="true"> <i class="fa-solid fa-play"></i> </span> </a> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><a class="video-embed" href="..." aria-label="Play video: ..."></code><br> <code> <img class="video-embed-poster" alt="" src="..."></code><br> <code> <span class="video-embed-play" aria-hidden="true"><i class="fa-solid fa-play"></i></span></code><br> <code></a></code> </div> </div> <!-- Section 2: Native video --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Native Video</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Native video:</strong> A real <code><video controls poster="..."></code> element — the browser supplies its own play button and controls, so no <code>.video-embed-play</code> overlay is used here. </p> </div> <div class="tw:max-w-md"> <div class="video-embed"> <video controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360'%3E%3Crect width='640' height='360' fill='%236B8E4E'/%3E%3Ctext x='320' y='190' font-family='sans-serif' font-size='26' fill='white' text-anchor='middle'%3EYear 6 Leavers Assembly%3C/text%3E%3C/svg%3E"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="video-embed"></code><br> <code> <video controls poster="..."><source src="..." type="video/mp4"></video></code><br> <code></div></code> </div> </div> <!-- Section 3: Iframe embed --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Iframe Embed</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Iframe embed:</strong> A provider embed (YouTube/Vimeo). The iframe is absolutely positioned to fill the same 16:9 frame — always give it a descriptive <code>title</code>. This preview uses a static <code>srcdoc</code> stand-in rather than a live provider embed, so the showcase doesn't pull in a third party's own markup/accessibility surface — in a real page, point <code>src</code> at the actual YouTube/Vimeo embed URL. </p> </div> <div class="tw:max-w-md"> <div class="video-embed"> <iframe srcdoc="<body style="margin:0;display:flex;align-items:center;justify-content:center;height:100vh;background:%23253A6A;color:white;font-family:sans-serif;font-size:14px">Provider embed placeholder</body>" title="Oakwood Primary — Open Day Highlights" allowfullscreen></iframe> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="..." allowfullscreen></iframe></div></code> </div> </div> <!-- Section 4: In a profile card context --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">In a School-Profile Card</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Profile context:</strong> Composed inside a regular <code>.card</code> — the video is content like any other section, not a bespoke layout. </p> </div> <div class="tw:max-w-md"> <div class="card"> <div class="card-body"> <h3 class="h5 card-title tw:mb-3">Welcome from our Headteacher</h3> <a class="video-embed tw:mb-3" href="https://example.com/videos/headteacher-welcome" aria-label="Play video: Welcome from our Headteacher"> <img class="video-embed-poster" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360'%3E%3Crect width='640' height='360' fill='%23B08968'/%3E%3Ctext x='320' y='190' font-family='sans-serif' font-size='24' fill='white' text-anchor='middle'%3EHeadteacher Welcome%3C/text%3E%3C/svg%3E"> <span class="video-embed-play" aria-hidden="true"> <i class="fa-solid fa-play"></i> </span> </a> <p class="text-muted tw:text-sm tw:mb-0">2 min watch — recorded September 2026.</p> </div> </div> </div> </div> <!-- Quick Reference --> <div class="tw:border-t tw:pt-6"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p> <p class="tw:mb-0 tw:text-xs tw:font-mono"> <strong>Frame:</strong> .video-embed (tw:aspect-video, rounded 8px, no player JS)<br> <strong>Poster:</strong> .video-embed-poster (full-cover <img>)<br> <strong>Play affordance:</strong> .video-embed-play (centered white circle; auto-adds a dark scrim to .video-embed)<br> <strong>Native/iframe:</strong> a plain <video> or <iframe> inside .video-embed fills the frame automatically </p> </div> </div></div>No notes provided.
No params configured.