diff --git a/README.md b/README.md
index d92dd9e1784b82c5d51459f165c290f9065a4b82..9f231e9008a78646bf4339d6f47ed805809cc0a5 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 本篇Codelab主要介绍了滑动容器组件Swiper的几种常见应用场景，包括顶部导航、轮播图以及视频滑动播放。
 
-![](screenshots/device/swiper.gif)
+![](screenshots/device/swiper.png)
 
 ### 相关概念
 
diff --git a/entry/src/main/ets/pages/PageVideo.ets b/entry/src/main/ets/pages/PageVideo.ets
index 7c8f9c5357ad99c35ddeb044d352c0fcbd5d5b7a..f9bc4c3fd2aa62ceec1495941e009958c3e40e85 100644
--- a/entry/src/main/ets/pages/PageVideo.ets
+++ b/entry/src/main/ets/pages/PageVideo.ets
@@ -45,6 +45,7 @@ struct PageVideo {
       .indicator(false)
       .loop(false)
       .vertical(true)
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
       .onChange((index: number) => {
         this.index = index;
       })
diff --git a/entry/src/main/ets/view/play/CommentView.ets b/entry/src/main/ets/view/play/CommentView.ets
index 6830ef63940c4a1adcb5a99dbe23bb437c0fdeff..48aadcf0e98283bafc3a84bd2ff41ff03ed6bdf0 100644
--- a/entry/src/main/ets/view/play/CommentView.ets
+++ b/entry/src/main/ets/view/play/CommentView.ets
@@ -21,7 +21,8 @@ import { CommonConstants } from '../../common/constants/CommonConstant';
  * @param fontSize Font size.
  * @param fonWeight Font weight.
  */
-@Extend(Text) function textStyle(fontSize: number, fonWeight: number) {
+@Extend(Text)
+function textStyle(fontSize: number, fonWeight: number) {
   .fontSize(fontSize)
   .fontWeight(fonWeight)
   .fontColor($r('app.color.start_window_background'))
@@ -33,7 +34,7 @@ import { CommonConstants } from '../../common/constants/CommonConstant';
  */
 @Component
 export struct CommentView {
-  @ObjectLink private item: VideoItem;
+  @ObjectLink item: VideoItem;
 
   build() {
     Column() {
diff --git a/entry/src/main/ets/view/play/PlayView.ets b/entry/src/main/ets/view/play/PlayView.ets
index 6b8be99c916a7005b547eeef30a35ab7cd8b0be2..192e942948cc47a9521e128ebbf7633cff8fd306 100644
--- a/entry/src/main/ets/view/play/PlayView.ets
+++ b/entry/src/main/ets/view/play/PlayView.ets
@@ -30,7 +30,7 @@ export struct PlayView {
   @Link @Watch('needPageShow') index: number;
   @Link @Watch('needPageShow') pageShow: boolean;
   @State item: VideoItem = new VideoItem();
-  private barPosition: number = 0;
+  barPosition: number = 0;
   @State private playState: number = PlayState.STOP;
   private videoController: VideoController = new VideoController();
 
@@ -63,6 +63,7 @@ export struct PlayView {
     .backgroundColor(Color.Black)
     .width(CommonConstants.FULL_WIDTH)
     .height(CommonConstants.FULL_HEIGHT)
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
   }
 
   onPageSwiperShow(): void {
@@ -85,7 +86,8 @@ export struct PlayView {
         this.isShow = true;
         this.onPageSwiperShow();
       } else {
-        if (this.isShow === true) { // The already visible status is changed to invisible, and the invisible method callback is triggered.
+        if (this.isShow ===
+          true) { // The already visible status is changed to invisible, and the invisible method callback is triggered.
           this.isShow = false;
           this.onPageSwiperHide();
         }
diff --git a/screenshots/device/swiper.gif b/screenshots/device/swiper.gif
deleted file mode 100644
index ebd3f6a56cd8f9c7e591c1e7f18e4629a39b9136..0000000000000000000000000000000000000000
Binary files a/screenshots/device/swiper.gif and /dev/null differ
diff --git a/screenshots/device/swiper.png b/screenshots/device/swiper.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9eb1ee2b50305cdd6c4722fe491aaa6c82a5772
Binary files /dev/null and b/screenshots/device/swiper.png differ