BekarHaus

Hi Squarespacers,
I found some solutions to customize gradient on SQSP native video player.
Hope you'll find it useful 😀
/* Hide controls gradient on native video player */
.video-player .plyr .plyr__controls:before {
  background-image: none;
}
/* Hide controls on native video player */
.video-player .plyr .plyr__controls {
  display: none;
}
/* Change symbol and background color of Play/Pause button */
.video-player .plyr--video .plyr__control--overlaid {
  color:rgba(255,255,255,0.35) !important;
  background: #00B0A3 !important }
/* Customize video player gradient */
.video-player .plyr .plyr__controls::before
{
    height: 25% !important;
    background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.9) 50%,rgba(0,176,163,.85)) !important;
  }
/* Tablet and desktop break */
@media only screen and (min-width: 641px){.video-player .plyr .plyr__controls::before {
    height: 8% !important;
    background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.95) 50%,rgba(0,176,163,.9)) !important;
  }}
"height" is for (obviously) height of the gradient, and with "background-image" you can control color/transparency of gradient.
Be cautious when using "height" property because it could cover different area on desktop/mobile. I break it for Tablet & Desktop - @media only screen and (min-width: 641px) { INSERT CODE HERE } — as you can see in screenshots bellow (there isn't black line around larger video) .
/* Hide video caption */
.video-caption
{display: none !important}
Best Regards
Duško Bekar

If you want something interactive this might be a fun option:
https://www.will-myers.com/products/p/webpage-mockup-display
Your simplest option may be just to create a GIF in photoshop that achieves this, but this is likely to be a little heavy, but will certainly work.

Add this to Design > Custom CSS
.header-menu-nav-folder[data-folder="root"]>div:first-child { display: flex; flex-direction: column-reverse; }  

If you use Notepad or Notepadd++ you can copy all CSS code & paste there > then save it as Cascading Style Sheets file (.css)
Suppose you name it: tlc-design.css
Then you upload this Css file to Squarespace site, follow this
https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files
then add this code to Code Injection > Header
<link rel="stylesheet" href="/s/tlc-design.css"/>  

Hi Squarespacers,
I found some solutions to customize gradient on SQSP native video player.
Hope you'll find it useful 😀
/* Hide controls gradient on native video player */
.video-player .plyr .plyr__controls:before {
  background-image: none;
}
/* Hide controls on native video player */
.video-player .plyr .plyr__controls {
  display: none;
}
/* Change symbol and background color of Play/Pause button */
.video-player .plyr--video .plyr__control--overlaid {
  color:rgba(255,255,255,0.35) !important;
  background: #00B0A3 !important }
/* Customize video player gradient */
.video-player .plyr .plyr__controls::before
{
    height: 25% !important;
    background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.9) 50%,rgba(0,176,163,.85)) !important;
  }
/* Tablet and desktop break */
@media only screen and (min-width: 641px){.video-player .plyr .plyr__controls::before {
    height: 8% !important;
    background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.95) 50%,rgba(0,176,163,.9)) !important;
  }}
"height" is for (obviously) height of the gradient, and with "background-image" you can control color/transparency of gradient.
Be cautious when using "height" property because it could cover different area on desktop/mobile. I break it for Tablet & Desktop - @media only screen and (min-width: 641px) { INSERT CODE HERE } — as you can see in screenshots bellow (there isn't black line around larger video) .
/* Hide video caption */
.video-caption
{display: none !important}
Best Regards
Duško Bekar

There isn't a built-in feature to do this, but a number of workarounds may be possible. Each will have different advantages and disadvantages that would need to be considered. Also, custom code will likely be necessary to make it user-friendly. 
Here are some ideas:
1. Create a separate product for each color, so you'll have 4 products for the 4 colors of the bodysuit. This will meet your requirement for four products on the Product List Page (shop-swim).
Then, add a faux color selector on the Product Detail Page so that the user can switch between the different products (the white, black, orange and purple versions). The color selector will need to be custom coded for this site, as it will actually switch between product detail pages, not variants.
OR
2. Create one product for the base product, such as the bodysuit. Add a variant for each color (and a variant for each size in each color). This will give you a Product Detail Page that meets your needs. The default variant dropdowns will allow customers to select the required color and size.
Then, create a faux Product List Page with thumbnails for each of the product colors. You can create this page using a hidden collection (Gallery, Blog or Store page) that feeds a Summary Block on the page. When a customer clicks on the 'black bodysuit' they'll be sent to the 'bodysuit' Product Detail Page. Some code could preselect the correct color from the variant dropdown when they arrive on the page.
I hope this helps to get you started.