fix demo

templates/base.html

@@ -34,7 +34,7 @@
                   player.play()
               }, 
               search: '',
-              items: ['1001', '2001', '3001', '4001'],
+              items: ['1001', '2001'],
                 get filteredItems() {
                     return this.items.filter(
                         i => i.startsWith(this.search)

templates/index.html

@@ -7,19 +7,20 @@
         </div>
             <div class='row'>
                 <template x-for="item in filteredItems" :key="item">
-                    <div class='col-md-6 mb-2 text-center' x-if="item == '1001'">
-                    <img src="http://localhost:9099/video_feed/0/" width="100%">
-                          <br>
-                        <strong x-text='item'></strong>
+                    <div class='col-md-6 mb-2 text-center'>
+                        <template x-if="item == '1001'">
+                    <img src="http://localhost:9099/video_feed/0/" width="480">
+                          
+                        </template>
+                        <template x-if="item != '1001'">
+                           <video x-init="vdo($el)"  class="video-js vjs-default-skin m-auto" controls preload autoplay muted>
+                               <source src="./video/cctv.m3u8" type="application/x-mpegURL">
+                           </video>
+                        </template>
+                        <p>
+                        <strong x-text='item'></strong></p>
                         
                     </div>
-                    <div class='col-md-6 mb-2 text-center' x-if="item != '1001'">
-                       <video x-init="vdo($el)"  class="video-js vjs-default-skin" controls preload autoplay muted>
-                           <source src="./video/cctv.m3u8" type="application/x-mpegURL">
-                       </video>
-                        <br>
-                        <strong x-text='item'></strong>
-                    </div>
                 </template>
             </div>
     </div>