embed: Make embedded media responsive

molgen · Mar 24, 2021 · 603a841 · 603a841
1 parent 230757a
commit 603a841
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/config/settings/base.py b/config/settings/base.py
@@ -229,6 +229,8 @@
 WAGTAILMODELTRANSLATION_TRANSLATE_SLUGS = False
 WAGTAILMODELTRANSLATION_LOCALE_PICKER_DEFAULT = ('de', 'en')
 
+WAGTAILEMBEDS_RESPONSIVE_HTML = True
+
 # WAGTAIL
 WAGTAIL_SITE_NAME = 'MPI CMS'
 # WAGTAIL_USER_EDIT_FORM = 'mpicms.users.forms.CustomUserEditForm'

diff --git a/mpicms/static/css/custom.css b/mpicms/static/css/custom.css
@@ -745,3 +745,19 @@ div.codehilite:not(:last-child) {
   list-style: none;
   margin: 0;
 }
+
+/* wagtail embed responsive objects */
+
+.responsive-object {
+    position: relative;
+}
+
+.responsive-object iframe,
+.responsive-object object,
+.responsive-object embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}