diff --git a/src/html/index.html b/src/html/index.html
index f3a898783..3166bc2d4 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -43,12 +43,19 @@ <h4 class="card-title">Player Config</h4>
             </div>
 
             <div class="form-group form-check row">
-              <label for="config-ads" class="col-sm-4 form-check-label" for="config-ads">Ads</label>
+              <label for="config-ads" class="col-sm-4 form-check-label">Ads</label>
               <div class="col-sm-4 form-check">
                   <input type="checkbox" id="config-ads">
               </div>
               <span class="col-sm-4 form-text">Schedule client-side ads.</span>
             </div>
+
+            <div class="form-group form-check row">
+                <label for="display-portrait" class="col-sm-4 form-check-label">Simulate portrait phone layout</label>
+                <div class="col-sm-4 form-check">
+                    <input type="checkbox" id="display-portrait">
+                </div>
+            </div>
         </div>
 
         <div class="card-block">
@@ -595,7 +602,7 @@ <h4 class="card-title">
       .animate({ height: initialHeight }, 1000);
     },
     'Show Buffering overlay': function() {
-      var player = uiManager.currentUi.playerWrapper.getPlayer();
+      const player = uiManager.currentUi.playerWrapper.getPlayer();
 
       player.fireEventInUI(bitmovin.player.PlayerEvent.StallStarted, {});
     }
@@ -693,33 +700,54 @@ <h4 class="card-title">
   }, 'video.');
 
   // Collect all UI factory methods which are basically the different built-in skins and skin types
-  var uiFactoryMethods = [];
-  for (var member in bitmovin.playerui.UIFactory) {
-    if (typeof bitmovin.playerui.UIFactory[member] == 'function' && member.indexOf('build') === 0) {
-      uiFactoryMethods.push(member);
+  const configUISelect = $('#config-ui');
+  const collectUIMethods = function(clazz, filter, label) {
+    const convertToOption = function(value) {
+      return $('<option></option>').attr('value', value).text(value);
     }
-  }
 
-  var configUISelect = $('#config-ui');
+    let demoGroup = $(`<optgroup label="${label}" />`);
 
-  // Collect all UI Demos
-  var uiDemos = [];
-  for (var member in bitmovin.playerui.DemoFactory) {
-    if (typeof bitmovin.playerui.DemoFactory[member] === 'function' && member.indexOf('buildDemo') === 0) {
-      uiDemos.push(member);
-    }
+    Object.keys(clazz)
+      .filter((member) => {
+        return typeof clazz[member] === 'function';
+      })
+      .filter(filter)
+      .map(convertToOption)
+      .forEach((o) => {
+        demoGroup.append(o);
+      });
+
+    demoGroup.appendTo(configUISelect);
   }
 
-  // Fill the UI factory method select box
-  $.each(uiFactoryMethods, function(key, value) {
-    configUISelect.append($('<option></option>').attr('value', value).text(value));
-  });
-  // put all demos in own select-opt-group
-  let demoGroup = $('<optgroup label="Demos" />');
-  $.each(uiDemos, function(key, value) {
-    $('<option></option>').attr('value', value).text(value).appendTo(demoGroup);
+  const uiFactoryData = [
+    {
+      className: bitmovin.playerui.UIFactory,
+      filter: (member) => {
+        return member.indexOf('buildModern') === 0;
+      },
+      label: 'Default UIs',
+    },
+    {
+      className: bitmovin.playerui.UIFactory,
+      filter: (member) => {
+        return member.indexOf('buildSuperModern') === 0;
+      },
+      label: 'More modern UIs',
+    },
+    {
+      className: bitmovin.playerui.DemoFactory,
+      filter: (member) => {
+        return member.indexOf('buildDemo') === 0;
+      },
+      label: 'Demos',
+    },
+  ];
+
+  uiFactoryData.forEach((data) => {
+    collectUIMethods(data.className, data.filter, data.label);
   });
-  demoGroup.appendTo(configUISelect);
 
   // Refresh UI when a factory is selected
   configUISelect.change(function() {
@@ -749,6 +777,20 @@ <h4 class="card-title">
     storeConfigInStorage();
   });
 
+  var displayPortraitCheckbox = $('#display-portrait');
+  displayPortraitCheckbox.change(function() {
+    const isChecked = $(this).is(':checked');
+
+    const playerWrapperContainer = $('.player-wrapper');
+    if (isChecked) {
+      playerWrapperContainer.addClass('portrait');
+    } else {
+      playerWrapperContainer.removeClass('portrait');
+    }
+
+    storeConfigInStorage();
+  });
+
   function scheduleAds() {
     adBreaks.forEach(function(adBreak) {
       player.ads.schedule(adBreak);
@@ -763,6 +805,7 @@ <h4 class="card-title">
       adsEnabled: $('#config-ads').is(':checked'),
       source: $('#config-source').val(),
       uiOption: $('#config-ui').val(),
+      portraitEnabled: $('#display-portrait').is(':checked'),
     };
 
     try {
@@ -800,6 +843,10 @@ <h4 class="card-title">
     if ($('#config-ads') && config.adsEnabled !== undefined) {
       $('#config-ads').prop('checked', config.adsEnabled);
     }
+    if ($('#display-portrait') && config.portraitEnabled !== undefined) {
+      $('#display-portrait').prop('checked', config.portraitEnabled);
+      $('#display-portrait').trigger('change');
+    }
   })();
 </script>
 </body>
diff --git a/src/scss/demo.scss b/src/scss/demo.scss
index 74e5c9c49..9a5d1f2c6 100644
--- a/src/scss/demo.scss
+++ b/src/scss/demo.scss
@@ -6,3 +6,11 @@ body {
 #player {
   position: relative;
 }
+
+.player-wrapper {
+  &.portrait {
+    aspect-ratio: 9 / 16;
+    margin: auto;
+    width: 300px;
+  }
+}