width x height fixed

src/lib/RemoteFeed.vue

@@ -1,7 +1,8 @@
 <template>
-    <div class="vid_main" @mouseleave="showaction = false"    @mouseover="showaction = true">
+    <v-card max-height="150" height="150" dark
-        <video ref="feed_video" width="100%" height="100%" autoplay playsinline/>
+            class="vid_main" @mouseleave="showaction = false"   @mouseover="showaction = true">
-        <div class="info">{{ bitrate }}</div>
+        <video ref="feed_video" class="vid_container" autoplay playsinline/>
+        <div class="infor">{{ bitrate }}</div>
         <div class="infoSlow">Slow Connection</div>
         <div class="infoName">{{ remoteStream.display }}</div>
         <div class="actions" v-show="showaction">
@@ -12,7 +13,7 @@
                     dark
             ></v-slider>
         </div>
-    </div>
+    </v-card>
 </template>
 
 <script>
@@ -155,6 +156,10 @@
     .vid_main {
         position: relative;
     }
+    .vid_container {
+        width: 100%;
+        height: 100%;
+    }
     .infoSlow {
         position: absolute;
         right: 0;
@@ -162,15 +167,17 @@
         color:#fff;
         display:none
     }
-    .info {
+    .infor {
         position: absolute;
         right: 0;
         top:0;
+        font-size: 10px;
+        text-shadow: 1px 1px #000;
     }
     .infoName {
         position: absolute;
         left: 5px;
-        top:5px;
+        top:10px;
         color:#fff;
         font-size: 10px;
         text-shadow: 1px 1px #000;

src/lib/VueJanus.vue

@@ -86,15 +86,15 @@
             </v-card>
         </v-dialog>
         <v-row>
-            <v-col cols="12" md="3">
+            <v-col cols="12" md="2">
                     <video ref="ownstream" class="rounded centered" id="myvideo" width="100%" height="100%" autoplay
                            playsinline muted="muted"/>
             </v-col>
-            <v-col cols="12" md="3" style="display: none">
+            <v-col cols="12" md="2" style="display: none">
                 <video ref="ownstreamscreen" class="rounded centered" id="myvideo2" width="100%" height="100%" autoplay
                        playsinline muted="muted"/>
             </v-col>
-            <v-col cols="12" md="3" v-for="remoteStream in remoteStreams" :key="remoteStream.id">
+            <v-col cols="12" md="2" v-for="remoteStream in remoteStreams" :key="remoteStream.id">
                     <RemoteFeed :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :remote-stream="remoteStream" :janusInit="janusInit" :room="room" ></RemoteFeed>
             </v-col>
         </v-row>