diff --git a/assets/scss/scenario.scss b/assets/scss/scenario.scss
index 9919e1bad..4a30de477 100644
--- a/assets/scss/scenario.scss
+++ b/assets/scss/scenario.scss
@@ -166,6 +166,15 @@ html {
         width: 100%;
       }
     }
+
+    iframe {
+      margin-top: 40px;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 100%;
+        height: 300px;
+      }
+    }
   
     p {
       margin-top: 56px;
diff --git a/content/en/devops/_index.md b/content/en/devops/_index.md
index a0cadc54b..1f5e7da65 100644
--- a/content/en/devops/_index.md
+++ b/content/en/devops/_index.md
@@ -42,6 +42,7 @@ section2:
 
 section3:
   title: See KubeSphere One-stop DevOps Workflow In Action
+  videoLink: https://www.youtube.com/embed/c3V-2RX9yGY
   image: /images/service-mesh/15.jpg
   content: Want to get started in action by following with the hands-on lab?
   btnContent: Start Hands-on Lab
diff --git a/layouts/_default/scenario.html b/layouts/_default/scenario.html
index 575b2d295..3ce705eb2 100644
--- a/layouts/_default/scenario.html
+++ b/layouts/_default/scenario.html
@@ -49,7 +49,19 @@
   <img class="bg-right" src="{{ .bgRight }}" alt="">
   <div class="common-layout">
     <h2 class="title-black-h2">{{ .title }}</h2>
+    {{ if .videoLink }}
+    <iframe 
+        id='iframe-player' 
+        src="{{ .videoLink }}" 
+        width="900" 
+        height="580" 
+        frameborder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
+        allowfullscreen>
+    </iframe>
+    {{ else }}
     <img src="{{ .image }}" alt="">
+    {{ end }}
     <p class="common-p">{{ .content }}</p>
     <a href="{{ .link }}"><button class="common-btn">{{ .btnContent }}</button></a>
   </div>