diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js
index 8dbb103355a0..c3c50688fc6a 100644
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@@ -153,7 +153,7 @@ function onSubmit(e) {
         DateCreated: getDateValue(form, '#txtDateAdded', 'DateCreated'),
         EndDate: getDateValue(form, '#txtEndDate', 'EndDate'),
         ProductionYear: form.querySelector('#txtProductionYear').value,
-        Height: form.querySelector('#txtHeight').value,
+        Height: form.querySelector('#selectHeight').value,
         AspectRatio: form.querySelector('#txtOriginalAspectRatio').value,
         Video3DFormat: form.querySelector('#select3dFormat').value,
 
@@ -835,7 +835,7 @@ function fillItemInfo(context, item, parentalRatingOptions) {
     const placeofBirth = item.ProductionLocations?.length ? item.ProductionLocations[0] : '';
     context.querySelector('#txtPlaceOfBirth').value = placeofBirth;
 
-    context.querySelector('#txtHeight').value = item.Height || '';
+    context.querySelector('#selectHeight').value = item.Height || '';
 
     context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || '';
 
diff --git a/src/components/metadataEditor/metadataEditor.template.html b/src/components/metadataEditor/metadataEditor.template.html
index f56acb73f1fa..7f7acd7e3d15 100644
--- a/src/components/metadataEditor/metadataEditor.template.html
+++ b/src/components/metadataEditor/metadataEditor.template.html
@@ -142,8 +142,15 @@ <h3 class="formDialogHeaderTitle">
                         <select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select>
                     </div>
                 </div>
-                <div id="fldHeight" class="inputContainer hide">
-                    <input is="emby-input" id="txtHeight" type="number" pattern="[0-9]*" label="${LabelHeight}" />
+                <div id="fldHeight" class="selectContainer hide">
+                    <select is="emby-select" id="selectHeight" label="${LabelHeight}">
+                        <option value="0"></option>
+                        <option>480</option>
+                        <option>576</option>
+                        <option>720</option>
+                        <option>1080</option>
+                        <option>2160</option>
+                    </select>
                     <div class="fieldDescription">${ChannelHeightHelp}</div>
                 </div>
                 <div class="inlineForm">