Merge pull request #1333 from crazyserver/MOBILE-2408

MOBILE-2408 formattext: Add video responsive classes

src/app/app.scss

@@ -681,3 +681,61 @@ canvas[core-chart] {
 .ion-page {
   background-color: $background-color;
 }
+
+// Embed video responsive classes.
+// Taken from https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_embed.scss
+.embed-responsive {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    content: "";
+  }
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  iframe iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.embed-responsive-21by9 {
+  &::before {
+    padding-top: percentage(9 / 21);
+  }
+}
+
+.embed-responsive-16by9 {
+  &::before {
+    padding-top: percentage(9 / 16);
+  }
+}
+
+.embed-responsive-4by3 {
+  &::before {
+    padding-top: percentage(3 / 4);
+  }
+}
+
+.embed-responsive-1by1 {
+  &::before {
+    padding-top: percentage(1 / 1);
+  }
+}

src/directives/format-text.ts

@@ -470,6 +470,16 @@ export class CoreFormatTextDirective implements OnChanges {
                 if (!iframe.height) {
                     iframe.height = height;
                 }
+
+                // Do the iframe responsive.
+                if (iframe.parentElement.classList.contains('embed-responsive')) {
+                    iframe.addEventListener('load', () => {
+                        const css = document.createElement('style');
+                        css.setAttribute('type', 'text/css');
+                        css.innerHTML = 'iframe {width: 100%;height: 100%;}';
+                        iframe.contentDocument.head.appendChild(css);
+                    });
+                }
             }
         }
     }