Dynamsoft
diff --git a/‎2.ui-tweaking/1.read-video-show-result.html‎
Lines changed: 18 additions & 15 deletions b/‎2.ui-tweaking/1.read-video-show-result.html‎
Lines changed: 18 additions & 15 deletions
diff --git a/‎2.ui-tweaking/2.read-video-no-extra-control.html‎
Lines changed: 11 additions & 12 deletions b/‎2.ui-tweaking/2.read-video-no-extra-control.html‎
Lines changed: 11 additions & 12 deletions
@@ -4,16 +4,15 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <meta name="description"
-        content="Read barcode from a video input. This sample demonstrates the default built-in UI.">
+    <meta name="description" content="Read barcode from a video input. This sample demonstrates the default built-in UI.">
     <meta name="keywords" content="read barcode from video, built-in ui">
     <title>Dynamsoft Barcode Reader Sample - Video Decoding with Default UI</title>
 </head>
 
 <body>
-    <h1 style="font-size: 1.5em;">Use the Default Built-in UI</h1>
-    <div id="UIElement">
-        <button id="showScanner">Show The Scanner</button>
+    <h1>Use the Default Built-in UI</h1>
+    <div id="UIElement" class="UIElement">
+        <button id="showScanner" class="showScanner">Show The Scanner</button>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
     <script>
@@ -61,12 +60,6 @@ <h1 style="font-size: 1.5em;">Use the Default Built-in UI</h1>
         padding: 0;
     }
 
-    button#showScanner {
-        position: absolute;
-        width: 50%;
-        left: 25%;
-    }
-
     body {
         display: flex;
         flex-direction: column;
@@ -78,17 +71,27 @@ <h1 style="font-size: 1.5em;">Use the Default Built-in UI</h1>
         color: #455A64;
     }
 
+    h1 {
+        font-size: 1.5em;
+    }
+
     button {
-        font-size: 1.5rem;
         margin-bottom: 2vh;
+        font-size: 1.5rem;
     }
 
-    #UIElement {
+    .UIElement {
+        height: 60vh;
+        width: 80vw;
         margin: 2vmin auto;
         text-align: center;
         font-size: medium;
-        height: 60vh;
-        width: 60vw;
+    }
+
+    .showScanner {
+        position: absolute;
+        width: 50%;
+        left: 25%;
     }
 </style>
 
 
@@ -10,10 +10,10 @@
 </head>
 
 <body>
-    <h1 style="font-size: 1.5em;">Hide UI Controllers</h1>
-    <div id="UIElement">
-        <div id="div-video-container" style="width:100%;height:100%;">
-            <video class="dce-video" playsinline="true" muted style="width:100%;height:100%;"></video>
+    <h1>Hide UI Controllers</h1>
+    <div id="UIElement" class="UIElement">
+        <div id="div-video-container" class="div-video-container">
+            <video class="dce-video" playsinline="true" muted></video>
         </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
@@ -34,7 +34,6 @@ <h1 style="font-size: 1.5em;">Hide UI Controllers</h1>
 
         // scanner for decoding video
         let pScanner = null;
-
         // decode video from camera
         (async () => {
             try {
@@ -67,20 +66,20 @@ <h1 style="font-size: 1.5em;">Hide UI Controllers</h1>
         color: #455A64;
     }
 
-    button {
-        font-size: 1.5rem;
-        margin-bottom: 2vh;
+    h1 {
+        font-size: 1.5em;
     }
 
-    #UIElement {
+    .UIElement {
+        height: 60vh;
+        width: 80vw;
         margin: 2vmin auto;
         text-align: center;
         font-size: medium;
-        height: 40vh;
-        width: 100vw;
     }
 
-    .div-video-container {
+    .div-video-container,
+    .dce-video {
         width: 100%;
         height: 100%;
     }