Add custom props for video width and height.

Part of GoogleChrome#28
jakearchibald · Jul 25, 2022 · 8aa5d6d · 8aa5d6d
1 parent c122e4d
commit 8aa5d6d
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/shortcodes/Video.js b/shortcodes/Video.js
@@ -95,6 +95,15 @@ const Video = function (bucket, domain) {
       ${poster ? `poster="${imgix(domain)(poster)}"` : ''}
       ${preload ? `preload="${preload}"` : ''}
       ${width ? `width="${width}"` : ''}
+      ${
+        // This allows the video dimensions to be used in
+        // an aspect-ratio CSS rule.
+        // This needs to be done manually because the solution standards folks
+        // spec'd doesn't work for <video>.
+        width !== undefined && height !== undefined
+          ? `style="--vid-width: ${width}; --vid-height: ${height}"`
+          : ''
+      }
     >
       ${src.map(s => generateSource(bucket, s))}
     </video>`;