Hi @dbmcnicol;

Sorry to hear about the issue. May I get your exact page URL, where you have embedded this content? So I can take a closer look from there directly. And assist you accordingly.

Thank you!

Hi @dbmcnicol,

Thank you so much for sharing the page URL. I have checked and it seems somehow the theme CSS is overriding the default settings. No worries, I suggest you kindly use the following CSS code to resolve the issue properly.

/* === Desktop Default (full size) === */
.ep-embed-content-wraper .ose-embedpress-responsive {
  width: 800px !important;
  height: 600px !important;
  max-width: 100% !important;   /* keeps it from overflowing small screens */
  max-height: 600px !important;
}

.ep-embed-content-wraper .ose-embedpress-responsive img {
  width: 100% !important;       /* fills parent width */
  height: auto !important;      /* keeps aspect ratio */
  max-height: 600px !important;
  object-fit: cover;
}

/* === Tablet (≤ 1024px) === */
@media (max-width: 1024px) {
  .ep-embed-content-wraper .ose-embedpress-responsive {
    width: 100% !important;
    height: auto !important;
  }

  .ep-embed-content-wraper .ose-embedpress-responsive img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* === Mobile (≤ 768px) === */
@media (max-width: 768px) {
  .ep-embed-content-wraper .ose-embedpress-responsive {
    width: 100% !important;
    height: auto !important;
  }

  .ep-embed-content-wraper .ose-embedpress-responsive img {
    width: 100% !important;
    height: auto !important;
  }
}

You can simply add custom CSS by navigating to your WordPress Dashboard -> Appearance -> Customize.

After you are on the Customizer page, search for the “Additional CSS” option. You can then go ahead and insert CSS Code. Please check this screencast to learn more – https://d.pr/v/QrrfTw

I hope it helps. Kindly let me know how it works!

Best Regrads,
~Amit.