Why do my product page videos look like this?? Help

Store Design
1

My product page videos show up so weird - how can I fix this while keeping the other images the same aspect?

Screen Shot 2025-02-19 at 1.41.04 PM.png
Screen Shot 2025-02-19 at 1.41.04 PM.png1218Ă—806 113 KB

2

Hi @mayatranquila

Ahmad31_0-1739994077687.png
Ahmad31_0-1739994077687.png1193Ă—700 209 KB

Go theme.css and paste this css:

.swiper-slide[data-media-type="video"] .media video {
    width: 100%;
    height: 100%;
    max-height: 100vh !important; /* Prevents overflow */
    object-fit: contain !important; /* Ensures full visibility */
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}
1 Like
3

it worked! thank you so much!

4

My Pleasure

5

It also need adjustment in mobile view

6

If your theme settings don’t offer the control you need, you might need to add some custom CSS to your theme. This is a bit more technical, but it involves adding code that specifically targets your product page videos and sets their aspect ratio. Here’s an example:

.product-single__media { /* Or whatever class targets your videos */
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio - adjust as needed */
  height: 0;
  overflow: hidden;
}

.product-single__media iframe,
.product-single__media video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This code snippet assumes a 16:9 aspect ratio. You can adjust the padding-bottom value to match your video’s aspect ratio. Remember, this is just an example, and you might need to adjust the selectors (.product-single__media) to match your theme’s HTML structure. There are lots of resources online that can help you with this, just search for “CSS maintain aspect ratio video”.

EasyEdits: A Simpler Solution

For a visual, no-code solution, check out EasyEdits (https://apps.shopify.com/easy-edits). It lets you easily adjust video display and other product page elements. It’s free to try and keep your edits!

7

It looks like the announcement bar on your mobile view has uneven padding or margin, creating more space below the text than above. Here are a couple of ways to address this:

1. Inspect Element and Adjust CSS:

  • Right-click on the announcement bar in your browser’s mobile view and select “Inspect” or “Inspect Element.” This will open the developer tools, highlighting the HTML and CSS for that element.
  • Look for the CSS rules that apply to the announcement bar (it might have a class like .announcement-bar, .top-bar, or something similar).
  • Adjust the padding and/or margin values in the CSS. For example, if you see padding: 10px 20px;, you can try changing it to padding: 15px; to make the padding equal on all sides. You can also use padding-top and padding-bottom to control the vertical padding separately.
  • Important: These changes in the developer tools are just for testing. To make them permanent, you’ll need to add the corrected CSS to your theme’s CSS file. (Usually found under “Assets” in your theme code editor).

2. Theme Settings (If Available):

  • Some themes have settings to adjust the padding or spacing of announcement bars. Check your theme editor (usually under “Online Store” → “Customize”) to see if there are any relevant options.

For a visual, no-code way to adjust the spacing and styling of your announcement bar (and other elements), you can try EasyEdits (https://apps.shopify.com/easy-edits). It provides a simple interface to customize your store’s design, including mobile views. It’s free to try and keep your edits!