diff --git a/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.blade.php b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.blade.php
new file mode 100644
index 0000000..adccf1f
--- /dev/null
+++ b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.blade.php
@@ -0,0 +1,17 @@
+<section class='AutoPlayClips'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{getSetting($data->area->name.'_'.$data->part.'_title')}}
+        </h1>
+        <div class="autoplay-clip-list">
+        @foreach(\App\Models\Clip::where('status',1)->get() as $clip)
+            <div class="autoplay-clip-item">
+                <a href="{{$clip->webUrl()}}">
+                    <video src="{{$clip->fileUrl()}}" poster="{{$clip->imgUrl()}}" muted ></video>
+                </a>
+{{--                <img src="{{$clip->imgUrl()}}" alt="">--}}
+            </div>
+        @endforeach
+        </div>
+    </div>
+</section>
diff --git a/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.js b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.js
new file mode 100644
index 0000000..244bcd7
--- /dev/null
+++ b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.js
@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.autoplay-clip-item').forEach(function (el) {
+        el.addEventListener('mouseenter', function () {
+            try {
+                this.querySelector('video').play();
+            } catch {
+            }
+
+        });
+        el.addEventListener('mouseleave', function () {
+            try {
+                this.querySelector('video').pause();
+            } catch {
+            }
+        });
+    });
+});
diff --git a/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.json b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.json
new file mode 100644
index 0000000..463c97e
--- /dev/null
+++ b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.json
@@ -0,0 +1,10 @@
+{
+    "name": "AutoPlayClips",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}
\ No newline at end of file
diff --git a/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.php b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.php
new file mode 100644
index 0000000..8bced5a
--- /dev/null
+++ b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+use App\Models\Setting;
+
+class AutoPlayClips
+{
+    public static function onAdd(Part $part = null)
+    {
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area->name . '_' . $part->part.'_title';
+        $setting->value = "Clips list";
+        $setting->type = 'text';
+        $setting->size = 6;
+        $setting->title =  $part->area->name . ' ' . $part->part;
+        $setting->save();
+    }
+    public static function onRemove(Part $part = null)
+    {
+        Setting::where('key',$part->area->name . '_' . $part->part.'_title')->first()?->delete();
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}
diff --git a/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.scss b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.scss
new file mode 100644
index 0000000..6f9d8e9
--- /dev/null
+++ b/resources/views/segments/clips/AutoPlayClips/AutoPlayClips.scss
@@ -0,0 +1,27 @@
+.AutoPlayClips {
+    padding: 2rem 0;
+
+    h1 {
+        font-size: 27px;
+        font-weight: 400;
+    }
+
+    .autoplay-clip-list {
+        display: flex;
+        column-gap: .5rem;
+    }
+
+    .autoplay-clip-item {
+        transition: 700ms;
+        flex: 1;
+        video,img {
+            width: 100%;
+            border-radius: var(--xshop-border-radius);
+            height: 300px;
+            object-fit: cover;
+        }
+        &:hover{
+            flex-grow: 2;
+        }
+    }
+}
diff --git a/resources/views/segments/clips/AutoPlayClips/screenshot.png b/resources/views/segments/clips/AutoPlayClips/screenshot.png
new file mode 100644
index 0000000..e2a688c
Binary files /dev/null and b/resources/views/segments/clips/AutoPlayClips/screenshot.png differ