From b17987dd53b2a3d7e22342ece70dfeab2478efaf Mon Sep 17 00:00:00 2001
From: Xiaofeng Wang <wasphin@gmail.com>
Date: Sun, 23 Jun 2024 23:23:49 +0800
Subject: [PATCH] set default aspect ratio of w:h to 16:9

---
 www/webrtc/index.html | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)
diff --git a/www/webrtc/index.html b/www/webrtc/index.html
index 3e80d869..e20906bb 100644
--- a/www/webrtc/index.html
+++ b/www/webrtc/index.html
@@ -3,17 +3,25 @@
   <head>
     <title>ZLM RTC demo</title>
     <script src="./ZLMRTCClient.js"></script>
+    <style>
+      video {
+        width: 40vw;
+        max-height: 50vh;
+        height: 22.5vw; /* 默认和宽:高为 16:9 */
+        object-fit: contain;
+        background-color: grey;
+      }
+    </style>
   </head>
     
   <body>
-
     <div style="text-align: center;">
         <div>
-          <video id='video' controls autoplay style="text-align:left;width:40%;">
+          <video id='video' controls autoplay>
             Your browser is too old which doesn't support HTML5 video.
           </video>
 
-          <video id='selfVideo' controls autoplay style="text-align:right;width:40%;">
+          <video id='selfVideo' controls autoplay>
             Your browser is too old which doesn't support HTML5 video.
           </video>
         </div>
