Fix video embed size in why page (#161)

* give why.html iframe embeds natural width & height

* added title attr to iframes for accNames

* updated webpack config OptimizeCSSAssetsPlugin options:

- disable calc optimization to prevent mangling of css custom properties inside calc()

* formatted webpack config

Author: clhenrick

app/src/hbs_templates/why.hbs

@@ -81,7 +81,11 @@
     <div class="video" style="--aspect-ratio: 16/9;">
       <iframe
         src="https://www.youtube.com/embed/uvZWZy9uZqA"
+        {{!-- TODO: add translation for title attribute --}}
+        title="Video: How Did We Get Here?"
         frameborder="0"
+        width="960"
+        height="540"
         loading="lazy"
         allowfullscreen
       >
@@ -92,7 +96,11 @@
     <div class="video" style="--aspect-ratio: 16/9;">
       <iframe
         src="https://www.youtube.com/embed/9MB-BhoUXg4"
+        {{!-- TODO: add translation for title attribute --}}
+        title="Video: What's Vacancy Decontrol"
         frameborder="0"
+        width="960"
+        height="540"
         loading="lazy"
         allowfullscreen
       >
@@ -103,7 +111,11 @@
     <div class="video" style="--aspect-ratio: 16/9;">
       <iframe
         src="https://www.youtube.com/embed/Yn8tj-8-TeE"
+        {{!-- TODO: add translation for title attribute --}}
+        title="Video: Tenant's project, The Bronx"
         frameborder="0"
+        width="960"
+        height="540"
         loading="lazy"
         allowfullscreen
       >
@@ -114,7 +126,11 @@
     <div class="video" style="--aspect-ratio: 16/9;">
       <iframe
         src="https://www.youtube.com/embed/6oSbEpdL968"
+        {{!-- TODO: add translation for title attribute --}}
+        title="Video: Tenant's project, Bushwick"
         frameborder="0"
+        width="960"
+        height="540"
         loading="lazy"
         allowfullscreen
       >
@@ -125,7 +141,11 @@
     <div class="video" style="--aspect-ratio: 16/9;">
       <iframe
         src="https://www.youtube.com/embed/TtZmANXveXg"
+        {{!-- TODO: add translation for title attribute --}}
+        title="Video: Tenant's project, Chinatown"
         frameborder="0"
+        width="960"
+        height="540"
         loading="lazy"
         allowfullscreen
       >
@@ -166,4 +186,4 @@
       {{not_rs.p2.three}}
     </p>
   </main>
-</div>
+</div>

app/webpack.config.js

@@ -8,7 +8,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const TerserJSPlugin = require("terser-webpack-plugin");
 const StylelintPlugin = require("stylelint-webpack-plugin");
-const ESLintPlugin = require('eslint-webpack-plugin');
+const ESLintPlugin = require("eslint-webpack-plugin");
 
 // `module.exports` is NodeJS's way of exporting code from a file,
 // so that it can be made available in other files. It's what
@@ -139,7 +139,7 @@ module.exports = (env, argv) => {
               options: {
                 cacheDirectory: true,
               },
-            }
+            },
           ],
         },
 
@@ -191,7 +191,13 @@ module.exports = (env, argv) => {
           extractComments: true,
           sourceMap: true,
         }),
-        new OptimizeCSSAssetsPlugin({}),
+        new OptimizeCSSAssetsPlugin({
+          cssProcessorPluginOptions: {
+            // disable calc optimization as it incorrectly removes parenthesis around css custom properties
+            // this happens in _embed.scss with `calc(100% / (var(--aspect-ratio)))`
+            preset: ["default", { calc: false }],
+          },
+        }),
       ],
 
       // how webpack should split our code compiled into separate files for production
@@ -291,12 +297,10 @@ module.exports = (env, argv) => {
       // want in production, such as logging
       new webpack.DefinePlugin({
         "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV),
-        "process.env.USE_REDUX_LOGGER": JSON.stringify(
-          env.USE_REDUX_LOGGER
-        ),
+        "process.env.USE_REDUX_LOGGER": JSON.stringify(env.USE_REDUX_LOGGER),
         "process.env.USE_PRELOADED_STATE": JSON.stringify(
           env.USE_PRELOADED_STATE
-        )
+        ),
       }),
     ],
   };