Product Page - Embedded video not resizing on 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.

I'm using the Superstore theme.

The embedded video source is:  <iframe width="560" height="315" src="https://www.youtube.com/embed/yqx-EUO5tSM?si=3efFSJJF2D77mqP_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>.

The product page is:  https://deckandden.com/products/rockwell-10-person-poker-table?_pos=1&_sid=18b888364&_ss=r

One of the codes I've tried(this is from Embedresponsively.com) is: <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/undefined' frameborder='0' allowfullscreen></iframe></div>

[Small_Task_Help]

Hi,

Hope this will help

- You should wrap your <iframe> inside a container controls its size ike a smart box.

Code example

<style>
  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
  }

  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/yqx-EUO5tSM?si=3efFSJJF2D77mqP_" 
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
          allowfullscreen>
  </iframe>
</div>

- Add this to your product page and test in mobile and desktop