diff --git a/Gemfile.lock b/Gemfile.lock
index a37df97..c1d9826 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -4,8 +4,6 @@ PATH
     decidim-iframe (0.27.0)
       decidim-admin (= 0.27.5)
       decidim-core (= 0.27.5)
-      deface (>= 1.5)
-      sassc (~> 2.3)
 
 GEM
   remote: https://rubygems.org/
@@ -155,7 +153,7 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
-    css_parser (1.16.0)
+    css_parser (1.17.1)
       addressable
     date (3.3.4)
     date_validator (0.12.0)
@@ -334,12 +332,6 @@ GEM
     declarative-builder (0.1.0)
       declarative-option (< 0.2.0)
     declarative-option (0.1.0)
-    deface (1.9.0)
-      actionview (>= 5.2)
-      nokogiri (>= 1.6)
-      polyglot
-      railties (>= 5.2)
-      rainbow (>= 2.1.0)
     descendants_tracker (0.0.4)
       thread_safe (~> 0.3, >= 0.3.1)
     devise (4.9.3)
@@ -450,7 +442,7 @@ GEM
       ruby-vips (>= 2.0.17, < 3)
     invisible_captcha (0.13.0)
       rails (>= 3.2.0)
-    json (2.7.1)
+    json (2.7.2)
     jwt (2.8.1)
       base64
     kaminari (1.2.2)
@@ -576,7 +568,6 @@ GEM
     pg_search (2.3.6)
       activerecord (>= 5.2)
       activesupport (>= 5.2)
-    polyglot (0.3.5)
     premailer (1.23.0)
       addressable
       css_parser (>= 1.12.0)
@@ -636,7 +627,7 @@ GEM
       rake (>= 12.2)
       thor (~> 1.0)
     rainbow (3.1.1)
-    rake (13.2.0)
+    rake (13.2.1)
     ransack (2.4.2)
       activerecord (>= 5.2.4)
       activesupport (>= 5.2.4)
@@ -716,8 +707,6 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sassc (2.4.0)
-      ffi (~> 1.9)
     selenium-webdriver (4.1.0)
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
diff --git a/app/controllers/decidim/iframe/iframe_controller.rb b/app/controllers/decidim/iframe/iframe_controller.rb
index 3cc5a3e..35a83b8 100644
--- a/app/controllers/decidim/iframe/iframe_controller.rb
+++ b/app/controllers/decidim/iframe/iframe_controller.rb
@@ -3,7 +3,7 @@
 module Decidim
   module Iframe
     class IframeController < Iframe::BlankComponentController
-      helper_method :iframe, :remove_margins?, :viewport_width?, :resize_iframe
+      helper_method :iframe, :remove_margins?, :viewport_width?, :content_height
 
       private
 
@@ -14,13 +14,19 @@ def iframe
       end
 
       def element
-        case resize_iframe
-        when "responsive"
-          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{attributes.width}\"
+        case content_height
+        when "16:9"
+          "<iframe id=\"iFrame\" class=\"aspect-ratio-16-9\" src=\"#{attributes.src}\" width=\"#{content_width}\"
           frameborder=\"#{attributes.frameborder}\"></iframe>"
-        when "manual"
-          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{attributes.width}\"
-          height=\"#{attributes.height}px\"frameborder=\"#{attributes.frameborder}\"></iframe>"
+        when "4:3"
+          "<iframe id=\"iFrame\" class=\"aspect-ratio-4-3\" src=\"#{attributes.src}\" width=\"#{content_width}\"
+          frameborder=\"#{attributes.frameborder}\"></iframe>"
+        when "auto"
+          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{content_width}\"
+          frameborder=\"#{attributes.frameborder}\"></iframe>"
+        when "manual_pixel"
+          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{content_width}\"
+          height=\"#{attributes.height_value}px\"frameborder=\"#{attributes.frameborder}\"></iframe>"
         end
       end
 
@@ -28,13 +34,24 @@ def attributes
         @attributes ||= current_component.settings
       end
 
-      def resize_iframe
-        attributes.resize_iframe
+      def content_height
+        attributes.content_height
+      end
+
+      def content_width
+        case attributes.content_width
+        when "full_width"
+          "100%"
+        when "manual_pixel"
+          "#{attributes.width_value}px"
+        when "manual_percentage"
+          "#{attributes.width_value}%"
+        end
       end
 
       def sanitize(html)
         sanitizer = Rails::Html::SafeListSanitizer.new
-        sanitizer.sanitize(html, tags: %w(iframe), attributes: %w(src id width height frameborder))
+        sanitizer.sanitize(html, tags: %w(iframe), attributes: %w(src id width height frameborder class))
       end
 
       def remove_margins?
diff --git a/app/packs/src/decidim/admin/content_height_toggler.js b/app/packs/src/decidim/admin/content_height_toggler.js
new file mode 100644
index 0000000..b882f6d
--- /dev/null
+++ b/app/packs/src/decidim/admin/content_height_toggler.js
@@ -0,0 +1,35 @@
+$(() => {
+  const $contentHeightLabel = $("label[for='component_settings_content_height']")
+  const $contentHeightSelect = $("#component_settings_content_height")
+  const $heightContainer = $(".height_value_container")
+  const $heightInput = $("#component_settings_height_value")
+  const $heightHelp = $(".content_height_container .help-text")
+
+  const toggleHeightValueContainerVisibility = function() {
+    if ($contentHeightSelect.val() === "manual_pixel") {
+      $heightContainer.show();
+    } else {
+      $heightInput.val("");
+      $heightContainer.hide();
+    }
+  };
+
+  const toggleHeightHelpVisibility = function() {
+    if ($contentHeightSelect.val() === "auto") {
+      $heightHelp.show();
+    } else {
+      $heightHelp.hide();
+    }
+  };
+
+  $heightContainer.detach().appendTo($contentHeightLabel)
+
+  toggleHeightValueContainerVisibility()
+  toggleHeightHelpVisibility()
+
+
+  $contentHeightSelect.on("change", () => {
+    toggleHeightValueContainerVisibility()
+    toggleHeightHelpVisibility()
+  })
+})
diff --git a/app/packs/src/decidim/admin/content_width_toggler.js b/app/packs/src/decidim/admin/content_width_toggler.js
new file mode 100644
index 0000000..d112f6b
--- /dev/null
+++ b/app/packs/src/decidim/admin/content_width_toggler.js
@@ -0,0 +1,24 @@
+$(() => {
+  const $contentWidthLabel = $("label[for='component_settings_content_width']")
+  const $contentWidthSelect = $("#component_settings_content_width")
+  const $widthContainer = $(".width_value_container")
+  const $widthInput = $("#component_settings_width_value")
+
+  const toggleWidthValueContainerVisibility = function() {
+    if ($contentWidthSelect.val() === "manual_pixel" || $contentWidthSelect.val() === "manual_percentage") {
+      $widthContainer.show();
+    } else {
+      $widthInput.val("");
+      $widthContainer.hide();
+    }
+  };
+
+  $widthContainer.detach().appendTo($contentWidthLabel)
+
+  toggleWidthValueContainerVisibility()
+
+
+  $contentWidthSelect.on("change", () => {
+    toggleWidthValueContainerVisibility()
+  })
+})
diff --git a/app/packs/src/decidim/admin/form.js b/app/packs/src/decidim/admin/form.js
index 2a705f3..541db15 100644
--- a/app/packs/src/decidim/admin/form.js
+++ b/app/packs/src/decidim/admin/form.js
@@ -1,8 +1,9 @@
 import "src/decidim/admin/scope_picker_enabler.component"
 import "src/decidim/admin/proposal_infinite_edit"
-import "src/decidim/admin/iframe_resize_toggler"
+import "src/decidim/admin/content_height_toggler"
+import "src/decidim/admin/content_width_toggler"
 
-// Overwrite core form.js file to import iframe_resize_toggler
+// Overwrite core form.js file to import content_width_toggler, content_height_toggler
 
 import BudgetRuleTogglerComponent from "src/decidim/admin/budget_rule_toggler.component"
 
diff --git a/app/packs/src/decidim/admin/iframe_resize_toggler.js b/app/packs/src/decidim/admin/iframe_resize_toggler.js
deleted file mode 100644
index d99ab31..0000000
--- a/app/packs/src/decidim/admin/iframe_resize_toggler.js
+++ /dev/null
@@ -1,24 +0,0 @@
-$(() => {
-  const $resizeIframeLabel = $("label[for='component_settings_resize_iframe']")
-  const $iFrameSelect = $("#component_settings_resize_iframe")
-  const $heightContainer = $(".height_container")
-  const $heightInput = $("#component_settings_height")
-
-  const toggleHeightContainerVisibility = function() {
-    if ($iFrameSelect.val() === "responsive") {
-      $heightInput.val("");
-      $heightContainer.hide();
-    } else if ($iFrameSelect.val() === "manual") {
-      $heightContainer.show();
-    }
-  };
-
-  $heightContainer.detach().appendTo($resizeIframeLabel)
-
-  toggleHeightContainerVisibility()
-
-
-  $iFrameSelect.on("change", () => {
-    toggleHeightContainerVisibility()
-  })
-})
diff --git a/app/views/decidim/iframe/iframe/show.html.erb b/app/views/decidim/iframe/iframe/show.html.erb
index f899766..9f1c6f4 100644
--- a/app/views/decidim/iframe/iframe/show.html.erb
+++ b/app/views/decidim/iframe/iframe/show.html.erb
@@ -11,6 +11,6 @@
   <%= iframe %>
 </div>
 
-<% if resize_iframe == "responsive" %>
+<% if content_height == "auto" %>
   <%= javascript_pack_tag("decidim_iframe") %>
 <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index f0fcbc0..2489dc2 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -10,9 +10,24 @@ en:
         settings:
           global:
             announcement: Announcement
+            content_height: Content height
+            content_height_help: In order to use the automatic height calculation,
+              your iframe provider has to support the iframe-resizer JavaScript library.
+              Please confirm from your iframe provider that they support this library
+              before using the automatic height option. Read more about how to support
+              this library from the iframe-resizer documentation.
+            content_height_options:
+              '16:9': '16:9'
+              '4:3': '4:3'
+              auto: Automatic height
+              manual_pixel: Manual height in pixels
+            content_width: Content width
+            content_width_options:
+              full_width: Full width
+              manual_percentage: Manual width as a percentage
+              manual_pixel: Manual width in pixels
             frameborder: Content frameborder
-            height: Content height
-            height_help: Height of the Iframe element in pixels.
+            height_value: Height value
             no_margins: No margins
             resize_iframe: Resize Iframe
             resize_iframe_options:
@@ -22,5 +37,4 @@ en:
             src_help: Insert the path for the source content that will be displayed
               in the Iframe.
             viewport_width: Limit maximum width to the application viewport
-            width: Content width
-            width_help: Ensure to use 100% as width to fill the screen.
+            width_value: Width value
diff --git a/config/locales/fi.yml b/config/locales/fi.yml
index 527309e..f2b918d 100644
--- a/config/locales/fi.yml
+++ b/config/locales/fi.yml
@@ -10,9 +10,23 @@ fi:
         settings:
           global:
             announcement: Ilmoitus
+            content_width: Sisällön leveys
+            content_width_options:
+              full_width: Täysi leveys
+              manual_pixel: Leveys pikseleissä
+              manual_percentage: Leveys prosenteissa
+            content_height: Sisällön korkeus
+            content_height_help: Käyttääksesi automaattista korkeuden säätelyä, tarvitsee iframe -tarjoajasi tukea
+                                 iframe-resizer Javascript -kirjastoa. Varmista iframe -tarjoajaltasi tämän kirjaston
+                                 tukeminen ennen automaattisen korkeuden säädön käyttöä. Katso iframe-resizer
+                                 dokumentaatio lukeaksesi lisää tämän kirjaston tukemisesta.
+            content_height_options:
+              "16:9": "16:9"
+              "4:3": "4:3"
+              auto: Automaattinen korkeus
+              manual_pixel: Korkeus pikseleissä
             frameborder: Sisällön kehys
-            height: Sisällön korkeus
-            height_help: 'Iframe -elementin korkeus.'
+            height_value: Korkeusarvo
             no_margins: Ei reunoja
             resize_iframe: Iframe -elementin koko
             resize_iframe_options:
@@ -21,5 +35,4 @@ fi:
             src: Sisällön lähde
             src_help: 'Syötä Iframe -elementin sisällön lähteen polku.'
             viewport_width: Rajaa maksimi-leveys sovelluksen ikkunaan
-            width: Sisällön leveys
-            width_help: 'Käytä 100% leveyttä täyttääksesi näytön.'
+            width_value: Leveysarvo
diff --git a/config/locales/sv.yml b/config/locales/sv.yml
index 929cc13..0947440 100644
--- a/config/locales/sv.yml
+++ b/config/locales/sv.yml
@@ -10,9 +10,23 @@ sv:
         settings:
           global:
             announcement: Meddelande
+            content_width: Content width
+            content_width_options:
+              full_width: Full width
+              manual_pixel: Manual width in pixels
+              manual_percentage: Manual width as a percentage
+            content_height: Content height
+            content_height_help: In order to use the automatic height calculation, your iframe provider has to support
+              the iframe-resizer JavaScript library. Please confirm from your iframe provider that they support this
+              library before using the automatic height option. Read more about how to support this library from the
+              iframe-resizer documentation.
+            content_height_options:
+              "16:9": "16:9"
+              "4:3": "4:3"
+              auto: Automatic height
+              manual_pixel: Manual height in pixels
             frameborder: Content frameborder
-            height: Content height
-            height_help: Height of the Iframe element in pixels, e.g. "250px".
+            height_value: Height value
             no_margins: No margins
             resize_iframe: Resize Iframe
             resize_iframe_options:
@@ -22,5 +36,4 @@ sv:
             src_help: Insert the path for the source content that will be displayed
               in the Iframe.
             viewport_width: Limit maximum width to the application viewport
-            width: Content width
-            width_help: Ensure to use 100% as width to fill the screen.
+            width_value: Width value
diff --git a/decidim-iframe.gemspec b/decidim-iframe.gemspec
index 7945ad2..5721591 100644
--- a/decidim-iframe.gemspec
+++ b/decidim-iframe.gemspec
@@ -20,8 +20,6 @@ Gem::Specification.new do |s|
 
   s.add_dependency "decidim-admin", Decidim::Iframe.decidim_version
   s.add_dependency "decidim-core", Decidim::Iframe.decidim_version
-  s.add_dependency "deface", ">= 1.5"
-  s.add_dependency "sassc", "~> 2.3" # TODO: check if this can be removed
 
   s.add_development_dependency "decidim-dev", Decidim::Iframe.decidim_version
   s.metadata["rubygems_mfa_required"] = "true"
diff --git a/lib/decidim/iframe/component.rb b/lib/decidim/iframe/component.rb
index d2f8e5c..197510a 100644
--- a/lib/decidim/iframe/component.rb
+++ b/lib/decidim/iframe/component.rb
@@ -7,19 +7,21 @@
   component.admin_engine = Decidim::Iframe::AdminEngine
   component.icon = "media/images/decidim_meetings.svg" # TODO: create a Icon
 
-  RESIZE_OPTIONS = %w(responsive manual).freeze
+  HEIGHT_OPTIONS = %w(16:9 4:3 auto manual_pixel).freeze
+  WIDTH_OPTIONS = %w(full_width manual_pixel manual_percentage).freeze
 
   component.settings(:global) do |settings|
     # Add your global settings
     # Available types: :integer, :boolean
     settings.attribute :announcement, type: :text, translated: true, editor: true
     settings.attribute :src, type: :string, default: ""
-    settings.attribute :width, type: :string, default: "100%"
+    settings.attribute :content_width, type: :select, default: "full_width", choices: -> { WIDTH_OPTIONS }
+    settings.attribute :width_value, type: :integer
+    settings.attribute :content_height, type: :select, default: "16:9", choices: -> { HEIGHT_OPTIONS }
+    settings.attribute :height_value, type: :integer
     settings.attribute :frameborder, type: :boolean, default: false
     settings.attribute :viewport_width, type: :boolean, default: true
     settings.attribute :no_margins, type: :boolean, default: false
-    settings.attribute :resize_iframe, type: :select, default: "responsive", choices: -> { RESIZE_OPTIONS }
-    settings.attribute :height, type: :integer, default: 0
   end
 
   # component.register_stat :some_stat do |context, start_at, end_at|
@@ -41,7 +43,6 @@
       settings: {
         announcement: { en: Faker::Lorem.paragraphs(number: 2).join("\n") },
         src: "",
-        width: "100%",
         frameborder: "0",
         resize_iframe: "responsive",
         height: ""
diff --git a/lib/decidim/iframe/engine.rb b/lib/decidim/iframe/engine.rb
index 2a9490e..375aa1d 100644
--- a/lib/decidim/iframe/engine.rb
+++ b/lib/decidim/iframe/engine.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require "rails"
-require "deface"
 require "decidim/core"
 
 module Decidim