plugin

lms-plugins/mediacms-moodle/tiny/mediacms/amd/src/iframeembed.js

@@ -294,7 +294,15 @@ export default class IframeEmbed {
         const maxWidthMatch = style.match(/max-width:\s*(\d+(?:\.\d+)?)px/);
         const aspectRatioMatch = style.match(/aspect-ratio:\s*(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)/);
 
-        const maxWidth = maxWidthMatch ? parseInt(maxWidthMatch[1]) : 560;
+        // Fall back to wrapper's max-width for content saved with the new template
+        // where max-width lives on the wrapper div rather than the iframe style.
+        let maxWidth = maxWidthMatch ? parseInt(maxWidthMatch[1]) : null;
+        if (!maxWidth) {
+            const wrapper = this.selectedIframe.closest('.tiny-mediacms-iframe-wrapper');
+            const wrapperStyle = wrapper ? (wrapper.getAttribute('style') || '') : '';
+            const wrapperMatch = wrapperStyle.match(/max-width:\s*(\d+(?:\.\d+)?)px/);
+            maxWidth = wrapperMatch ? parseInt(wrapperMatch[1]) : 560;
+        }
         let height = 315;
 
         if (aspectRatioMatch) {

lms-plugins/mediacms-moodle/tiny/mediacms/templates/iframe_embed_output.mustache

@@ -28,4 +28,4 @@
         "aspectRatioClass": "ratio-16-9"
     }
 }}
-<div class="tiny-mediacms-iframe-wrapper" style="margin:0;padding:0;"><iframe src="{{src}}" width="{{maxWidth}}" height="{{height}}" style="width:100%;max-width:{{maxWidth}}px;height:auto;aspect-ratio:{{aspectRatioCSS}};display:block;margin:0 auto;border:0;" frameborder="0" allowfullscreen></iframe></div>
+<div class="tiny-mediacms-iframe-wrapper" style="max-width:{{maxWidth}}px;width:100%;margin:0 auto;padding:0;"><iframe src="{{src}}" width="{{maxWidth}}" height="{{height}}" style="width:100%;max-width:{{maxWidth}}px;height:auto;aspect-ratio:{{aspectRatioCSS}};display:block;margin:0 auto;border:0;" frameborder="0" allowfullscreen></iframe></div>