fix(storefront): BCTHEME-1755 Videos added through the Product Editor…

… have their thumbnails cropped compared to videos added through the page builder (#2413)

Co-authored-by: “bc-yevhenii-buliuk” <“yevhenii.buliuk@bigcommerce.com”>

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replace Twitter logo with X logo within social sharing and social link components [#2387](https://github.com/bigcommerce/cornerstone/pull/2387)
 - Added nvm config [#2389](https://github.com/bigcommerce/cornerstone/pull/2389)
 - Displaying the Hidden cart_order_source Input Field on PDP page [#2392](https://github.com/bigcommerce/cornerstone/pull/2392)
+- Videos added through the Product Editor have their thumbnails cropped compared to videos added through the page builder [#2413](https://github.com/bigcommerce/cornerstone/pull/2413)
 - Update Shop By Price Widget [#2408](https://github.com/bigcommerce/cornerstone/pull/2408)
 - 'Please Select a file' popup forces shopper to re-upload file if the option type is 'File Upload' and is set to required [#2409](https://github.com/bigcommerce/cornerstone/pull/2409)
 - Top Global Region Image Widget overlaps the mobile menu [#2402](https://github.com/bigcommerce/cornerstone/pull/2402)

assets/scss/components/stencil/videoGallery/_videoGallery.scss

@@ -1,10 +1,17 @@
 // =============================================================================
 // VIDEO GALLERY
 // =============================================================================
+//
+// 1. Set padding-top to zero to overwrite the padding-top contained in the
+// flex-video-container mixin, which affects the height of the video container
+// and distorts the video scale.
+//
+// -----------------------------------------------------------------------------
 
 .videoGallery-main {
     @include flex-video-container();
     margin-bottom: $videoGallery-spacing;
+    padding-top: 0; // 1
 }
 
 .videoGallery-list {

templates/components/products/videos.html

@@ -12,7 +12,7 @@ <h4 class="toggle-title">
     </h4>
 
     <div class="toggle-content is-open" id="videoGallery-content">
-        <div class="videoGallery-main">
+        <div class="videoGallery-main widescreen">
             <iframe
                 id="player"
                 class="lazyload"