NEW: Issue #883: embed-responsive bootstrap class not supported?

CHANGES.txt

@@ -3,8 +3,9 @@ New in 3.5.1.2
 - FIX: Position of quiz correction icons.
 - FIX: Issue #876: Context menu in header near top right empty and showing for non-logged in users and students.
 - FIX: Issue #882: badgesmi setting missing in settings.php.
-- FIX: Issue #884: Removed important font size declarations from responsive.less.  Thanks to Mike Nodding for the patch.
 - NEW: H5P Custom CSS setting in 'Features' for the H5P module (https://moodle.org/plugins/mod_hvp) if installed.
+- NEW: Issue #883: embed-responsive bootstrap class not supported?
+- NEW: Issue #884: Removed important font size declarations from responsive.less.  Thanks to Mike Nodding for the patch.
 
 New in 3.5.1.1
 ==============

less/bootstrap-override/bs4_embed.less

@@ -0,0 +1,53 @@
+// Credit: Nicolas Gallagher and SUIT CSS.
+// From _embed.scss in BS 4.
+
+.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;
+  }
+}
+
+.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);
+  }
+}

less/essential.less

@@ -101,6 +101,7 @@ body {
 // Moodle less end.
 
 @import "bootstrap-override/variables";
+@import "bootstrap-override/bs4_embed";
 @import "bootstrap-override/carousel";
 @import "bootstrap-override/type";
 

style/essential.css

@@ -19801,6 +19801,42 @@ ul.indented-list {
 .w-25 {
   width: 25%;
 }
+.embed-responsive {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+}
+.embed-responsive::before {
+  display: block;
+  content: "";
+}
+.embed-responsive .embed-responsive-item,
+.embed-responsive iframe,
+.embed-responsive embed,
+.embed-responsive object,
+.embed-responsive video {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+.embed-responsive-21by9::before {
+  padding-top: 42.85714286%;
+}
+.embed-responsive-16by9::before {
+  padding-top: 56.25%;
+}
+.embed-responsive-4by3::before {
+  padding-top: 75%;
+}
+.embed-responsive-1by1::before {
+  padding-top: 100%;
+}
 .carousel-indicators {
   z-index: 2;
 }