@smartimpact-it/modern-video-embed 2.0.6 → 2.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/components/BaseVideoEmbed.d.ts +5 -0
  2. package/dist/components/BaseVideoEmbed.d.ts.map +1 -1
  3. package/dist/components/BaseVideoEmbed.js +19 -0
  4. package/dist/components/BaseVideoEmbed.js.map +1 -1
  5. package/dist/components/VideoEmbed.d.ts.map +1 -1
  6. package/dist/components/VideoEmbed.js +19 -3
  7. package/dist/components/VideoEmbed.js.map +1 -1
  8. package/dist/components/VimeoEmbed.d.ts.map +1 -1
  9. package/dist/components/VimeoEmbed.js +33 -5
  10. package/dist/components/VimeoEmbed.js.map +1 -1
  11. package/dist/components/VimeoEmbed.min.js +1 -1
  12. package/dist/components/YouTubeEmbed.d.ts.map +1 -1
  13. package/dist/components/YouTubeEmbed.js +25 -7
  14. package/dist/components/YouTubeEmbed.js.map +1 -1
  15. package/dist/components/YouTubeEmbed.min.js +1 -1
  16. package/dist/css/components.css +68 -42
  17. package/dist/css/components.css.map +1 -1
  18. package/dist/css/components.min.css +1 -1
  19. package/dist/css/main.css +68 -42
  20. package/dist/css/main.css.map +1 -1
  21. package/dist/css/main.min.css +1 -1
  22. package/package.json +1 -1
  23. package/src/components/BaseVideoEmbed.ts +32 -0
  24. package/src/components/VideoEmbed.ts +20 -2
  25. package/src/components/VimeoEmbed.ts +31 -4
  26. package/src/components/YouTubeEmbed.ts +25 -8
  27. package/src/styles/_embed-base.scss +35 -15
  28. package/src/styles/video-embed.scss +18 -0
package/dist/css/components.css CHANGED
@@ -11,16 +11,18 @@
11
11
  * Used by all video embed components
12
12
  */
13
13
  youtube-embed {
14
- --video-aspect-ratio: 56.25%;
15
- --poster-object-fit: cover;
16
- --video-object-fit: contain;
17
- --control-button-size: 70px;
18
- --control-button-color: #ffffff;
19
- --overlay-background-color: rgba(0, 0, 0, 0.5);
14
+ --si-embed-video-aspect-ratio: 56.25%;
15
+ --si-embed-aspect-width: 16;
16
+ --si-embed-aspect-height: 9;
17
+ --si-embed-poster-object-fit: cover;
18
+ --si-embed-video-object-fit: contain;
19
+ --si-embed-control-button-size: 70px;
20
+ --si-embed-control-button-color: #ffffff;
21
+ --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
20
22
  display: block;
21
23
  position: relative;
22
24
  width: 100%;
23
- padding-top: var(--video-aspect-ratio);
25
+ padding-top: var(--si-embed-video-aspect-ratio);
24
26
  overflow: hidden;
25
27
  background-color: #000;
26
28
  }
@@ -32,12 +34,12 @@ youtube-embed .vimeo-poster {
32
34
  left: 0;
33
35
  width: 100%;
34
36
  height: 100%;
35
- object-fit: var(--poster-object-fit);
37
+ object-fit: var(--si-embed-poster-object-fit);
36
38
  display: block;
37
39
  cursor: pointer;
38
40
  }
39
41
  youtube-embed .button-overlay {
40
- background: var(--overlay-background-color);
42
+ background: var(--si-embed-overlay-background-color);
41
43
  cursor: pointer;
42
44
  display: flex;
43
45
  align-items: center;
@@ -65,8 +67,8 @@ youtube-embed .button-overlay .button {
65
67
  display: flex;
66
68
  align-items: center;
67
69
  justify-content: center;
68
- height: var(--control-button-size);
69
- width: var(--control-button-size);
70
+ height: var(--si-embed-control-button-size);
71
+ width: var(--si-embed-control-button-size);
70
72
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
71
73
  background-size: cover;
72
74
  background-repeat: no-repeat;
@@ -91,7 +93,7 @@ youtube-embed.is-background iframe {
91
93
  top: 50%;
92
94
  left: 50%;
93
95
  transform: translate(-50%, -50%);
94
- aspect-ratio: 16/9;
96
+ aspect-ratio: var(--si-embed-aspect-width)/var(--si-embed-aspect-height);
95
97
  width: auto;
96
98
  height: auto;
97
99
  min-width: 100%;
@@ -109,7 +111,7 @@ youtube-embed.has-background-controls .button-overlay {
109
111
  padding: 1rem;
110
112
  }
111
113
  youtube-embed.has-background-controls .button-overlay .button {
112
- --control-button-size: 40px;
114
+ --si-embed-control-button-size: 40px;
113
115
  opacity: 0.7;
114
116
  transition: opacity 0.2s ease;
115
117
  }
@@ -175,7 +177,7 @@ youtube-embed iframe {
175
177
  width: 100%;
176
178
  height: 100%;
177
179
  border: none;
178
- object-fit: var(--video-object-fit);
180
+ object-fit: var(--si-embed-video-object-fit);
179
181
  }
180
182
 
181
183
  /**
@@ -183,16 +185,18 @@ youtube-embed iframe {
183
185
  * Uses shared base styles with Vimeo-specific branding
184
186
  */
185
187
  vimeo-embed {
186
- --video-aspect-ratio: 56.25%;
187
- --poster-object-fit: cover;
188
- --video-object-fit: contain;
189
- --control-button-size: 70px;
190
- --control-button-color: #ffffff;
191
- --overlay-background-color: rgba(0, 0, 0, 0.5);
188
+ --si-embed-video-aspect-ratio: 56.25%;
189
+ --si-embed-aspect-width: 16;
190
+ --si-embed-aspect-height: 9;
191
+ --si-embed-poster-object-fit: cover;
192
+ --si-embed-video-object-fit: contain;
193
+ --si-embed-control-button-size: 70px;
194
+ --si-embed-control-button-color: #ffffff;
195
+ --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
192
196
  display: block;
193
197
  position: relative;
194
198
  width: 100%;
195
- padding-top: var(--video-aspect-ratio);
199
+ padding-top: var(--si-embed-video-aspect-ratio);
196
200
  overflow: hidden;
197
201
  background-color: #000;
198
202
  }
@@ -204,12 +208,12 @@ vimeo-embed .vimeo-poster {
204
208
  left: 0;
205
209
  width: 100%;
206
210
  height: 100%;
207
- object-fit: var(--poster-object-fit);
211
+ object-fit: var(--si-embed-poster-object-fit);
208
212
  display: block;
209
213
  cursor: pointer;
210
214
  }
211
215
  vimeo-embed .button-overlay {
212
- background: var(--overlay-background-color);
216
+ background: var(--si-embed-overlay-background-color);
213
217
  cursor: pointer;
214
218
  display: flex;
215
219
  align-items: center;
@@ -237,8 +241,8 @@ vimeo-embed .button-overlay .button {
237
241
  display: flex;
238
242
  align-items: center;
239
243
  justify-content: center;
240
- height: var(--control-button-size);
241
- width: var(--control-button-size);
244
+ height: var(--si-embed-control-button-size);
245
+ width: var(--si-embed-control-button-size);
242
246
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
243
247
  background-size: cover;
244
248
  background-repeat: no-repeat;
@@ -263,7 +267,7 @@ vimeo-embed.is-background iframe {
263
267
  top: 50%;
264
268
  left: 50%;
265
269
  transform: translate(-50%, -50%);
266
- aspect-ratio: 16/9;
270
+ aspect-ratio: var(--si-embed-aspect-width)/var(--si-embed-aspect-height);
267
271
  width: auto;
268
272
  height: auto;
269
273
  min-width: 100%;
@@ -281,7 +285,7 @@ vimeo-embed.has-background-controls .button-overlay {
281
285
  padding: 1rem;
282
286
  }
283
287
  vimeo-embed.has-background-controls .button-overlay .button {
284
- --control-button-size: 40px;
288
+ --si-embed-control-button-size: 40px;
285
289
  opacity: 0.7;
286
290
  transition: opacity 0.2s ease;
287
291
  }
@@ -347,7 +351,7 @@ vimeo-embed iframe {
347
351
  width: 100%;
348
352
  height: 100%;
349
353
  border: none;
350
- object-fit: var(--video-object-fit);
354
+ object-fit: var(--si-embed-video-object-fit);
351
355
  }
352
356
 
353
357
  /**
@@ -355,16 +359,18 @@ vimeo-embed iframe {
355
359
  * Uses shared base styles with video-specific overrides
356
360
  */
357
361
  video-embed {
358
- --video-aspect-ratio: 56.25%;
359
- --poster-object-fit: cover;
360
- --video-object-fit: contain;
361
- --control-button-size: 70px;
362
- --control-button-color: #ffffff;
363
- --overlay-background-color: rgba(0, 0, 0, 0.5);
362
+ --si-embed-video-aspect-ratio: 56.25%;
363
+ --si-embed-aspect-width: 16;
364
+ --si-embed-aspect-height: 9;
365
+ --si-embed-poster-object-fit: cover;
366
+ --si-embed-video-object-fit: contain;
367
+ --si-embed-control-button-size: 70px;
368
+ --si-embed-control-button-color: #ffffff;
369
+ --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
364
370
  display: block;
365
371
  position: relative;
366
372
  width: 100%;
367
- padding-top: var(--video-aspect-ratio);
373
+ padding-top: var(--si-embed-video-aspect-ratio);
368
374
  overflow: hidden;
369
375
  background-color: #000;
370
376
  }
@@ -376,12 +382,12 @@ video-embed .vimeo-poster {
376
382
  left: 0;
377
383
  width: 100%;
378
384
  height: 100%;
379
- object-fit: var(--poster-object-fit);
385
+ object-fit: var(--si-embed-poster-object-fit);
380
386
  display: block;
381
387
  cursor: pointer;
382
388
  }
383
389
  video-embed .button-overlay {
384
- background: var(--overlay-background-color);
390
+ background: var(--si-embed-overlay-background-color);
385
391
  cursor: pointer;
386
392
  display: flex;
387
393
  align-items: center;
@@ -409,8 +415,8 @@ video-embed .button-overlay .button {
409
415
  display: flex;
410
416
  align-items: center;
411
417
  justify-content: center;
412
- height: var(--control-button-size);
413
- width: var(--control-button-size);
418
+ height: var(--si-embed-control-button-size);
419
+ width: var(--si-embed-control-button-size);
414
420
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
415
421
  background-size: cover;
416
422
  background-repeat: no-repeat;
@@ -436,10 +442,18 @@ video-embed.is-background video {
436
442
  left: 50%;
437
443
  transform: translate(-50%, -50%);
438
444
  width: 100%;
439
- height: 100%;
445
+ height: calc(100% * var(--si-embed-aspect-height) / var(--si-embed-aspect-width));
446
+ min-width: 100%;
447
+ min-height: 100%;
440
448
  object-fit: cover;
441
449
  pointer-events: none;
442
450
  }
451
+ video-embed.is-background video::-webkit-media-controls {
452
+ display: none !important;
453
+ }
454
+ video-embed.is-background video::-webkit-media-controls-enclosure {
455
+ display: none !important;
456
+ }
443
457
  video-embed.is-background .button-overlay {
444
458
  display: none;
445
459
  }
@@ -451,7 +465,7 @@ video-embed.has-background-controls .button-overlay {
451
465
  padding: 1rem;
452
466
  }
453
467
  video-embed.has-background-controls .button-overlay .button {
454
- --control-button-size: 40px;
468
+ --si-embed-control-button-size: 40px;
455
469
  opacity: 0.7;
456
470
  transition: opacity 0.2s ease;
457
471
  }
@@ -517,7 +531,19 @@ video-embed video {
517
531
  width: 100%;
518
532
  height: 100%;
519
533
  border: none;
520
- object-fit: var(--video-object-fit);
534
+ object-fit: var(--si-embed-video-object-fit);
535
+ }
536
+ video-embed video::-webkit-media-controls {
537
+ display: none !important;
538
+ }
539
+ video-embed video::-webkit-media-controls-enclosure {
540
+ display: none !important;
541
+ }
542
+ video-embed[controls] video::-webkit-media-controls {
543
+ display: flex !important;
544
+ }
545
+ video-embed[controls] video::-webkit-media-controls-enclosure {
546
+ display: flex !important;
521
547
  }
522
548
  video-embed .video-poster {
523
549
  background-size: cover;
package/dist/css/components.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/styles/youtube-embed.scss","../../src/styles/_embed-base.scss","../../src/styles/_shared-functions.scss","../../src/styles/vimeo-embed.scss","../../src/styles/video-embed.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AFMA;ECGE;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;;AAgBA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAeJ;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAYN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,ODlM0C;ECmM1C;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YD/M0C;ECgN1C;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YDzNiD;;AC4NnD;EACE;EACA;;AD3NR;ECkBA;EACA;EACA;EACA;EACA;EACA;EACA;;;AEnCF;AAAA;AAAA;AAAA;AAMA;EFGE;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;;AAgBA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAeJ;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAYN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,OElMwC;EFmMxC;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YE/MwC;EFgNxC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YEzN+C;;AF4NjD;EACE;EACA;;AE3NR;EFkBA;EACA;EACA;EACA;EACA;EACA;EACA;;;AGnCF;AAAA;AAAA;AAAA;AAMA;EHGE;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;;AAgBA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAgBE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAYN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,OGlMuC;EHmMvC;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YG/MuC;EHgNvC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YGzN8C;;AH4NhD;EACE;EACA;;AG3NR;EHkBA;EACA;EACA;EACA;EACA;EACA;EACA;;AGnBA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"components.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/styles/youtube-embed.scss","../../src/styles/_embed-base.scss","../../src/styles/_shared-functions.scss","../../src/styles/vimeo-embed.scss","../../src/styles/video-embed.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AFMA;ECIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;;AAgBA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;EAEA;EAGA;EACA;EAEA;EACA;EACA;;AA4BJ;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAYN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,ODtN0C;ECuN1C;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YDnO0C;ECoO1C;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YD7OiD;;ACgPnD;EACE;EACA;;AD/OR;ECqBA;EACA;EACA;EACA;EACA;EACA;EACA;;;AEtCF;AAAA;AAAA;AAAA;AAMA;EFIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;;AAgBA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;EAEA;EAGA;EACA;EAEA;EACA;EACA;;AA4BJ;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAYN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,OEtNwC;EFuNxC;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YEnOwC;EFoOxC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YE7O+C;;AFgPjD;EACE;EACA;;AE/OR;EFqBA;EACA;EACA;EACA;EACA;EACA;EACA;;;AGtCF;AAAA;AAAA;AAAA;AAMA;EHIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;;AAgBA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAoBE;EACE;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;;AAGA;EACE;;AAEF;EACE;;AAKN;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAYN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,OGtNuC;EHuNvC;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YGnOuC;EHoOvC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YG7O8C;;AHgPhD;EACE;EACA;;AG/OR;EHqBA;EACA;EACA;EACA;EACA;EACA;EACA;;AGvBE;EACE;;AAEF;EACE;;AAMF;EACE;;AAEF;EACE;;AAKJ;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"components.css"}
package/dist/css/components.min.css CHANGED
@@ -1 +1 @@
1
- video-embed,vimeo-embed,youtube-embed{--video-aspect-ratio:56.25%;--poster-object-fit:cover;--video-object-fit:contain;--control-button-size:70px;--control-button-color:#ffffff;--overlay-background-color:rgba(0, 0, 0, 0.5);display:block;position:relative;width:100%;padding-top:var(--video-aspect-ratio);overflow:hidden;background-color:#000}youtube-embed .video-poster,youtube-embed .vimeo-poster,youtube-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--poster-object-fit);display:block;cursor:pointer}youtube-embed .button-overlay,youtube-embed .youtube-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}youtube-embed .button-overlay{background:var(--overlay-background-color);cursor:pointer;right:0;bottom:0;transition:opacity .3s ease;z-index:10}youtube-embed.is-playing .button-overlay{opacity:0;pointer-events:none}youtube-embed.is-playing:hover .button-overlay{opacity:1;pointer-events:auto}youtube-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center;height:var(--control-button-size);width:var(--control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}youtube-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}video-embed.is-background,vimeo-embed.is-background,youtube-embed.is-background{padding-top:0;position:absolute;height:100%;width:100%;top:0;left:0;z-index:0;overflow:hidden;background:#000}vimeo-embed.is-background iframe,youtube-embed.is-background iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:16/9;width:auto;height:auto;min-width:100%;min-height:100%;pointer-events:none}youtube-embed.is-background .button-overlay{display:none}youtube-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}youtube-embed.has-background-controls .button-overlay .button{--control-button-size:40px;opacity:.7;transition:opacity .2s ease}youtube-embed.has-background-controls .button-overlay .button:hover,youtube-embed.has-background-controls.is-playing .button-overlay:hover{opacity:1}youtube-embed.has-background-controls.is-playing .button-overlay{opacity:0}youtube-embed .youtube-error-message{background:rgba(0,0,0,.9);color:#fff;z-index:1000}youtube-embed .youtube-error-message .error-content{text-align:center;padding:2rem;max-width:400px}youtube-embed .youtube-error-message .error-content svg{color:red;margin-bottom:1rem}youtube-embed .youtube-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}youtube-embed .youtube-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:red;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}youtube-embed .youtube-error-message .error-content .retry-button:hover{background:#c00}youtube-embed .youtube-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}video-embed video,vimeo-embed iframe,youtube-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;object-fit:var(--video-object-fit)}vimeo-embed .video-poster,vimeo-embed .vimeo-poster,vimeo-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--poster-object-fit);display:block;cursor:pointer}vimeo-embed .button-overlay,vimeo-embed .vimeo-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}vimeo-embed .button-overlay{background:var(--overlay-background-color);cursor:pointer;right:0;bottom:0;transition:opacity .3s ease;z-index:10}vimeo-embed.is-playing .button-overlay{opacity:0;pointer-events:none}vimeo-embed.is-playing:hover .button-overlay{opacity:1;pointer-events:auto}vimeo-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center;height:var(--control-button-size);width:var(--control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}vimeo-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}vimeo-embed.is-background .button-overlay{display:none}vimeo-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}vimeo-embed.has-background-controls .button-overlay .button{--control-button-size:40px;opacity:.7;transition:opacity .2s ease}vimeo-embed.has-background-controls .button-overlay .button:hover,vimeo-embed.has-background-controls.is-playing .button-overlay:hover{opacity:1}vimeo-embed.has-background-controls.is-playing .button-overlay{opacity:0}vimeo-embed .vimeo-error-message{background:rgba(0,0,0,.9);color:#fff;z-index:1000}vimeo-embed .vimeo-error-message .error-content{text-align:center;padding:2rem;max-width:400px}vimeo-embed .vimeo-error-message .error-content svg{color:#00adef;margin-bottom:1rem}vimeo-embed .vimeo-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}vimeo-embed .vimeo-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:#00adef;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}vimeo-embed .vimeo-error-message .error-content .retry-button:hover{background:#0088bf}vimeo-embed .vimeo-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}video-embed .video-poster,video-embed .vimeo-poster,video-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--poster-object-fit);display:block;cursor:pointer}video-embed .button-overlay,video-embed .video-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}video-embed .button-overlay{background:var(--overlay-background-color);cursor:pointer;right:0;bottom:0;transition:opacity .3s ease;z-index:10}video-embed.is-playing .button-overlay{opacity:0;pointer-events:none}video-embed.is-playing:hover .button-overlay{opacity:1;pointer-events:auto}video-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center;height:var(--control-button-size);width:var(--control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}video-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}video-embed.is-background video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;object-fit:cover;pointer-events:none}video-embed.is-background .button-overlay{display:none}video-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}video-embed.has-background-controls .button-overlay .button{--control-button-size:40px;opacity:.7;transition:opacity .2s ease}video-embed.has-background-controls .button-overlay .button:hover,video-embed.has-background-controls.is-playing .button-overlay:hover{opacity:1}video-embed.has-background-controls.is-playing .button-overlay{opacity:0}video-embed .video-error-message{background:rgba(0,0,0,.9);color:#fff;z-index:1000}video-embed .video-error-message .error-content{text-align:center;padding:2rem;max-width:400px}video-embed .video-error-message .error-content svg{color:#f44;margin-bottom:1rem}video-embed .video-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}video-embed .video-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:#f44;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}video-embed .video-error-message .error-content .retry-button:hover{background:#c00}video-embed .video-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}video-embed .video-poster{background-size:cover;background-position:center;background-repeat:no-repeat}video-embed.is-fullscreen{padding-top:0;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}video-embed.is-fullscreen video{object-fit:contain}
1
+ video-embed,vimeo-embed,youtube-embed{--si-embed-video-aspect-ratio:56.25%;--si-embed-aspect-width:16;--si-embed-aspect-height:9;--si-embed-poster-object-fit:cover;--si-embed-video-object-fit:contain;--si-embed-control-button-size:70px;--si-embed-control-button-color:#ffffff;--si-embed-overlay-background-color:rgba(0, 0, 0, 0.5);display:block;position:relative;width:100%;padding-top:var(--si-embed-video-aspect-ratio);overflow:hidden;background-color:#000}youtube-embed .video-poster,youtube-embed .vimeo-poster,youtube-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--si-embed-poster-object-fit);display:block;cursor:pointer}youtube-embed .button-overlay,youtube-embed .youtube-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}youtube-embed .button-overlay{background:var(--si-embed-overlay-background-color);cursor:pointer;right:0;bottom:0;transition:opacity .3s ease;z-index:10}youtube-embed.is-playing .button-overlay{opacity:0;pointer-events:none}youtube-embed.is-playing:hover .button-overlay{opacity:1;pointer-events:auto}youtube-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center;height:var(--si-embed-control-button-size);width:var(--si-embed-control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}youtube-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}video-embed.is-background,vimeo-embed.is-background,youtube-embed.is-background{padding-top:0;position:absolute;height:100%;width:100%;top:0;left:0;z-index:0;overflow:hidden;background:#000}vimeo-embed.is-background iframe,youtube-embed.is-background iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:var(--si-embed-aspect-width)/var(--si-embed-aspect-height);width:auto;height:auto;min-width:100%;min-height:100%;pointer-events:none}youtube-embed.is-background .button-overlay{display:none}youtube-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}youtube-embed.has-background-controls .button-overlay .button{--si-embed-control-button-size:40px;opacity:.7;transition:opacity .2s ease}youtube-embed.has-background-controls .button-overlay .button:hover,youtube-embed.has-background-controls.is-playing .button-overlay:hover{opacity:1}youtube-embed.has-background-controls.is-playing .button-overlay{opacity:0}youtube-embed .youtube-error-message{background:rgba(0,0,0,.9);color:#fff;z-index:1000}youtube-embed .youtube-error-message .error-content{text-align:center;padding:2rem;max-width:400px}youtube-embed .youtube-error-message .error-content svg{color:red;margin-bottom:1rem}youtube-embed .youtube-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}youtube-embed .youtube-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:red;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}youtube-embed .youtube-error-message .error-content .retry-button:hover{background:#c00}youtube-embed .youtube-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}video-embed video,vimeo-embed iframe,youtube-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;object-fit:var(--si-embed-video-object-fit)}vimeo-embed .video-poster,vimeo-embed .vimeo-poster,vimeo-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--si-embed-poster-object-fit);display:block;cursor:pointer}vimeo-embed .button-overlay,vimeo-embed .vimeo-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}vimeo-embed .button-overlay{background:var(--si-embed-overlay-background-color);cursor:pointer;right:0;bottom:0;transition:opacity .3s ease;z-index:10}vimeo-embed.is-playing .button-overlay{opacity:0;pointer-events:none}vimeo-embed.is-playing:hover .button-overlay{opacity:1;pointer-events:auto}vimeo-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center;height:var(--si-embed-control-button-size);width:var(--si-embed-control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}vimeo-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}vimeo-embed.is-background .button-overlay{display:none}vimeo-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}vimeo-embed.has-background-controls .button-overlay .button{--si-embed-control-button-size:40px;opacity:.7;transition:opacity .2s ease}vimeo-embed.has-background-controls .button-overlay .button:hover,vimeo-embed.has-background-controls.is-playing .button-overlay:hover{opacity:1}vimeo-embed.has-background-controls.is-playing .button-overlay{opacity:0}vimeo-embed .vimeo-error-message{background:rgba(0,0,0,.9);color:#fff;z-index:1000}vimeo-embed .vimeo-error-message .error-content{text-align:center;padding:2rem;max-width:400px}vimeo-embed .vimeo-error-message .error-content svg{color:#00adef;margin-bottom:1rem}vimeo-embed .vimeo-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}vimeo-embed .vimeo-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:#00adef;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}vimeo-embed .vimeo-error-message .error-content .retry-button:hover{background:#0088bf}vimeo-embed .vimeo-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}video-embed .video-poster,video-embed .vimeo-poster,video-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--si-embed-poster-object-fit);display:block;cursor:pointer}video-embed .button-overlay{background:var(--si-embed-overlay-background-color);position:absolute;left:0;top:0;right:0;bottom:0;height:100%;width:100%;transition:opacity .3s ease;z-index:10}video-embed.is-playing .button-overlay{opacity:0;pointer-events:none}video-embed.is-playing:hover .button-overlay{opacity:1;pointer-events:auto}video-embed .button-overlay,video-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center}video-embed .button-overlay .button{height:var(--si-embed-control-button-size);width:var(--si-embed-control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}video-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}video-embed.is-background video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:calc(100%*var(--si-embed-aspect-height)/var(--si-embed-aspect-width));min-width:100%;min-height:100%;object-fit:cover;pointer-events:none}video-embed video::-webkit-media-controls,video-embed.is-background video::-webkit-media-controls{display:none!important}video-embed video::-webkit-media-controls-enclosure,video-embed.is-background video::-webkit-media-controls-enclosure{display:none!important}video-embed.is-background .button-overlay{display:none}video-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}video-embed.has-background-controls .button-overlay .button{--si-embed-control-button-size:40px;opacity:.7;transition:opacity .2s ease}video-embed.has-background-controls .button-overlay .button:hover,video-embed.has-background-controls.is-playing .button-overlay:hover{opacity:1}video-embed.has-background-controls.is-playing .button-overlay{opacity:0}video-embed .video-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9);color:#fff;z-index:1000}video-embed .video-error-message .error-content{text-align:center;padding:2rem;max-width:400px}video-embed .video-error-message .error-content svg{color:#f44;margin-bottom:1rem}video-embed .video-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}video-embed .video-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:#f44;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}video-embed .video-error-message .error-content .retry-button:hover{background:#c00}video-embed .video-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}video-embed[controls] video::-webkit-media-controls{display:flex!important}video-embed[controls] video::-webkit-media-controls-enclosure{display:flex!important}video-embed .video-poster{background-size:cover;background-position:center;background-repeat:no-repeat}video-embed.is-fullscreen{padding-top:0;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}video-embed.is-fullscreen video{object-fit:contain}
package/dist/css/main.css CHANGED
@@ -11872,16 +11872,18 @@ textarea.form-control-lg {
11872
11872
  * Used by all video embed components
11873
11873
  */
11874
11874
  youtube-embed {
11875
- --video-aspect-ratio: 56.25%;
11876
- --poster-object-fit: cover;
11877
- --video-object-fit: contain;
11878
- --control-button-size: 70px;
11879
- --control-button-color: #ffffff;
11880
- --overlay-background-color: rgba(0, 0, 0, 0.5);
11875
+ --si-embed-video-aspect-ratio: 56.25%;
11876
+ --si-embed-aspect-width: 16;
11877
+ --si-embed-aspect-height: 9;
11878
+ --si-embed-poster-object-fit: cover;
11879
+ --si-embed-video-object-fit: contain;
11880
+ --si-embed-control-button-size: 70px;
11881
+ --si-embed-control-button-color: #ffffff;
11882
+ --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
11881
11883
  display: block;
11882
11884
  position: relative;
11883
11885
  width: 100%;
11884
- padding-top: var(--video-aspect-ratio);
11886
+ padding-top: var(--si-embed-video-aspect-ratio);
11885
11887
  overflow: hidden;
11886
11888
  background-color: #000;
11887
11889
  }
@@ -11893,12 +11895,12 @@ youtube-embed .vimeo-poster {
11893
11895
  left: 0;
11894
11896
  width: 100%;
11895
11897
  height: 100%;
11896
- object-fit: var(--poster-object-fit);
11898
+ object-fit: var(--si-embed-poster-object-fit);
11897
11899
  display: block;
11898
11900
  cursor: pointer;
11899
11901
  }
11900
11902
  youtube-embed .button-overlay {
11901
- background: var(--overlay-background-color);
11903
+ background: var(--si-embed-overlay-background-color);
11902
11904
  cursor: pointer;
11903
11905
  display: flex;
11904
11906
  align-items: center;
@@ -11926,8 +11928,8 @@ youtube-embed .button-overlay .button {
11926
11928
  display: flex;
11927
11929
  align-items: center;
11928
11930
  justify-content: center;
11929
- height: var(--control-button-size);
11930
- width: var(--control-button-size);
11931
+ height: var(--si-embed-control-button-size);
11932
+ width: var(--si-embed-control-button-size);
11931
11933
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
11932
11934
  background-size: cover;
11933
11935
  background-repeat: no-repeat;
@@ -11952,7 +11954,7 @@ youtube-embed.is-background iframe {
11952
11954
  top: 50%;
11953
11955
  left: 50%;
11954
11956
  transform: translate(-50%, -50%);
11955
- aspect-ratio: 16/9;
11957
+ aspect-ratio: var(--si-embed-aspect-width)/var(--si-embed-aspect-height);
11956
11958
  width: auto;
11957
11959
  height: auto;
11958
11960
  min-width: 100%;
@@ -11970,7 +11972,7 @@ youtube-embed.has-background-controls .button-overlay {
11970
11972
  padding: 1rem;
11971
11973
  }
11972
11974
  youtube-embed.has-background-controls .button-overlay .button {
11973
- --control-button-size: 40px;
11975
+ --si-embed-control-button-size: 40px;
11974
11976
  opacity: 0.7;
11975
11977
  transition: opacity 0.2s ease;
11976
11978
  }
@@ -12036,7 +12038,7 @@ youtube-embed iframe {
12036
12038
  width: 100%;
12037
12039
  height: 100%;
12038
12040
  border: none;
12039
- object-fit: var(--video-object-fit);
12041
+ object-fit: var(--si-embed-video-object-fit);
12040
12042
  }
12041
12043
 
12042
12044
  /**
@@ -12044,16 +12046,18 @@ youtube-embed iframe {
12044
12046
  * Uses shared base styles with Vimeo-specific branding
12045
12047
  */
12046
12048
  vimeo-embed {
12047
- --video-aspect-ratio: 56.25%;
12048
- --poster-object-fit: cover;
12049
- --video-object-fit: contain;
12050
- --control-button-size: 70px;
12051
- --control-button-color: #ffffff;
12052
- --overlay-background-color: rgba(0, 0, 0, 0.5);
12049
+ --si-embed-video-aspect-ratio: 56.25%;
12050
+ --si-embed-aspect-width: 16;
12051
+ --si-embed-aspect-height: 9;
12052
+ --si-embed-poster-object-fit: cover;
12053
+ --si-embed-video-object-fit: contain;
12054
+ --si-embed-control-button-size: 70px;
12055
+ --si-embed-control-button-color: #ffffff;
12056
+ --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
12053
12057
  display: block;
12054
12058
  position: relative;
12055
12059
  width: 100%;
12056
- padding-top: var(--video-aspect-ratio);
12060
+ padding-top: var(--si-embed-video-aspect-ratio);
12057
12061
  overflow: hidden;
12058
12062
  background-color: #000;
12059
12063
  }
@@ -12065,12 +12069,12 @@ vimeo-embed .vimeo-poster {
12065
12069
  left: 0;
12066
12070
  width: 100%;
12067
12071
  height: 100%;
12068
- object-fit: var(--poster-object-fit);
12072
+ object-fit: var(--si-embed-poster-object-fit);
12069
12073
  display: block;
12070
12074
  cursor: pointer;
12071
12075
  }
12072
12076
  vimeo-embed .button-overlay {
12073
- background: var(--overlay-background-color);
12077
+ background: var(--si-embed-overlay-background-color);
12074
12078
  cursor: pointer;
12075
12079
  display: flex;
12076
12080
  align-items: center;
@@ -12098,8 +12102,8 @@ vimeo-embed .button-overlay .button {
12098
12102
  display: flex;
12099
12103
  align-items: center;
12100
12104
  justify-content: center;
12101
- height: var(--control-button-size);
12102
- width: var(--control-button-size);
12105
+ height: var(--si-embed-control-button-size);
12106
+ width: var(--si-embed-control-button-size);
12103
12107
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
12104
12108
  background-size: cover;
12105
12109
  background-repeat: no-repeat;
@@ -12124,7 +12128,7 @@ vimeo-embed.is-background iframe {
12124
12128
  top: 50%;
12125
12129
  left: 50%;
12126
12130
  transform: translate(-50%, -50%);
12127
- aspect-ratio: 16/9;
12131
+ aspect-ratio: var(--si-embed-aspect-width)/var(--si-embed-aspect-height);
12128
12132
  width: auto;
12129
12133
  height: auto;
12130
12134
  min-width: 100%;
@@ -12142,7 +12146,7 @@ vimeo-embed.has-background-controls .button-overlay {
12142
12146
  padding: 1rem;
12143
12147
  }
12144
12148
  vimeo-embed.has-background-controls .button-overlay .button {
12145
- --control-button-size: 40px;
12149
+ --si-embed-control-button-size: 40px;
12146
12150
  opacity: 0.7;
12147
12151
  transition: opacity 0.2s ease;
12148
12152
  }
@@ -12208,7 +12212,7 @@ vimeo-embed iframe {
12208
12212
  width: 100%;
12209
12213
  height: 100%;
12210
12214
  border: none;
12211
- object-fit: var(--video-object-fit);
12215
+ object-fit: var(--si-embed-video-object-fit);
12212
12216
  }
12213
12217
 
12214
12218
  /**
@@ -12216,16 +12220,18 @@ vimeo-embed iframe {
12216
12220
  * Uses shared base styles with video-specific overrides
12217
12221
  */
12218
12222
  video-embed {
12219
- --video-aspect-ratio: 56.25%;
12220
- --poster-object-fit: cover;
12221
- --video-object-fit: contain;
12222
- --control-button-size: 70px;
12223
- --control-button-color: #ffffff;
12224
- --overlay-background-color: rgba(0, 0, 0, 0.5);
12223
+ --si-embed-video-aspect-ratio: 56.25%;
12224
+ --si-embed-aspect-width: 16;
12225
+ --si-embed-aspect-height: 9;
12226
+ --si-embed-poster-object-fit: cover;
12227
+ --si-embed-video-object-fit: contain;
12228
+ --si-embed-control-button-size: 70px;
12229
+ --si-embed-control-button-color: #ffffff;
12230
+ --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
12225
12231
  display: block;
12226
12232
  position: relative;
12227
12233
  width: 100%;
12228
- padding-top: var(--video-aspect-ratio);
12234
+ padding-top: var(--si-embed-video-aspect-ratio);
12229
12235
  overflow: hidden;
12230
12236
  background-color: #000;
12231
12237
  }
@@ -12237,12 +12243,12 @@ video-embed .vimeo-poster {
12237
12243
  left: 0;
12238
12244
  width: 100%;
12239
12245
  height: 100%;
12240
- object-fit: var(--poster-object-fit);
12246
+ object-fit: var(--si-embed-poster-object-fit);
12241
12247
  display: block;
12242
12248
  cursor: pointer;
12243
12249
  }
12244
12250
  video-embed .button-overlay {
12245
- background: var(--overlay-background-color);
12251
+ background: var(--si-embed-overlay-background-color);
12246
12252
  cursor: pointer;
12247
12253
  display: flex;
12248
12254
  align-items: center;
@@ -12270,8 +12276,8 @@ video-embed .button-overlay .button {
12270
12276
  display: flex;
12271
12277
  align-items: center;
12272
12278
  justify-content: center;
12273
- height: var(--control-button-size);
12274
- width: var(--control-button-size);
12279
+ height: var(--si-embed-control-button-size);
12280
+ width: var(--si-embed-control-button-size);
12275
12281
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
12276
12282
  background-size: cover;
12277
12283
  background-repeat: no-repeat;
@@ -12297,10 +12303,18 @@ video-embed.is-background video {
12297
12303
  left: 50%;
12298
12304
  transform: translate(-50%, -50%);
12299
12305
  width: 100%;
12300
- height: 100%;
12306
+ height: calc(100% * var(--si-embed-aspect-height) / var(--si-embed-aspect-width));
12307
+ min-width: 100%;
12308
+ min-height: 100%;
12301
12309
  object-fit: cover;
12302
12310
  pointer-events: none;
12303
12311
  }
12312
+ video-embed.is-background video::-webkit-media-controls {
12313
+ display: none !important;
12314
+ }
12315
+ video-embed.is-background video::-webkit-media-controls-enclosure {
12316
+ display: none !important;
12317
+ }
12304
12318
  video-embed.is-background .button-overlay {
12305
12319
  display: none;
12306
12320
  }
@@ -12312,7 +12326,7 @@ video-embed.has-background-controls .button-overlay {
12312
12326
  padding: 1rem;
12313
12327
  }
12314
12328
  video-embed.has-background-controls .button-overlay .button {
12315
- --control-button-size: 40px;
12329
+ --si-embed-control-button-size: 40px;
12316
12330
  opacity: 0.7;
12317
12331
  transition: opacity 0.2s ease;
12318
12332
  }
@@ -12378,7 +12392,19 @@ video-embed video {
12378
12392
  width: 100%;
12379
12393
  height: 100%;
12380
12394
  border: none;
12381
- object-fit: var(--video-object-fit);
12395
+ object-fit: var(--si-embed-video-object-fit);
12396
+ }
12397
+ video-embed video::-webkit-media-controls {
12398
+ display: none !important;
12399
+ }
12400
+ video-embed video::-webkit-media-controls-enclosure {
12401
+ display: none !important;
12402
+ }
12403
+ video-embed[controls] video::-webkit-media-controls {
12404
+ display: flex !important;
12405
+ }
12406
+ video-embed[controls] video::-webkit-media-controls-enclosure {
12407
+ display: flex !important;
12382
12408
  }
12383
12409
  video-embed .video-poster {
12384
12410
  background-size: cover;