diff --git a/docs/en/core/basic.md b/docs/en/core/basic.md
index 82aac878..c657146f 100644
--- a/docs/en/core/basic.md
+++ b/docs/en/core/basic.md
@@ -225,7 +225,7 @@ For more information about Pin assignment and Pin Remapping, Please refer to EPS
 
 **M5Stack Instroduce**
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Introducing%20M5Stack.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/en/core/fire.md b/docs/en/core/fire.md
index 34034c50..1bc13822 100644
--- a/docs/en/core/fire.md
+++ b/docs/en/core/fire.md
@@ -285,12 +285,12 @@ For more information about Pin assignment and Pin Remapping, Please refer to EPS
 
 **m5stack instroduce**
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Introducing%20M5Stack.mp4" type="video/mp4">
 </video>
 
 **m5stack Case - Piu UI framework with Moddable SDK**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/run-time-display-rotation.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/core/gray.md b/docs/en/core/gray.md
index 82cfbcc2..373acb8c 100644
--- a/docs/en/core/gray.md
+++ b/docs/en/core/gray.md
@@ -276,7 +276,7 @@ For more information about Pin assignment and Pin Remapping, Please refer to EPS
 
 **m5stack instroduce**
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Introducing%20M5Stack.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/en/core/m5go.md b/docs/en/core/m5go.md
index 9c05598c..7c1cf35e 100644
--- a/docs/en/core/m5go.md
+++ b/docs/en/core/m5go.md
@@ -270,6 +270,6 @@ For more information about Pin assignment and Pin Remapping, Please refer to EPS
 
 - **m5stack instroduce**
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Introducing%20M5Stack.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/core/m5go_lite.md b/docs/en/core/m5go_lite.md
index 3e8becc7..7a718866 100644
--- a/docs/en/core/m5go_lite.md
+++ b/docs/en/core/m5go_lite.md
@@ -313,6 +313,6 @@ float pressure = bme.readPressure();
 
 - **m5stack instroduce**
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Introducing%20M5Stack.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/core/m5stick.md b/docs/en/core/m5stick.md
index 1452dd86..109554e5 100644
--- a/docs/en/core/m5stick.md
+++ b/docs/en/core/m5stick.md
@@ -185,12 +185,12 @@ To complete schematic, click [here](https://github.com/m5stack/M5-Schematic/tree
 
 - **m5stick Case - Remote control air conditioner**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5Stick%20controll%20AC.mp4" type="video/mp4">
 </video>
 
 - **m5stick Case - .obj model viewer**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/Obj%20Model%20Viewer.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/core/m5stickc.md b/docs/en/core/m5stickc.md
index 04eeff8a..760cf4fc 100644
--- a/docs/en/core/m5stickc.md
+++ b/docs/en/core/m5stickc.md
@@ -180,12 +180,12 @@ Power structure block diagram
 
 - **M5StickC Case - counter**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/StickC%20Watch.mp4" type="video/mp4">
 </video>
 
 - **M5StickC Case - Safe system**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/Simple_Watch_Device.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/hat/hat-8servos.md b/docs/en/hat/hat-8servos.md
index b24b4b17..70e0c352 100755
--- a/docs/en/hat/hat-8servos.md
+++ b/docs/en/hat/hat-8servos.md
@@ -159,7 +159,7 @@
 
 ## Video
 
-<video width="70%" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/8Servos_hat.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/en/hat/hat-adc.md b/docs/en/hat/hat-adc.md
index 77b40108..fbf0c612 100644
--- a/docs/en/hat/hat-adc.md
+++ b/docs/en/hat/hat-adc.md
@@ -111,6 +111,6 @@ byte error;
 ## Video
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ADC-DAC-HAT.mp4" type="video/mp4" >
 </video>
diff --git a/docs/en/hat/hat-beetlec.md b/docs/en/hat/hat-beetlec.md
index 25f31efe..14a3cd49 100644
--- a/docs/en/hat/hat-beetlec.md
+++ b/docs/en/hat/hat-beetlec.md
@@ -85,10 +85,10 @@ Besides, a power switch is placed at the front.
 
 ## Video
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/BeetleC_01.mp4" type="video/mp4">
 </video>
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/BeetleC_02.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/hat/hat-bugc.md b/docs/en/hat/hat-bugc.md
index b0de6db1..0364e8a6 100644
--- a/docs/en/hat/hat-bugc.md
+++ b/docs/en/hat/hat-bugc.md
@@ -65,7 +65,7 @@ The Bugc base needs to be used in conjunction with the M5StickC controller. The
 
 ## Video
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/bugC.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/en/hat/hat-dac.md b/docs/en/hat/hat-dac.md
index 4a3df2d1..690147d8 100644
--- a/docs/en/hat/hat-dac.md
+++ b/docs/en/hat/hat-dac.md
@@ -106,7 +106,7 @@ void loop(void) {
 ## Video
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ADC-DAC-HAT.mp4" type="video/mp4" >
 </video>
 
diff --git a/docs/en/hat/hat-finger.md b/docs/en/hat/hat-finger.md
index b608f465..c8a12ec5 100644
--- a/docs/en/hat/hat-finger.md
+++ b/docs/en/hat/hat-finger.md
@@ -80,6 +80,6 @@ UART settings:
 ## Related Video
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/FINGER-HAT.mp4" type="video/mp4" >
 </video>
diff --git a/docs/en/hat/hat-joystick.md b/docs/en/hat/hat-joystick.md
index 1399e66f..205cdd27 100644
--- a/docs/en/hat/hat-joystick.md
+++ b/docs/en/hat/hat-joystick.md
@@ -105,6 +105,6 @@ Register:
 
 ## Video
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/Joystick_HAT.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/hat/hat-ncir.md b/docs/en/hat/hat-ncir.md
index 264ba1d7..41e6584e 100644
--- a/docs/en/hat/hat-ncir.md
+++ b/docs/en/hat/hat-ncir.md
@@ -78,7 +78,7 @@ Connect with M5StickC via GOIO 0/26 (I2C add: 0x5A).<br>
 ## Video
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/NCIR-HAT.mp4" type="video/mp4" >
 </video>
 
diff --git a/docs/en/hat/hat-neoflash.md b/docs/en/hat/hat-neoflash.md
index 9342601a..efc953d0 100644
--- a/docs/en/hat/hat-neoflash.md
+++ b/docs/en/hat/hat-neoflash.md
@@ -82,6 +82,6 @@ If you thinking about adding a display on your project, NeoFlash is a good choic
 
 ## Video
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/Neoflash_HAT.mp4" type="video/mp4">
 </video>
diff --git a/docs/en/hat/hat-proto-plus.md b/docs/en/hat/hat-proto-plus.md
index 733cdc0e..7bad8e4a 100644
--- a/docs/en/hat/hat-proto-plus.md
+++ b/docs/en/hat/hat-proto-plus.md
@@ -36,7 +36,7 @@
 
 **Demo**
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO_PLUS_HAT.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/en/hat/hat-proto.md b/docs/en/hat/hat-proto.md
index ef32fb1c..0f7bb5e7 100644
--- a/docs/en/hat/hat-proto.md
+++ b/docs/en/hat/hat-proto.md
@@ -50,7 +50,7 @@ For example, since m5stickc have less hardware resource than m5stack, we can mak
 
 **Demo**
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO-HAT.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/en/hat/hat-puppyc.md b/docs/en/hat/hat-puppyc.md
index 42a3e063..56aff8bc 100644
--- a/docs/en/hat/hat-puppyc.md
+++ b/docs/en/hat/hat-puppyc.md
@@ -63,7 +63,7 @@ To get complete code, please click [here](https://github.com/m5stack/M5-ProductE
 
 ## Videos
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/App/PuppyC/PuppyC.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/en/hat/hat-rs485.md b/docs/en/hat/hat-rs485.md
index 49f675d8..88ca453f 100644
--- a/docs/en/hat/hat-rs485.md
+++ b/docs/en/hat/hat-rs485.md
@@ -102,6 +102,6 @@ void loop() {
 ## Video
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/RS485_HAT.mp4" type="video/mp4" >
 </video>
diff --git a/docs/en/hat/hat-servo.md b/docs/en/hat/hat-servo.md
index b91a5319..e5372e33 100755
--- a/docs/en/hat/hat-servo.md
+++ b/docs/en/hat/hat-servo.md
@@ -59,6 +59,6 @@
 ## Related Video
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/SERVO-HAT.mp4" type="video/mp4" >
 </video>
diff --git a/docs/en/hat/hat-thermal.md b/docs/en/hat/hat-thermal.md
index 259f8734..c0684c9d 100644
--- a/docs/en/hat/hat-thermal.md
+++ b/docs/en/hat/hat-thermal.md
@@ -80,7 +80,7 @@ Connect with M5StickC via GOIO 0/26 (I2C add: 0x33).<br><br><br><br>
 ## Video
 **Demo**
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/THERMAL-HAT.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/en/hat/hat-tof.md b/docs/en/hat/hat-tof.md
index cdc0145a..fbc8637c 100644
--- a/docs/en/hat/hat-tof.md
+++ b/docs/en/hat/hat-tof.md
@@ -80,6 +80,6 @@ Communication Info: I2C, **0x29**, GPIO0/26.
 
 ## Video
 
-<video width="30%" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ToF_HAT.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/hat/hat-yun.md b/docs/en/hat/hat-yun.md
index 5f3a2acb..13d9f646 100644
--- a/docs/en/hat/hat-yun.md
+++ b/docs/en/hat/hat-yun.md
@@ -89,6 +89,6 @@ One hook hole and two 6*4mm magnet mounting positions are reserved on the board,
 ## Video
 **Demo** 
 
-<video width="60%" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/YUN-HAT.mp4" type="video/mp4" >
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/accel.md b/docs/en/unit/accel.md
index f902e106..ffe4784c 100644
--- a/docs/en/unit/accel.md
+++ b/docs/en/unit/accel.md
@@ -107,6 +107,6 @@ void loop() {
 
 ## Video
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/ACCEL.mp4" type="video/mp4">
 </video>
diff --git a/docs/en/unit/cardkb.md b/docs/en/unit/cardkb.md
index 0d5444d4..c38a6f57 100644
--- a/docs/en/unit/cardkb.md
+++ b/docs/en/unit/cardkb.md
@@ -130,6 +130,6 @@ void loop()
 
 - **CardKB Case - 01**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20Cardkb.mp4" type="video/mp4">
 </video>
diff --git a/docs/en/unit/catear.md b/docs/en/unit/catear.md
index 9dc5216e..138614ed 100644
--- a/docs/en/unit/catear.md
+++ b/docs/en/unit/catear.md
@@ -72,6 +72,6 @@ Arduino Library realted to RGB LED driving:
 
 **CatEAR**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stick%20CatEar.mp4" type="video/mp4">
 </video>
diff --git a/docs/en/unit/color.md b/docs/en/unit/color.md
index 338326fe..32a903ec 100644
--- a/docs/en/unit/color.md
+++ b/docs/en/unit/color.md
@@ -128,6 +128,6 @@ After burnt this example, PC serial terminal will print original value RGBC(red,
 
 **COLOR Case - 01**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201902/Color%20Unit.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/dual_button.md b/docs/en/unit/dual_button.md
index 029683dd..b2d8afe2 100644
--- a/docs/en/unit/dual_button.md
+++ b/docs/en/unit/dual_button.md
@@ -99,6 +99,6 @@ M5.update();
 
 **Joystick Case - Page flipping and selection of menu interface**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201811/M5Game-VARIOUS2.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/earth.md b/docs/en/unit/earth.md
index 0a232a23..fadd0a18 100644
--- a/docs/en/unit/earth.md
+++ b/docs/en/unit/earth.md
@@ -103,12 +103,12 @@ void loop() {
 
 **EARTH Tutorial - Monitor vase soil moisture 1**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/(M5stack%20x%20Arduino)%20Do%20plants%20have%20feelings.mp4" type="video/mp4">
 </video>
 
 **EARTH Case - Monitor vase soil moisture 2**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Earth%20Unit.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/esp32cam.md b/docs/en/unit/esp32cam.md
index 712fd043..65c2b223 100644
--- a/docs/en/unit/esp32cam.md
+++ b/docs/en/unit/esp32cam.md
@@ -183,12 +183,12 @@ The hardware also comes with some reserved weld pad, just in case you want put t
 
 **ESP32CAM Case - 01**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/esp32cam_webcam_01.mp4" type="video/mp4">
 </video>
 
 **M5Camera Case - 02**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/The%20M5Camera%20works.mp4" type="video/mp4">
 </video>
diff --git a/docs/en/unit/finger.md b/docs/en/unit/finger.md
index b40b89a1..79c039d2 100644
--- a/docs/en/unit/finger.md
+++ b/docs/en/unit/finger.md
@@ -129,12 +129,12 @@ res1 = fpm_deleteAllUser();
 - **FINGER Application**
 
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Fingerprint%20Unit.mp4" type="video/mp4">
 </video>
 
 - **FINGER UIflow Video Tutorial**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/Finger/E7%20-%20Finger%20Demo(UIFlow%20Tutorials%208).mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/joystick.md b/docs/en/unit/joystick.md
index ef809182..e72d45e3 100644
--- a/docs/en/unit/joystick.md
+++ b/docs/en/unit/joystick.md
@@ -118,12 +118,12 @@ if (Wire.available()) {
 
 **Joystick Case - controll wheelchair**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stack%20Joystick.mp4" type="video/mp4">
 </video>
 
 **Joystick Case - Page flipping and selection of menu interface**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Control%20M5%20With%20Joystick.mp4" type="video/mp4">
 </video>
diff --git a/docs/en/unit/laser-rx.md b/docs/en/unit/laser-rx.md
index 397260e1..4c932153 100644
--- a/docs/en/unit/laser-rx.md
+++ b/docs/en/unit/laser-rx.md
@@ -118,6 +118,6 @@ M5.update();
 ## Video
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/LASER-TX-RX.mp4" type="video/mp4" >
 </video>
diff --git a/docs/en/unit/laser-tx.md b/docs/en/unit/laser-tx.md
index b3921587..a4acba88 100644
--- a/docs/en/unit/laser-tx.md
+++ b/docs/en/unit/laser-tx.md
@@ -120,7 +120,7 @@ M5.update();
 ## Video
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/LASER-TX-RX.mp4" type="video/mp4" >
 </video>
 
diff --git a/docs/en/unit/light.md b/docs/en/unit/light.md
index 6c480ae3..1150c9b5 100644
--- a/docs/en/unit/light.md
+++ b/docs/en/unit/light.md
@@ -92,12 +92,12 @@ digitalRead_value = digitalRead(26);
 
 **LIGHT - Tutorial**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%20iot%20lighting%20part%202%20-%20light%20sensor%20control.mp4" type="video/mp4">
 </video>
 
 **LIGHT Application**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Light%20Units.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/m5camera.md b/docs/en/unit/m5camera.md
index 42b040f6..1fa26dd8 100644
--- a/docs/en/unit/m5camera.md
+++ b/docs/en/unit/m5camera.md
@@ -244,12 +244,12 @@ The hardware also comes with some reserved weld pad, just in case you want put t
 
 **M5Camera Case - Image transmission between M5Camera and M5Core**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Camera.mp4" type="video/mp4">
 </video>
 
 **M5Camera Case - Protective pudding**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/Protective-Pudding.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/neoflash.md b/docs/en/unit/neoflash.md
index 6a6c8615..d16dbe03 100644
--- a/docs/en/unit/neoflash.md
+++ b/docs/en/unit/neoflash.md
@@ -74,12 +74,12 @@ This is a example that takes real-time time from the network and displays it on
 
 **Neoflash Video Tutorial on UIFlow**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/NeoFlash/E1%20-%20Neoflash%20%E4%BE%8B%E7%A8%8B%EF%BC%88UIFlow%20Tutorials%202%EF%BC%89.mp4" type="video/mp4">
 </video>
 
 **Neoflash Case - Alarm Clock**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20NeoFlash.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/neopixel.md b/docs/en/unit/neopixel.md
index efff5247..61688679 100644
--- a/docs/en/unit/neopixel.md
+++ b/docs/en/unit/neopixel.md
@@ -133,12 +133,12 @@ void FastLEDshowTask(void *pvParameters){
 
 **Neopixel case - 01**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/M5stack%20Neopixel%20Cosplay%20costume%20lights%20-%20super%20simple.mp4" type="video/mp4">
 </video>
 
 **Neopixel case - 02**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Akela%20Weapons.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/op180.md b/docs/en/unit/op180.md
index 23c1156d..dcee1ce1 100644
--- a/docs/en/unit/op180.md
+++ b/docs/en/unit/op180.md
@@ -88,6 +88,6 @@ void loop() {
 
 ## Video
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/OP-90.180.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/op90.md b/docs/en/unit/op90.md
index 3652885c..fb0ec351 100644
--- a/docs/en/unit/op90.md
+++ b/docs/en/unit/op90.md
@@ -85,6 +85,6 @@ void loop() {
 
 ## Video
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/OP-90.180.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/en/unit/thermal.md b/docs/en/unit/thermal.md
index 581becce..8b15fc96 100644
--- a/docs/en/unit/thermal.md
+++ b/docs/en/unit/thermal.md
@@ -115,6 +115,6 @@ interpolate_image(reversePixels,ROWS,COLS,dest_2d,\
 
 **THERMAL Case**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201811/Infrared%20Thermal%20Imaging.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/app/bala.md b/docs/zh_CN/app/bala.md
index 2770b503..b0ed243b 100644
--- a/docs/zh_CN/app/bala.md
+++ b/docs/zh_CN/app/bala.md
@@ -76,24 +76,24 @@ C.A.S.E | 塑料 ( PC )
 
 **BALA 的演示**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5BALA%20.mp4" type="video/mp4">
 </video>
 
 **BALA 的演示 - 手机控制**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201811/Iphone%20Controlled%20M5Bala%20.mp4" type="video/mp4">
 </video>
 
 **BALA 的演示 - 巡线**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5BALA.mp4" type="video/mp4">
 </video>
 
 **BALA 的演示 - 使用手机巡线**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/Self-tracing%20Car.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/app/lidarbot.md b/docs/zh_CN/app/lidarbot.md
index 616b2b28..44e10efd 100644
--- a/docs/zh_CN/app/lidarbot.md
+++ b/docs/zh_CN/app/lidarbot.md
@@ -182,6 +182,6 @@ void loop()
 
 **LidarBOT 案例**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/LidarBot.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/app/m5scale_diy_kit.md b/docs/zh_CN/app/m5scale_diy_kit.md
index e5b4854b..430c55fa 100644
--- a/docs/zh_CN/app/m5scale_diy_kit.md
+++ b/docs/zh_CN/app/m5scale_diy_kit.md
@@ -115,6 +115,6 @@ void loop() {
 ## Video
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/App/M5SCALE_DIY_Kit/M5SCALE_DIY_Kit.mp4" type="video/mp4" >
 </video>
diff --git a/docs/zh_CN/base/iiot_dual_switch_kit_with_core.md b/docs/zh_CN/base/iiot_dual_switch_kit_with_core.md
index 71d315c3..1d377138 100644
--- a/docs/zh_CN/base/iiot_dual_switch_kit_with_core.md
+++ b/docs/zh_CN/base/iiot_dual_switch_kit_with_core.md
@@ -57,7 +57,7 @@
 ## 相关视频
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Base/iiot_dual_switch%20kit_with_core.mp4" type="video/mp4" >
 </video>
 
diff --git a/docs/zh_CN/base/lan_base.md b/docs/zh_CN/base/lan_base.md
index fd112a9e..fdc8e3bb 100644
--- a/docs/zh_CN/base/lan_base.md
+++ b/docs/zh_CN/base/lan_base.md
@@ -100,6 +100,6 @@ HT3.96连接器的 6 个引脚默认悬空，你可以根据需求将其与M-BUS
 
 **LAN 案例 - PC 使用 UDP 协议通过 LAN 底座实现有线传输视频给 Core**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/M5StackLovyanlauncher.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/base/node_base.md b/docs/zh_CN/base/node_base.md
index e9dd56de..42319a92 100644
--- a/docs/zh_CN/base/node_base.md
+++ b/docs/zh_CN/base/node_base.md
@@ -83,6 +83,6 @@
 
 **NODE 的演示 - 语音识别**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/Node%20Module.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/base/plc_base.md b/docs/zh_CN/base/plc_base.md
index b3690c7a..8e218bb0 100644
--- a/docs/zh_CN/base/plc_base.md
+++ b/docs/zh_CN/base/plc_base.md
@@ -52,6 +52,6 @@
 
 **RS485 通信**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/RS485%20Application.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/core/fire.md b/docs/zh_CN/core/fire.md
index a7ed933b..36831129 100644
--- a/docs/zh_CN/core/fire.md
+++ b/docs/zh_CN/core/fire.md
@@ -293,12 +293,12 @@ Fire 中的 GPIO 16 / 17 默认与PSRAM连接，因此当你在连接或是堆
 
 **m5stack 的简介**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%E7%AE%80%E4%BB%8B%EF%BC%88%E4%B8%AD%E6%96%87%EF%BC%89.mp4" type="video/mp4">
 </video>
 
 **m5stack 的案例 - Piu UI framework with Moddable SDK**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/run-time-display-rotation.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/core/gray.md b/docs/zh_CN/core/gray.md
index 77941aed..b250a373 100644
--- a/docs/zh_CN/core/gray.md
+++ b/docs/zh_CN/core/gray.md
@@ -266,7 +266,7 @@
 
 **M5Stack的简介**
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%E7%AE%80%E4%BB%8B%EF%BC%88%E4%B8%AD%E6%96%87%EF%BC%89.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/zh_CN/core/m5go.md b/docs/zh_CN/core/m5go.md
index e9c037ad..cc09aa30 100644
--- a/docs/zh_CN/core/m5go.md
+++ b/docs/zh_CN/core/m5go.md
@@ -272,6 +272,6 @@
 
 - **m5stack 的简介**
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%E7%AE%80%E4%BB%8B%EF%BC%88%E4%B8%AD%E6%96%87%EF%BC%89.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/core/m5go_lite.md b/docs/zh_CN/core/m5go_lite.md
index 283897c5..3f4f926f 100644
--- a/docs/zh_CN/core/m5go_lite.md
+++ b/docs/zh_CN/core/m5go_lite.md
@@ -322,6 +322,6 @@ float pressure = bme.readPressure();
 
 - **m5stack的简介**
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%E7%AE%80%E4%BB%8B%EF%BC%88%E4%B8%AD%E6%96%87%EF%BC%89.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/core/m5stick.md b/docs/zh_CN/core/m5stick.md
index 97a1eb36..170ab9ad 100644
--- a/docs/zh_CN/core/m5stick.md
+++ b/docs/zh_CN/core/m5stick.md
@@ -188,12 +188,12 @@ M5stick 是 M5Stack 产品系列中的核心设备之一，该产品系列建立
 
 - **m5stick 的案例 - 控制空调**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5Stick%20controll%20AC.mp4" type="video/mp4">
 </video>
 
 - **m5stick 的案例 - .obj 模型查看器**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/Obj%20Model%20Viewer.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/core/m5stickc.md b/docs/zh_CN/core/m5stickc.md
index 0206a90a..02e04136 100644
--- a/docs/zh_CN/core/m5stickc.md
+++ b/docs/zh_CN/core/m5stickc.md
@@ -185,12 +185,12 @@ M5StickC仅支持WIN10&Linux&MAC免驱，其余操作系统则需要用户自行
 
 - **M5StickC 的案例 - 计数器**
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/StickC%20Watch.mp4" type="video/mp4">
 </video>
 
 - **M5StickC 的案例 - 测试 DSD**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/Simple_Watch_Device.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/hat/hat-8servos.md b/docs/zh_CN/hat/hat-8servos.md
index f005a4e8..7a6bf33a 100644
--- a/docs/zh_CN/hat/hat-8servos.md
+++ b/docs/zh_CN/hat/hat-8servos.md
@@ -156,7 +156,7 @@
 
 ## 相关视频
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/8Servos_hat.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/zh_CN/hat/hat-adc.md b/docs/zh_CN/hat/hat-adc.md
index bb1839d4..baffa1ef 100644
--- a/docs/zh_CN/hat/hat-adc.md
+++ b/docs/zh_CN/hat/hat-adc.md
@@ -114,7 +114,7 @@ byte error;
 ## 相关视频
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ADC-DAC-HAT.mp4" type="video/mp4" >
 </video>
 
diff --git a/docs/zh_CN/hat/hat-beetlec.md b/docs/zh_CN/hat/hat-beetlec.md
index 4d225be0..c0983a15 100644
--- a/docs/zh_CN/hat/hat-beetlec.md
+++ b/docs/zh_CN/hat/hat-beetlec.md
@@ -84,10 +84,10 @@ Beetlec底座需要结合M5StickC控制器使用.在底座上，配备了两个
 
 ## 相关视频
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/BeetleC_01.mp4" type="video/mp4">
 </video>
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/BeetleC_02.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/hat/hat-bugc.md b/docs/zh_CN/hat/hat-bugc.md
index 00f746e5..4e75ba81 100644
--- a/docs/zh_CN/hat/hat-bugc.md
+++ b/docs/zh_CN/hat/hat-bugc.md
@@ -67,7 +67,7 @@ Bugc底座需要结合M5StickC控制器使用.在底座上，配备了四个由S
 
 ## 相关视频
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/bugC.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/zh_CN/hat/hat-dac.md b/docs/zh_CN/hat/hat-dac.md
index 266d98e3..f0074279 100644
--- a/docs/zh_CN/hat/hat-dac.md
+++ b/docs/zh_CN/hat/hat-dac.md
@@ -74,6 +74,6 @@
 ## 相关视频
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ADC-DAC-HAT.mp4" type="video/mp4" >
 </video>
diff --git a/docs/zh_CN/hat/hat-finger.md b/docs/zh_CN/hat/hat-finger.md
index 1a3d81b5..59a2d219 100644
--- a/docs/zh_CN/hat/hat-finger.md
+++ b/docs/zh_CN/hat/hat-finger.md
@@ -79,6 +79,6 @@ UART 参数设置:
 ## 相关视频
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/FINGER-HAT.mp4" type="video/mp4" >
 </video>
diff --git a/docs/zh_CN/hat/hat-joystick.md b/docs/zh_CN/hat/hat-joystick.md
index 161ff332..f52b4788 100644
--- a/docs/zh_CN/hat/hat-joystick.md
+++ b/docs/zh_CN/hat/hat-joystick.md
@@ -105,6 +105,6 @@
 
 ## 相关视频
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/Joystick_HAT.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/hat/hat-ncir.md b/docs/zh_CN/hat/hat-ncir.md
index 3b1fe706..d1dcab99 100644
--- a/docs/zh_CN/hat/hat-ncir.md
+++ b/docs/zh_CN/hat/hat-ncir.md
@@ -72,6 +72,6 @@ IIC（0x5A）
 
 ## 相关视频
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/NCIR-HAT.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/hat/hat-neoflash.md b/docs/zh_CN/hat/hat-neoflash.md
index 1cfc1980..eb227240 100644
--- a/docs/zh_CN/hat/hat-neoflash.md
+++ b/docs/zh_CN/hat/hat-neoflash.md
@@ -82,6 +82,6 @@
 
 ## 相关视频
 
-<video width="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/Neoflash_HAT.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/hat/hat-proto-plus.md b/docs/zh_CN/hat/hat-proto-plus.md
index 2a119178..ebcf42fc 100644
--- a/docs/zh_CN/hat/hat-proto-plus.md
+++ b/docs/zh_CN/hat/hat-proto-plus.md
@@ -41,7 +41,7 @@
 
 ## 相关视频
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO_PLUS_HAT.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/zh_CN/hat/hat-proto.md b/docs/zh_CN/hat/hat-proto.md
index 8187eb25..56ad81f3 100644
--- a/docs/zh_CN/hat/hat-proto.md
+++ b/docs/zh_CN/hat/hat-proto.md
@@ -47,6 +47,6 @@
 
 ## 相关视频
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO-HAT.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/hat/hat-puppyc.md b/docs/zh_CN/hat/hat-puppyc.md
index 519c13d9..8ef9f0f1 100644
--- a/docs/zh_CN/hat/hat-puppyc.md
+++ b/docs/zh_CN/hat/hat-puppyc.md
@@ -64,7 +64,7 @@ PuppyC底座需要结合M5StickC控制器使用，StickC编程后通过I2C协议
 
 ## Videos
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/App/PuppyC/PuppyC.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/zh_CN/hat/hat-rs485.md b/docs/zh_CN/hat/hat-rs485.md
index b49d9426..57333715 100644
--- a/docs/zh_CN/hat/hat-rs485.md
+++ b/docs/zh_CN/hat/hat-rs485.md
@@ -100,6 +100,6 @@ void loop() {
 ## 相关视频
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/RS485_HAT.mp4" type="video/mp4" >
 </video>
diff --git a/docs/zh_CN/hat/hat-servo.md b/docs/zh_CN/hat/hat-servo.md
index 096f5276..28255993 100644
--- a/docs/zh_CN/hat/hat-servo.md
+++ b/docs/zh_CN/hat/hat-servo.md
@@ -60,6 +60,6 @@
 ## 相关视频
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/SERVO-HAT.mp4" type="video/mp4" >
 </video>
diff --git a/docs/zh_CN/hat/hat-thermal.md b/docs/zh_CN/hat/hat-thermal.md
index 69130a1f..73295785 100644
--- a/docs/zh_CN/hat/hat-thermal.md
+++ b/docs/zh_CN/hat/hat-thermal.md
@@ -74,6 +74,6 @@ I2C 地址为**0x33**.(GOIO 0/26)
 
 ## 相关视频
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/THERMAL-HAT.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/hat/hat-tof.md b/docs/zh_CN/hat/hat-tof.md
index 1cfb4c00..f7401dfb 100644
--- a/docs/zh_CN/hat/hat-tof.md
+++ b/docs/zh_CN/hat/hat-tof.md
@@ -85,6 +85,6 @@
 
 ## 相关视频
 
-<video width="30%" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ToF_HAT.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/hat/hat-yun.md b/docs/zh_CN/hat/hat-yun.md
index 851c0d72..0784bcf3 100644
--- a/docs/zh_CN/hat/hat-yun.md
+++ b/docs/zh_CN/hat/hat-yun.md
@@ -87,6 +87,6 @@
 
 **Demo** 
 
-<video width="60%" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/YUN-HAT.mp4" type="video/mp4" >
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/module/faces_finger.md b/docs/zh_CN/module/faces_finger.md
index 179e3cc2..017ff8d9 100644
--- a/docs/zh_CN/module/faces_finger.md
+++ b/docs/zh_CN/module/faces_finger.md
@@ -81,6 +81,6 @@
 
 ## 相关视频
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/FACES-Finger.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/module/faces_rfid.md b/docs/zh_CN/module/faces_rfid.md
index c961c882..ff580507 100644
--- a/docs/zh_CN/module/faces_rfid.md
+++ b/docs/zh_CN/module/faces_rfid.md
@@ -81,6 +81,6 @@
 
 ## 相关视频
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/FACES-RFID.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/module/lego_plus.md b/docs/zh_CN/module/lego_plus.md
index 58d2c979..c66debbe 100644
--- a/docs/zh_CN/module/lego_plus.md
+++ b/docs/zh_CN/module/lego_plus.md
@@ -85,6 +85,6 @@ MEGA328芯片在默认情况下已经搭载了电机驱动程序.如果你想要
 
 **LEGO+ - 搭建坦克**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5%20Tank.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/module/plus.md b/docs/zh_CN/module/plus.md
index e48650d1..6f36fdaf 100644
--- a/docs/zh_CN/module/plus.md
+++ b/docs/zh_CN/module/plus.md
@@ -106,6 +106,6 @@ while(Wire.available()) {
 
 **PLUS 的演示 - 菜单界面的翻页与选择**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stack%20Encoder.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/module/servo.md b/docs/zh_CN/module/servo.md
index 973fda4c..1e41410a 100644
--- a/docs/zh_CN/module/servo.md
+++ b/docs/zh_CN/module/servo.md
@@ -128,12 +128,12 @@ void loop() {
 
 **SERVO 的使用教程**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/Servo/E4%20-%20Servo%20Demo(UIFlow%20Tutorials%205).mp4" type="video/mp4">
 </video>
 
 **SERVO 的案例**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20Servo.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/module/sim800.md b/docs/zh_CN/module/sim800.md
index b02d04c8..4ffb6c40 100644
--- a/docs/zh_CN/module/sim800.md
+++ b/docs/zh_CN/module/sim800.md
@@ -84,12 +84,12 @@
 
 **SIM800L 的演示 - 拔打电话**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/sim800_call.mp4" type="video/mp4">
 </video>
 
 **SIM800L 的演示 - 接收短信**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/SMS%20Receive.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/module/usb.md b/docs/zh_CN/module/usb.md
index 528a35f1..0c98efa9 100644
--- a/docs/zh_CN/module/usb.md
+++ b/docs/zh_CN/module/usb.md
@@ -121,6 +121,6 @@ if(Usb.getUsbTaskState() == USB_STATE_RUNNING)
 
 **USB 的案例 - 读取 USB 设备**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201902/USB%20Interface.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/accel.md b/docs/zh_CN/unit/accel.md
index 62620eaf..0a748b18 100644
--- a/docs/zh_CN/unit/accel.md
+++ b/docs/zh_CN/unit/accel.md
@@ -85,7 +85,7 @@
 
 ## 相关视频
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/ACCEL.mp4" type="video/mp4">
 </video>
 
diff --git a/docs/zh_CN/unit/butterfly.md b/docs/zh_CN/unit/butterfly.md
index a6004ca3..81ae939a 100644
--- a/docs/zh_CN/unit/butterfly.md
+++ b/docs/zh_CN/unit/butterfly.md
@@ -100,7 +100,7 @@
 
 ## Video
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/App/Butterfly/butterfly.mp4" type="video/mp4" >
 </video>
 
diff --git a/docs/zh_CN/unit/cardkb.md b/docs/zh_CN/unit/cardkb.md
index 5d44711c..ac0ae610 100644
--- a/docs/zh_CN/unit/cardkb.md
+++ b/docs/zh_CN/unit/cardkb.md
@@ -139,6 +139,6 @@ void loop()
 
 **CarKB 的使用演示**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20Cardkb.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/catear.md b/docs/zh_CN/unit/catear.md
index 1b4684ed..7b5c8a6c 100644
--- a/docs/zh_CN/unit/catear.md
+++ b/docs/zh_CN/unit/catear.md
@@ -66,6 +66,6 @@ Neopixel 的 Arduino 驱动函数库:
 
 **CatEAR 的演示**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stick%20CatEar.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/unit/color.md b/docs/zh_CN/unit/color.md
index 853c0603..55441b65 100644
--- a/docs/zh_CN/unit/color.md
+++ b/docs/zh_CN/unit/color.md
@@ -127,6 +127,6 @@ tcs.getRawData(&red, &green, &blue, &clear);
 
 **COLOR 案例 - 01**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201902/Color%20Unit.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/dual_button.md b/docs/zh_CN/unit/dual_button.md
index ab18c761..d6f1c6fe 100644
--- a/docs/zh_CN/unit/dual_button.md
+++ b/docs/zh_CN/unit/dual_button.md
@@ -96,6 +96,6 @@ M5.update();
 
 **DUAL BUTTON 的演示 - 控制 VARIOUS2 游戏**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201811/M5Game-VARIOUS2.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/unit/earth.md b/docs/zh_CN/unit/earth.md
index e5550b52..d56f612a 100644
--- a/docs/zh_CN/unit/earth.md
+++ b/docs/zh_CN/unit/earth.md
@@ -99,6 +99,6 @@ void loop() {
 
 **EARTH 的案例 - 监控花瓶土壤含水量**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Earth%20Unit.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/esp32cam.md b/docs/zh_CN/unit/esp32cam.md
index 2899321a..d4740d5a 100644
--- a/docs/zh_CN/unit/esp32cam.md
+++ b/docs/zh_CN/unit/esp32cam.md
@@ -181,12 +181,12 @@
 
 **ESP32CAM case - 01**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/esp32cam_webcam_01.mp4" type="video/mp4">
 </video>
 
 **M5Camera 的应用 - 02**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/The%20M5Camera%20works.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/unit/finger.md b/docs/zh_CN/unit/finger.md
index b5a6d35d..71ebb272 100644
--- a/docs/zh_CN/unit/finger.md
+++ b/docs/zh_CN/unit/finger.md
@@ -125,6 +125,6 @@ res1 = fpm_deleteAllUser();
 
 - **FINGER 的演示**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Fingerprint%20Unit.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/unit/joystick.md b/docs/zh_CN/unit/joystick.md
index ca788ded..c1fe648a 100644
--- a/docs/zh_CN/unit/joystick.md
+++ b/docs/zh_CN/unit/joystick.md
@@ -114,12 +114,12 @@ if (Wire.available()) {
 
 **Joystick 的演示 - 遥控轮椅**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stack%20Joystick.mp4" type="video/mp4">
 </video>
 
 **Joystick 的演示 - 菜单界面的翻页与选择**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Control%20M5%20With%20Joystick.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/laser-rx.md b/docs/zh_CN/unit/laser-rx.md
index c90cc565..847e3311 100644
--- a/docs/zh_CN/unit/laser-rx.md
+++ b/docs/zh_CN/unit/laser-rx.md
@@ -118,6 +118,6 @@ M5.update();
 ## 相关视频
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/LASER-TX-RX.mp4" type="video/mp4" >
 </video>
diff --git a/docs/zh_CN/unit/laser-tx.md b/docs/zh_CN/unit/laser-tx.md
index a0be90f6..28679900 100644
--- a/docs/zh_CN/unit/laser-tx.md
+++ b/docs/zh_CN/unit/laser-tx.md
@@ -119,7 +119,7 @@ M5.update();
 ## 相关视频
 **Demo** 
 
-<video width="500" height="500" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/LASER-TX-RX.mp4" type="video/mp4" >
 </video>
 
diff --git a/docs/zh_CN/unit/light.md b/docs/zh_CN/unit/light.md
index 0c68135a..19da5c05 100644
--- a/docs/zh_CN/unit/light.md
+++ b/docs/zh_CN/unit/light.md
@@ -95,12 +95,12 @@ digitalRead_value = digitalRead(26);
 
 **LIGHT 的教程**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%20iot%20lighting%20part%202%20-%20light%20sensor%20control.mp4" type="video/mp4">
 </video>
 
 **LIGHT 的应用**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Light%20Units.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/unit/m5camera.md b/docs/zh_CN/unit/m5camera.md
index 322bbf3b..3954b453 100644
--- a/docs/zh_CN/unit/m5camera.md
+++ b/docs/zh_CN/unit/m5camera.md
@@ -234,12 +234,12 @@ Model A  和  Model B,它们有着不同的电路设计、可以通过背面贴
 
 **M5Camera 的应用 - M5Camera 与 M5Core 图传**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Camera.mp4" type="video/mp4">
 </video>
 
 **M5Camera 的应用 - 保护布丁**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/Protective-Pudding.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/neoflash.md b/docs/zh_CN/unit/neoflash.md
index f6c8f447..53ddbbf9 100644
--- a/docs/zh_CN/unit/neoflash.md
+++ b/docs/zh_CN/unit/neoflash.md
@@ -72,12 +72,12 @@
 
 **Neoflash 在 UIFlow 上的使用**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/NeoFlash/E1%20-%20Neoflash%20%E4%BE%8B%E7%A8%8B%EF%BC%88UIFlow%20Tutorials%202%EF%BC%89.mp4" type="video/mp4">
 </video>
 
 **Neoflash 的演示 - 闹钟**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20NeoFlash.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/neopixel.md b/docs/zh_CN/unit/neopixel.md
index 8c9637b5..abfb997e 100644
--- a/docs/zh_CN/unit/neopixel.md
+++ b/docs/zh_CN/unit/neopixel.md
@@ -127,12 +127,12 @@ void FastLEDshowTask(void *pvParameters){
 
 **Neopixel 的演示 - 01**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/M5stack%20Neopixel%20Cosplay%20costume%20lights%20-%20super%20simple.mp4" type="video/mp4">
 </video>
 
 **Neopixel 的演示 - 02**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Akela%20Weapons.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/op180.md b/docs/zh_CN/unit/op180.md
index 395e22c2..11bcc0f6 100644
--- a/docs/zh_CN/unit/op180.md
+++ b/docs/zh_CN/unit/op180.md
@@ -50,6 +50,6 @@ w# Unit OP.180 {docsify-ignore-all}
 
 ## 相关视频
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/OP-90.180.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/unit/op90.md b/docs/zh_CN/unit/op90.md
index 01e7fff4..69974be1 100644
--- a/docs/zh_CN/unit/op90.md
+++ b/docs/zh_CN/unit/op90.md
@@ -53,6 +53,6 @@
 
 ## 相关视频
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/OP-90.180.mp4" type="video/mp4">
 </video>
\ No newline at end of file
diff --git a/docs/zh_CN/unit/relay.md b/docs/zh_CN/unit/relay.md
index 2a00e0ce..4a17f596 100644
--- a/docs/zh_CN/unit/relay.md
+++ b/docs/zh_CN/unit/relay.md
@@ -95,6 +95,6 @@ void loop(void) {
 
 - **用 UIFlow 和 RELAY Unit 控制 家庭灯**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Blinking%20a%20bulb%20with%20the%20M5%20Relay%20unit..mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/thermal.md b/docs/zh_CN/unit/thermal.md
index b0a85639..900a6171 100644
--- a/docs/zh_CN/unit/thermal.md
+++ b/docs/zh_CN/unit/thermal.md
@@ -111,6 +111,6 @@ interpolate_image(reversePixels,ROWS,COLS,dest_2d,\
 
 **THERMAL 的演示**
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201811/Infrared%20Thermal%20Imaging.mp4" type="video/mp4">
 </video>
diff --git a/docs/zh_CN/unit/vibrator.md b/docs/zh_CN/unit/vibrator.md
index 40f15f65..9ef53344 100644
--- a/docs/zh_CN/unit/vibrator.md
+++ b/docs/zh_CN/unit/vibrator.md
@@ -50,6 +50,6 @@
 
 ## 相关视频
 
-<video width="500" height="315" controls>
+<video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Vibrator.mp4" type="video/mp4">
 </video>
\ No newline at end of file