Product page - Embedded video not resizing right between mobile and desktop

[jason_dandd]

Hi,

I'm trying to embed a Youtube video onto a product page and it would show full screen on desktop, but then on mobile it would stretch out too far to the side.  I've tried various codes(mainly through Chatgpt) but none of them are working.  When I can get the video to show the right size on desktop, it stretches too far to the right on mobile(have to zoom out to see the whole video, and when I make it show the right size on mobile then on desktop it just looks like a vertical line.

I'm using the Superstore theme.

[Moeed]

Hey @jason_dandd 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[jason_dandd]

Hi Moeed,

My URL is: I've the same code for multiple products, but let's use this example:

https://deckandden.com/products/rockwell-10-person-poker-table?_pos=1&_sid=96933d7de&_ss=r

[Moeed]

Hey @jason_dandd 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
main#site-main {
    overflow-x: hidden !important;
}
}
</style>

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[jason_dandd]

Hello Moeed,

This did not work.

[tim · Accepted solution]

You can fix it with CSS. The only assumption here is that video is embedded in a paragraph which does not have anything else.

Then you can use CSS code like this:

.easytabs-content-holder p:has(iframe) {
  position: relative;
  padding-top: 56%; /* change to match your video proportions */
}

.easytabs-content-holder p:has(iframe) iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

This code can be added to the "Custom CSS" of this section, or "Custom CSS" under "Theme settings" when you're configuring your theme in "Customize"

  

[jason_dandd]

Thanks!  This worked!

[jason_dandd]

Hi Tim,

I'm not sure what happened, but can you take a look at my store again?  I have not changed the code you provided, nor anything else video / embedded information related, but once again, my videos do not resize for mobile.

[tim]

This video is no longer "inside" easytabs and original selectors target video inside easytabs.

I think you can safely change the code suggested to this -- see the difference in selectors:

 p:has(iframe) {
  position: relative;
  padding-top: 56%; /* change to match your video proportions */
}

p:has(iframe) iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[jason_dandd]

Oh yeah.  This fixed it!

Thank you kindly!

[sgtlab]

Hi @jason_dandd 

Here's a code snippet that lets you preview changes before applying them to your store.

Click to view and apply: https://shop-booster.sgt-lab.com/snippet/ct7cbe-jj?snippetId=1745829613195

The result will be as follow: