diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 6b18301c..7b544e12 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -71,6 +71,7 @@ declare module 'vue' {
NotPermitted: typeof import('./src/components/NotPermitted.vue')['default']
PageModal: typeof import('./src/components/Modals/PageModal.vue')['default']
PaymentSettings: typeof import('./src/components/PaymentSettings.vue')['default']
+ Play: typeof import('./src/components/Icons/Play.vue')['default']
ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
Question: typeof import('./src/components/Modals/Question.vue')['default']
Quiz: typeof import('./src/components/Quiz.vue')['default']
diff --git a/frontend/package.json b/frontend/package.json
index 7990f221..e23e4b5a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,12 +31,14 @@
"lucide-vue-next": "^0.383.0",
"markdown-it": "^14.0.0",
"pinia": "^2.0.33",
+ "plyr": "^3.7.8",
"socket.io-client": "^4.7.2",
"tailwindcss": "3.4.15",
"typescript": "^5.7.2",
"vue": "^3.4.23",
"vue-chartjs": "^5.3.0",
"vue-draggable-next": "^2.2.1",
+ "vue-plyr": "^7.0.0",
"vue-router": "^4.0.12",
"vue3-apexcharts": "^1.8.0",
"vuedraggable": "4.1.0"
diff --git a/frontend/src/components/Icons/Play.vue b/frontend/src/components/Icons/Play.vue
new file mode 100644
index 00000000..b391ff66
--- /dev/null
+++ b/frontend/src/components/Icons/Play.vue
@@ -0,0 +1,16 @@
+
+
+
diff --git a/frontend/src/components/VideoBlock.vue b/frontend/src/components/VideoBlock.vue
index fd4416af..618d8830 100644
--- a/frontend/src/components/VideoBlock.vue
+++ b/frontend/src/components/VideoBlock.vue
@@ -1,32 +1,53 @@
-