diff --git a/css/video/video.css b/css/video/video.css
index ea56aa0..beea06e 100644
--- a/css/video/video.css
+++ b/css/video/video.css
@@ -310,7 +310,7 @@ body {
 .ball-content {
     width: 98%;
     height: 95%;
-    margin: 2% 1% 0 1%;
+    margin: 1% 1% 0 1%;
     pointer-events: none;
     background-color: #000;
     object-fit: fill;
@@ -402,4 +402,21 @@ body {
     color: #fff !important;
 }
 
-/* dtree 样式 start */
\ No newline at end of file
+/* dtree 样式 start */
+
+.nocheckBtn {
+    background-color: #d2d2d2;
+    border: 1px solid #d2d2d2;
+}
+
+.checkBtn {
+    border: 1px solid #2eccbd;
+    background-color: #2eccbd !important;
+}
+.toggle-btn button {
+    width: 40px;
+    height: 30px;
+    cursor: pointer;
+    color: #000;
+    font-size: 15px;
+}
\ No newline at end of file
diff --git a/js/pages/video/videoAjax.js b/js/pages/video/videoAjax.js
index 8e0a2de..a274a77 100644
--- a/js/pages/video/videoAjax.js
+++ b/js/pages/video/videoAjax.js
@@ -64,7 +64,12 @@ function loadVideoTree() {
     }
 }
 
-function oneVideo(){
+function oneVideo(that){
+    $('.toggle-btn button').each(function (index, item) {
+        $(this).removeClass();
+        $(this).addClass('nocheckBtn')
+    })
+    $(that).addClass('checkBtn');
     for (let i = 2; i < 5; i++) {
         document.getElementById("windowbox" + i).style.cssText = "width: 48.5%;height: 48.8%;";
         document.getElementById("videoPlayer"+i).style.cssText = "width: 100%;height: 100%;";
@@ -73,7 +78,7 @@ function oneVideo(){
         document.getElementById("windowbox" + i).style.display = "none";
     }
     document.getElementById("windowbox" + 1).style.cssText = "width: 100%;height: 100%;";
-    document.getElementById("videoPlayer"+1).style.cssText = "width: 100%;height: 100%;";
+    document.getElementById("videoPlayer"+1).style.cssText = "width: 98%;height: 95%;";
     nowDmoScree=1;
     while (playList.length > nowDmoScree) {
         console.log(playList[0].windBox)
@@ -90,7 +95,12 @@ function oneVideo(){
     }
 
 }
-function fourVideo(){
+function fourVideo(that){
+    $('.toggle-btn button').each(function (index, item) {
+        $(this).removeClass();
+        $(this).addClass('nocheckBtn')
+    })
+    $(that).addClass('checkBtn');
     for (let i = 1; i < 5; i++) {
         document.getElementById("windowbox" + i).style.cssText = "width: 48.5%;height: 48.8%;";
         document.getElementById("videoPlayer"+i).style.cssText = "width: 100%;height: 100%;";
diff --git a/pages/video/video.html b/pages/video/video.html
index ed1714d..2cdc04b 100644
--- a/pages/video/video.html
+++ b/pages/video/video.html
@@ -111,11 +111,11 @@
         <div id="center-box">
             <div id="video-box">
                 <div id="balla" class="split split-horizontal">
-                    <div style="margin-left: 50%">
-                        <button onclick="oneVideo()">1</button>
-                        <button onclick="fourVideo()">4</button>
+                    <div style="margin-left: 46%;margin-top: 3%;" class="toggle-btn">
+                        <button onclick="oneVideo(this)" class="checkBtn">1</button>
+                        <button onclick="fourVideo(this)" class="nocheckBtn">4</button>
                     </div>
-                    <div class="layout" style="width: 100%;height: 100%;flex-wrap: wrap;">
+                    <div class="layout" style="width: 100%;height: 93%;flex-wrap: wrap;">
                         <div id="windowbox1" class="ballsplit " ondblclick="ballScreenBig('1')"
                             style="width: 100%;height: 100%; position: relative;z-index: 9999999999;pointer-events:auto;">
                             <video id="videoPlayer1" class="ball-content" autoplay="autoplay" loop="loop" muted