diff --git a/packages/cli/test/functional/test_site_templates/test_default/expected/index.html b/packages/cli/test/functional/test_site_templates/test_default/expected/index.html
index d0b8ea937a..5caa1576a7 100644
--- a/packages/cli/test/functional/test_site_templates/test_default/expected/index.html
+++ b/packages/cli/test/functional/test_site_templates/test_default/expected/index.html
@@ -150,7 +150,7 @@ <h2 id="sub-heading-1-1"><span id="sub-heading-1-1" class="anchor"></span>Sub He
         </div>
         <h2 id="sub-heading-1-2"><span id="sub-heading-1-2" class="anchor"></span>Sub Heading 1.2<a class="fa fa-anchor" href="#sub-heading-1-2" onclick="event.stopPropagation()"></a></h2>
         <p><strong>Media embeds:</strong></p>
-        <div class="block-embed block-embed-service-youtube"><iframe type="text/html" src="//www.youtube.com/embed/v40b3ExbM0c" frameborder="0" width="640" height="390" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
+        <div class="block-embed block-embed-service-youtube" style="position: relative; padding-bottom: 60.9375%"><iframe type="text/html" src="//www.youtube.com/embed/v40b3ExbM0c" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
         <p><strong>Tabs:</strong></p>
         <tabs>
           <tab><template #header>Tab X</template>
diff --git a/packages/cli/test/functional/test_site_templates/test_default/expected/index.page-vue-render.js b/packages/cli/test/functional/test_site_templates/test_default/expected/index.page-vue-render.js
index 5b6b09dd51..3d75e7b335 100644
--- a/packages/cli/test/functional/test_site_templates/test_default/expected/index.page-vue-render.js
+++ b/packages/cli/test/functional/test_site_templates/test_default/expected/index.page-vue-render.js
@@ -47,7 +47,7 @@ with(this){return _c('h2',{attrs:{"id":"sub-heading-1-2"}},[_c('span',{staticCla
 with(this){return _c('p',[_c('strong',[_v("Media embeds:")])])}
 },function anonymous(
 ) {
-with(this){return _c('div',{staticClass:"block-embed block-embed-service-youtube"},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","width":"640","height":"390","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])}
+with(this){return _c('div',{staticClass:"block-embed block-embed-service-youtube",staticStyle:{"position":"relative","padding-bottom":"60.9375%"}},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])}
 },function anonymous(
 ) {
 with(this){return _c('p',[_c('strong',[_v("Tabs:")])])}
diff --git a/packages/core-web/src/styles/markbind.css b/packages/core-web/src/styles/markbind.css
index ab8a3a7897..c809990646 100644
--- a/packages/core-web/src/styles/markbind.css
+++ b/packages/core-web/src/styles/markbind.css
@@ -337,3 +337,17 @@ h5,
 h6 {
     margin-bottom: 1rem;
 }
+
+.block-embed {
+    overflow-x: auto;
+    position: relative;
+    width: 100%;
+}
+
+.block-embed iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/PowerPointOnlineService.js b/packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/PowerPointOnlineService.js
index bc5c020dc9..1f7280adf5 100644
--- a/packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/PowerPointOnlineService.js
+++ b/packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/PowerPointOnlineService.js
@@ -5,7 +5,7 @@ const VideoServiceBase = require("./VideoServiceBase");
 class PowerPointOnlineService extends VideoServiceBase {
 
   getDefaultOptions() {
-    return {width: 610, height: 481};
+    return { width: 610, height: 481, ignoreStyle: true };
   }
 
   extractVideoID(reference) {
diff --git a/packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/VideoServiceBase.js b/packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/VideoServiceBase.js
index 6defdceeb8..488c1d39f8 100644
--- a/packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/VideoServiceBase.js
+++ b/packages/core/src/lib/markdown-it/plugins/markdown-it-block-embed/services/VideoServiceBase.js
@@ -39,19 +39,27 @@ class VideoServiceBase {
 
   getEmbedCode(videoID) {
     let containerClassNames = [];
-    if (this.env.options.containerClassName) {
+    if (this.env.options.containerClassName && this.options.ignoreStyle !== true) {
       containerClassNames.push(this.env.options.containerClassName);
     }
 
     let escapedServiceName = this.env.md.utils.escapeHtml(this.name);
     containerClassNames.push(this.env.options.serviceClassPrefix + escapedServiceName);
 
+    let containerStyles = [];
+    if (this.options.ignoreStyle !== true) {
+      containerStyles.push(["position: relative;"]);
+      if (this.options.height !== undefined && this.options.width !== undefined) {
+        containerStyles.push(`padding-bottom: ${this.options.height / this.options.width * 100}%`);
+      }
+    }
+
     let iframeAttributeList = [];
     iframeAttributeList.push([ "type", "text/html" ]);
     iframeAttributeList.push([ "src", this.getFilteredVideoUrl(videoID) ]);
     iframeAttributeList.push([ "frameborder", 0 ]);
 
-    if (this.env.options.outputPlayerSize === true) {
+    if (this.env.options.outputPlayerSize === true && this.options.ignoreStyle === true) {
       if (this.options.width !== undefined && this.options.width !== null) {
         iframeAttributeList.push([ "width", this.options.width ]);
       }
@@ -74,7 +82,7 @@ class VideoServiceBase {
       )
       .join(" ");
 
-    return `<div class="${containerClassNames.join(" ")}">`
+    return `<div class="${containerClassNames.join(" ")}" style="${containerStyles.join(" ")}">`
            + `<iframe ${iframeAttributes}></iframe>`
          + `</div>\n`;
   }