diff --git a/src/router/modules/videos.example.js b/src/router/modules/videos.example.js
index 1c81043a..ab9ca34a 100644
--- a/src/router/modules/videos.example.js
+++ b/src/router/modules/videos.example.js
@@ -100,5 +100,45 @@ export default [
                 }
             }
         ]
+    },
+    {
+        path: '/videos_example/6',
+        component: Layout,
+        meta: {
+            title: '06 - 和服务端交互'
+        },
+        children: [
+            {
+                path: '',
+                name: 'videosExampleVideo6',
+                component: () => import(/* webpackChunkName: 'videos_example' */ '@/views/videos_example/6'),
+                meta: {
+                    title: '06 和服务端交互',
+                    sidebar: false,
+                    breadcrumb: false,
+                    activeMenu: '/videos_example/6'
+                }
+            }
+        ]
+    },
+    {
+        path: '/videos_example/7',
+        component: Layout,
+        meta: {
+            title: '07 - 路由和侧边栏导航'
+        },
+        children: [
+            {
+                path: '',
+                name: 'videosExampleVideo6',
+                component: () => import(/* webpackChunkName: 'videos_example' */ '@/views/videos_example/7'),
+                meta: {
+                    title: '07 路由和侧边栏导航',
+                    sidebar: false,
+                    breadcrumb: false,
+                    activeMenu: '/videos_example/7'
+                }
+            }
+        ]
     }
 ]
diff --git a/src/views/index.vue b/src/views/index.vue
index f61e2f0c..4e00d74c 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -13,7 +13,7 @@
             </el-button-group>
         </page-header>
         <el-row :gutter="20" style="margin: 0 10px;">
-            <el-col :xl="8">
+            <el-col :lg="8">
                 <page-main title="框架信息" style="margin: 0 0 20px 0;">
                     <div class="fa-info">
                         <img src="https://hooray.gitee.io/fantastic-admin/logo.png" style="width: 150px;">
@@ -33,7 +33,7 @@
                     </div>
                 </page-main>
             </el-col>
-            <el-col :xl="16">
+            <el-col :lg="16">
                 <el-row :gutter="20" style="margin: 0 -10px 20px -10px;">
                     <el-col :md="4">
                         <div class="icon-box icon-box-1" @click="onIconClick('收藏')">
diff --git a/src/views/videos_example/6.vue b/src/views/videos_example/6.vue
new file mode 100644
index 00000000..03733c67
--- /dev/null
+++ b/src/views/videos_example/6.vue
@@ -0,0 +1,22 @@
+<template>
+    <el-row>
+        <el-col :md="18">
+            <page-main class="main">
+                <iframe src="//player.bilibili.com/player.html?aid=585143528&bvid=BV1yz4y1C7HH&cid=254577087&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" />
+            </page-main>
+        </el-col>
+    </el-row>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    height: 0;
+    padding-bottom: 60% !important;
+}
+iframe {
+    border: 1px solid #ccc;
+    position: absolute;
+    width: calc(100% - 40px);
+    height: calc(100% - 40px);
+}
+</style>
diff --git a/src/views/videos_example/7.vue b/src/views/videos_example/7.vue
new file mode 100644
index 00000000..52a1592f
--- /dev/null
+++ b/src/views/videos_example/7.vue
@@ -0,0 +1,22 @@
+<template>
+    <el-row>
+        <el-col :md="18">
+            <page-main class="main">
+                <iframe src="//player.bilibili.com/player.html?aid=842954812&bvid=BV1554y1678N&cid=261546065&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" />
+            </page-main>
+        </el-col>
+    </el-row>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    height: 0;
+    padding-bottom: 60% !important;
+}
+iframe {
+    border: 1px solid #ccc;
+    position: absolute;
+    width: calc(100% - 40px);
+    height: calc(100% - 40px);
+}
+</style>