diff --git a/packages/docs/.vitepress/theme/components/MasteringPiniaLink.vue b/packages/docs/.vitepress/theme/components/MasteringPiniaLink.vue
index 5a934a2a71..8475c42587 100644
--- a/packages/docs/.vitepress/theme/components/MasteringPiniaLink.vue
+++ b/packages/docs/.vitepress/theme/components/MasteringPiniaLink.vue
@@ -1,26 +1,85 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
+import { computed, ref } from 'vue'
+
+// TODO: split into 2 components
 
 const { site } = useData()
 const translations = {
-  'en-US':
-    'Master this and much more with the official video course by the author of Pinia',
-  'zh-CN': '通过 Pinia 作者的官方视频课程掌握更多内容',
+  videoLink: {
+    'en-US':
+      'Master this and much more with the official video course by the author of Pinia',
+    'zh-CN': '通过 Pinia 作者的官方视频课程掌握更多内容',
+  },
+  videoEmbed: {
+    'en-US': 'Master this and much more with a free video from Mastering Pinia',
+    'zh-CN': '通过 Mastering Pinia 的免费视频掌握更多内容',
+  },
+  watchMoreA: {
+    'en-US': 'Watch more on ',
+    'zh-CN': '在 ',
+  },
+  watchMoreB: {
+    'en-US': '',
+    'zh-CN': ' 上观看更多内容',
+  },
 }
-defineProps<{ href: string; title: string }>()
+const props = defineProps<{ href: string; title: string, mpLink?: string }>()
+const isVideo = computed(() => props.href.startsWith('https://play.gumlet.io/'))
+const isVideoOpen = ref(false)
 </script>
 
 <template>
   <div class="mp">
+    <template v-if="isVideo">
+      <div class="video-embed" v-if="isVideoOpen">
+        <div style="padding: 56.25% 0 0 0; position: relative">
+          <iframe
+            loading="lazy"
+            title="Gumlet video player"
+            false
+            :src="href + '?preload=false&autoplay=true&loop=false&disable_player_controls=false'"
+            style="
+              border: none;
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: 100%;
+              width: 100%;
+            "
+            allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;"
+            frameborder="0"
+            allowfullscreen
+          >
+          </iframe>
+        </div>
+
+        <div class="watch-more">
+          {{ translations.watchMoreA[site.lang] }}
+          <a :href="mpLink || 'https://masteringpinia.com'" target="_blank" rel="noopener">
+            Mastering Pinia
+            <img src="/mp-pinia-logo.svg" alt="mastering pinia logo" />
+          </a>
+          {{ translations.watchMoreB[site.lang] }}
+        </div>
+      </div>
+
+      <button class="cta" :title v-else @click="isVideoOpen = true">
+        <div class="text">
+          <slot>{{ translations.videoEmbed[site.lang] }}</slot>
+        </div>
+      </button>
+    </template>
     <a
+      v-else
       :href="href"
       target="_blank"
       rel="noopener"
       :title="title"
-      class="no-icon"
+      class="no-icon cta"
     >
       <div class="text">
-        <slot>{{ translations[site.lang] }}</slot>
+        <slot>{{ translations.videoLink[site.lang] }}</slot>
       </div>
     </a>
   </div>
@@ -29,19 +88,39 @@ defineProps<{ href: string; title: string }>()
 <style scoped>
 .mp {
   margin-top: 20px;
-  background-color: var(--vp-code-block-bg);
-  padding: 1em 1.25em;
-  border-radius: 2px;
+}
+.mp:has(.cta) {
   position: relative;
+  transition: border-color 0.5s;
+  padding: 1em 1.25em;
+  background-color: var(--vp-code-block-bg);
   border-radius: 1em;
   border: 2px solid var(--vp-c-bg-alt);
-  transition: border-color 0.5s;
 }
-.mp:hover {
+.mp:has(.cta):hover {
   border: 2px solid var(--vp-c-brand-1);
 }
+.cta:hover {
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+}
+
+.watch-more {
+  text-align: end;
+  font-size: 0.8em;
+  background-color: var(--vp-code-block-bg);
+  border-radius: 0 0 1em 1em;
+  padding-right: 1em;
+}
+
+.watch-more img {
+  height: 1em;
+  display: inline-block;
+  /* vertical-align: middle; */
+}
 
-.mp a {
+.cta {
+  font-size: inherit;
   color: var(--c-text);
   position: relative;
   display: flex;
@@ -51,10 +130,10 @@ defineProps<{ href: string; title: string }>()
   justify-content: space-between;
   padding-left: 36px;
 }
-.mp a .content {
+.cta .content {
   flex-grow: 1;
 }
-.mp a:before {
+.cta:before {
   content: '';
   position: absolute;
   display: block;
@@ -65,10 +144,10 @@ defineProps<{ href: string; title: string }>()
   border-radius: 50%;
   background-color: var(--vp-c-brand-1);
 }
-html.dark .mp a:after {
+html.dark .cta:after {
   --play-icon-color: #000;
 }
-.mp a:after {
+.cta:after {
   content: '';
   position: absolute;
   display: block;
diff --git a/packages/docs/cookbook/testing.md b/packages/docs/cookbook/testing.md
index 74b6159a21..0127440a35 100644
--- a/packages/docs/cookbook/testing.md
+++ b/packages/docs/cookbook/testing.md
@@ -1,8 +1,8 @@
 # Testing stores
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/introduction-to-testing-stores"
-  title="Learn how to test stores"
+  href="https://play.gumlet.io/embed/65f9a9c10bfab01f414c25dc"
+  title="Watch a free video of Mastering Pinia about testing stores"
 />
 
 Stores will, by design, be used at many places and can make testing much harder than it should be. Fortunately, this doesn't have to be the case. We need to take care of three things when testing stores:
@@ -65,6 +65,13 @@ beforeEach(() => {
 
 ## Unit testing components
 
+<!-- NOTE: too long maybe but good value -->
+<!-- <MasteringPiniaLink
+  href="https://play.gumlet.io/embed/6630f540c418f8419b73b2b2?t1=1715867840&t2=1715867570609?preload=false&autoplay=false&loop=false&disable_player_controls=false"
+  title="Watch a free video of Mastering Pinia about testing stores"
+/> -->
+
+
 This can be achieved with `createTestingPinia()`, which returns a pinia instance designed to help unit tests components.
 
 Start by installing `@pinia/testing`:
diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md
index 0d6dc7e913..7ce1466acd 100644
--- a/packages/docs/core-concepts/index.md
+++ b/packages/docs/core-concepts/index.md
@@ -6,7 +6,8 @@
 /> -->
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/quick-start-with-pinia"
+  href="https://play.gumlet.io/embed/651ecff2e4c322668b0a17af"
+  mp-link="https://masteringpinia.com/lessons/quick-start-with-pinia"
   title="Get started with Pinia"
 />
 
diff --git a/packages/docs/core-concepts/outside-component-usage.md b/packages/docs/core-concepts/outside-component-usage.md
index 12f766fe21..e815922092 100644
--- a/packages/docs/core-concepts/outside-component-usage.md
+++ b/packages/docs/core-concepts/outside-component-usage.md
@@ -1,7 +1,8 @@
 # Using a store outside of a component
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/how-does-usestore-work"
+  href="https://play.gumlet.io/embed/651ed1ec4c2f339c6860fd06"
+  mp-link="https://masteringpinia.com/lessons/how-does-usestore-work"
   title="Using stores outside of components"
 />
 
diff --git a/packages/docs/introduction.md b/packages/docs/introduction.md
index c5e085c8f1..62eb986b7e 100644
--- a/packages/docs/introduction.md
+++ b/packages/docs/introduction.md
@@ -6,7 +6,8 @@
 /> -->
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
+  href="https://play.gumlet.io/embed/651ecf274c2f339c6860e36b"
+  mp-link="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
   title="Create your own Pinia from scratch"
 />
 
diff --git a/packages/docs/zh/cookbook/testing.md b/packages/docs/zh/cookbook/testing.md
index a05ab9b19d..ee8c108a78 100644
--- a/packages/docs/zh/cookbook/testing.md
+++ b/packages/docs/zh/cookbook/testing.md
@@ -1,8 +1,8 @@
 # store 测试 %{#testing-stores}%
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/introduction-to-testing-stores"
-  title="Learn how to test stores"
+  href="https://play.gumlet.io/embed/65f9a9c10bfab01f414c25dc"
+  title="Watch a free video of Mastering Pinia about testing stores"
 />
 
 从设计上来说，许多地方都会使用 store，所以可能比正常情况更难测试。但幸运的是，这不一定是真的。在测试 store 时，我们需要注意三件事：
diff --git a/packages/docs/zh/core-concepts/index.md b/packages/docs/zh/core-concepts/index.md
index 15b7e50e5f..1845a500dc 100644
--- a/packages/docs/zh/core-concepts/index.md
+++ b/packages/docs/zh/core-concepts/index.md
@@ -6,7 +6,8 @@
 /> -->
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/quick-start-with-pinia"
+  href="https://play.gumlet.io/embed/651ecff2e4c322668b0a17af"
+  mp-link="https://masteringpinia.com/lessons/quick-start-with-pinia"
   title="Get started with Pinia"
 />
 
diff --git a/packages/docs/zh/core-concepts/outside-component-usage.md b/packages/docs/zh/core-concepts/outside-component-usage.md
index 2a699743b8..62bf9be5e4 100644
--- a/packages/docs/zh/core-concepts/outside-component-usage.md
+++ b/packages/docs/zh/core-concepts/outside-component-usage.md
@@ -1,7 +1,8 @@
 # 在组件外使用 store %{#using-a-store-outside-of-a-component}%
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/how-does-usestore-work"
+  href="https://play.gumlet.io/embed/651ed1ec4c2f339c6860fd06"
+  mp-link="https://masteringpinia.com/lessons/how-does-usestore-work"
   title="Using stores outside of components"
 />
 
diff --git a/packages/docs/zh/introduction.md b/packages/docs/zh/introduction.md
index f91c2c3feb..a5f10ac8c4 100644
--- a/packages/docs/zh/introduction.md
+++ b/packages/docs/zh/introduction.md
@@ -6,7 +6,8 @@
 /> -->
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
+  href="https://play.gumlet.io/embed/651ecf274c2f339c6860e36b"
+  mp-link="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
   title="Create your own Pinia from scratch"
 />