diff --git a/config/schema/video_embed_field.schema.yml b/config/schema/video_embed_field.schema.yml
index 6f95764..56dde2d 100644
--- a/config/schema/video_embed_field.schema.yml
+++ b/config/schema/video_embed_field.schema.yml
@@ -20,10 +20,10 @@ field.formatter.settings.video_embed_field_video:
       type: boolean
       label: 'Responsive'
     width:
-      type: string
+      type: integer
       label: 'Width'
     height:
-      type: string
+      type: integer
       label: 'Height'
 
 field.formatter.settings.video_embed_field_colorbox:
@@ -37,10 +37,10 @@ field.formatter.settings.video_embed_field_colorbox:
       type: boolean
       label: 'Responsive'
     width:
-      type: string
+      type: integer
       label: 'Width'
     height:
-      type: string
+      type: integer
       label: 'Height'
     image_style:
       type: string
diff --git a/src/Plugin/Field/FieldFormatter/Video.php b/src/Plugin/Field/FieldFormatter/Video.php
index 595d602..0eb7c0b 100644
--- a/src/Plugin/Field/FieldFormatter/Video.php
+++ b/src/Plugin/Field/FieldFormatter/Video.php
@@ -104,7 +104,8 @@ class Video extends FormatterBase implements ContainerFactoryPluginInterface {
     ];
     $elements['width'] = [
       '#title' => t('Width'),
-      '#type' => 'textfield',
+      '#type' => 'number',
+      '#field_suffix' => 'px',
       '#default_value' => $this->getSetting('width'),
       '#required' => TRUE,
       '#size' => 20,
@@ -112,7 +113,8 @@ class Video extends FormatterBase implements ContainerFactoryPluginInterface {
     ];
     $elements['height'] = [
       '#title' => t('Height'),
-      '#type' => 'textfield',
+      '#type' => 'number',
+      '#field_suffix' => 'px',
       '#default_value' => $this->getSetting('height'),
       '#required' => TRUE,
       '#size' => 20,
diff --git a/tests/src/Kernel/FieldOutputTest.php b/tests/src/Kernel/FieldOutputTest.php
index 65af9fb..7b7305d 100644
--- a/tests/src/Kernel/FieldOutputTest.php
+++ b/tests/src/Kernel/FieldOutputTest.php
@@ -36,8 +36,8 @@ class FieldOutputTest extends KernelTestBase {
         [
           'type' => 'video_embed_field_video',
           'settings' => [
-            'width' => '100%',
-            'height' => '100%',
+            'width' => 100,
+            'height' => 100,
             'autoplay' => TRUE,
             'responsive' => FALSE,
           ],
@@ -52,8 +52,8 @@ class FieldOutputTest extends KernelTestBase {
             'rel' => '0',
           ],
           '#attributes' => [
-            'width' => '100%',
-            'height' => '100%',
+            'width' => '100',
+            'height' => '100',
             'frameborder' => '0',
             'allowfullscreen' => 'allowfullscreen',
           ],
@@ -69,8 +69,8 @@ class FieldOutputTest extends KernelTestBase {
         [
           'type' => 'video_embed_field_video',
           'settings' => [
-            'width' => '100%',
-            'height' => '100%',
+            'width' => 100,
+            'height' => 100,
             'autoplay' => TRUE,
             'responsive' => FALSE,
           ],
@@ -85,8 +85,8 @@ class FieldOutputTest extends KernelTestBase {
             'rel' => '0',
           ],
           '#attributes' => [
-            'width' => '100%',
-            'height' => '100%',
+            'width' => '100',
+            'height' => '100',
             'frameborder' => '0',
             'allowfullscreen' => 'allowfullscreen',
           ],
@@ -113,8 +113,8 @@ class FieldOutputTest extends KernelTestBase {
         [
           'type' => 'video_embed_field_video',
           'settings' => [
-            'width' => '100%',
-            'height' => '100%',
+            'width' => 100,
+            'height' => 100,
             'autoplay' => TRUE,
             'responsive' => FALSE,
           ],
@@ -127,8 +127,8 @@ class FieldOutputTest extends KernelTestBase {
             'autoplay' => '1',
           ],
           '#attributes' => [
-            'width' => '100%',
-            'height' => '100%',
+            'width' => '100',
+            'height' => '100',
             'frameborder' => '0',
             'allowfullscreen' => 'allowfullscreen',
           ],
@@ -239,8 +239,8 @@ class FieldOutputTest extends KernelTestBase {
         [
           'type' => 'video_embed_field_video',
           'settings' => [
-            'width' => '100px',
-            'height' => '100px',
+            'width' => 100,
+            'height' => 100,
             'autoplay' => TRUE,
             'responsive' => TRUE,
           ],
@@ -261,8 +261,8 @@ class FieldOutputTest extends KernelTestBase {
               'autoplay' => '1',
             ],
             '#attributes' => [
-              'width' => '100px',
-              'height' => '100px',
+              'width' => '100',
+              'height' => '100',
               'frameborder' => '0',
               'allowfullscreen' => 'allowfullscreen',
             ],
@@ -279,8 +279,8 @@ class FieldOutputTest extends KernelTestBase {
         [
           'type' => 'video_embed_field_video',
           'settings' => [
-            'width' => '100%',
-            'height' => '100%',
+            'width' => 100,
+            'height' => 100,
             'autoplay' => TRUE,
             'responsive' => FALSE,
           ],
@@ -293,8 +293,8 @@ class FieldOutputTest extends KernelTestBase {
             'list' => 'PLpeDXSh4nHjQCIZmkxg3VSdpR5e87X5eB',
           ],
           '#attributes' => [
-            'width' => '100%',
-            'height' => '100%',
+            'width' => '100',
+            'height' => '100',
             'frameborder' => '0',
             'allowfullscreen' => 'allowfullscreen',
           ],