From 06b5a424d77154cd6f81c2016e5a8db6373f0348 Mon Sep 17 00:00:00 2001
From: Gareth Barnard <1058419+gjb2048@users.noreply.github.com>
Date: Sun, 25 Nov 2018 15:32:45 +0000
Subject: [PATCH] NEW: Issue #883: embed-responsive bootstrap class not
 supported?

---
 CHANGES.txt                            |  3 +-
 less/bootstrap-override/bs4_embed.less | 53 ++++++++++++++++++++++++++
 less/essential.less                    |  1 +
 style/essential.css                    | 36 +++++++++++++++++
 4 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 less/bootstrap-override/bs4_embed.less

diff --git a/CHANGES.txt b/CHANGES.txt
index 3c875ca0..74bcfe43 100644
--- a/CHANGES.txt
+++ b/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
 ==============
diff --git a/less/bootstrap-override/bs4_embed.less b/less/bootstrap-override/bs4_embed.less
new file mode 100644
index 00000000..fb01bc56
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/less/essential.less b/less/essential.less
index aa2036b7..b487126f 100644
--- a/less/essential.less
+++ b/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";
 
diff --git a/style/essential.css b/style/essential.css
index 4eb16ed9..302dd8b0 100644
--- a/style/essential.css
+++ b/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;
 }