diff --git a/public/assets/card-columns-obsidian/filter-use.webm b/public/assets/card-columns-obsidian/filter-use.webm
new file mode 100644
index 0000000..ee953e1
Binary files /dev/null and b/public/assets/card-columns-obsidian/filter-use.webm differ
diff --git a/public/assets/card-columns-obsidian/filter-use.webp b/public/assets/card-columns-obsidian/filter-use.webp
index 851a61b..17dc333 100644
Binary files a/public/assets/card-columns-obsidian/filter-use.webp and b/public/assets/card-columns-obsidian/filter-use.webp differ
diff --git a/public/assets/card-columns-obsidian/overview.webp b/public/assets/card-columns-obsidian/overview.webp
index 179a4cd..b2738b4 100644
Binary files a/public/assets/card-columns-obsidian/overview.webp and b/public/assets/card-columns-obsidian/overview.webp differ
diff --git a/public/assets/card-columns-obsidian/view-configure.webm b/public/assets/card-columns-obsidian/view-configure.webm
new file mode 100644
index 0000000..e41e36b
Binary files /dev/null and b/public/assets/card-columns-obsidian/view-configure.webm differ
diff --git a/public/cases/card-columns-obsidian/index.html b/public/cases/card-columns-obsidian/index.html
index bb9f732..d9ef4f9 100644
--- a/public/cases/card-columns-obsidian/index.html
+++ b/public/cases/card-columns-obsidian/index.html
@@ -435,7 +435,7 @@
         </p>
 
         <figure class="case-media case-media--wide">
-          <img src="../../assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
+          <img src="../../assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2076" height="1288" loading="eager" decoding="async" data-image-viewer />
           <figcaption>Links: 196 результатов в режиме Columns</figcaption>
         </figure>
 
@@ -488,8 +488,13 @@
             пришлось бы закрывать его, чтобы проверить результат.
           </p>
           <figure class="case-media case-media--wide">
-            <img src="../../assets/card-columns-obsidian/filter-use.webp" alt="Теги-фильтры над колонками карточек Card Columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
-            <figcaption>Фильтры тегов остаются рядом с колонками</figcaption>
+            <div class="case-video-shell">
+              <video controls preload="metadata" playsinline poster="../../assets/card-columns-obsidian/filter-use.webp" aria-label="Демонстрация фильтрации тегов в Card Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+                <source src="../../assets/card-columns-obsidian/filter-use.webm" type="video/webm" />
+                Ваш браузер не поддерживает видео.
+              </video>
+            </div>
+            <figcaption>Фильтрация тегов: OR и AND</figcaption>
           </figure>
         </div>
 
@@ -533,7 +538,12 @@
             и обложки. Один вид подстраивается под разные базы, а не наоборот.
           </p>
           <figure class="case-media case-media--wide">
-            <img src="../../assets/card-columns-obsidian/view-configure.webp" alt="Экран настройки вида Columns" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
+            <div class="case-video-shell">
+              <video controls preload="metadata" playsinline poster="../../assets/card-columns-obsidian/view-configure.webp" aria-label="Демонстрация настроек вида Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+                <source src="../../assets/card-columns-obsidian/view-configure.webm" type="video/webm" />
+                Ваш браузер не поддерживает видео.
+              </video>
+            </div>
             <figcaption>Настройки вида Columns</figcaption>
           </figure>
         </div>
diff --git a/public/en/cases/card-columns-obsidian/index.html b/public/en/cases/card-columns-obsidian/index.html
index 0ed4eb5..08549cb 100644
--- a/public/en/cases/card-columns-obsidian/index.html
+++ b/public/en/cases/card-columns-obsidian/index.html
@@ -436,7 +436,7 @@
         </p>
 
         <figure class="case-media case-media--wide">
-          <img src="../../../assets/card-columns-obsidian/overview.webp" alt="An Obsidian links database grouped into Card Columns by tags" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
+          <img src="../../../assets/card-columns-obsidian/overview.webp" alt="An Obsidian links database grouped into Card Columns by tags" width="2076" height="1288" loading="eager" decoding="async" data-image-viewer />
           <figcaption>Links: 196 results in Columns view</figcaption>
         </figure>
 
@@ -489,8 +489,13 @@
             it just to check what changed.
           </p>
           <figure class="case-media case-media--wide">
-            <img src="../../../assets/card-columns-obsidian/filter-use.webp" alt="Tag filters above Card Columns cards and columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
-            <figcaption>Tag filters stay beside the columns</figcaption>
+            <div class="case-video-shell">
+              <video controls preload="metadata" playsinline poster="../../../assets/card-columns-obsidian/filter-use.webp" aria-label="Tag filtering demo in Card Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+                <source src="../../../assets/card-columns-obsidian/filter-use.webm" type="video/webm" />
+                Your browser does not support video.
+              </video>
+            </div>
+            <figcaption>Tag filtering: OR and AND</figcaption>
           </figure>
         </div>
 
@@ -532,7 +537,12 @@
             property chips, dates, and covers have their own controls. The view adapts to the database.
           </p>
           <figure class="case-media case-media--wide">
-            <img src="../../../assets/card-columns-obsidian/view-configure.webp" alt="Columns view configuration screen" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
+            <div class="case-video-shell">
+              <video controls preload="metadata" playsinline poster="../../../assets/card-columns-obsidian/view-configure.webp" aria-label="Columns view configuration demo" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+                <source src="../../../assets/card-columns-obsidian/view-configure.webm" type="video/webm" />
+                Your browser does not support video.
+              </video>
+            </div>
             <figcaption>Columns view settings</figcaption>
           </figure>
         </div>
diff --git a/src/pages/cases/card-columns-obsidian.en.html b/src/pages/cases/card-columns-obsidian.en.html
index 296a419..52dc41a 100644
--- a/src/pages/cases/card-columns-obsidian.en.html
+++ b/src/pages/cases/card-columns-obsidian.en.html
@@ -123,7 +123,7 @@
         </p>
 
         <figure class="case-media case-media--wide">
-          <img src="{{assetPrefix}}assets/card-columns-obsidian/overview.webp" alt="An Obsidian links database grouped into Card Columns by tags" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
+          <img src="{{assetPrefix}}assets/card-columns-obsidian/overview.webp" alt="An Obsidian links database grouped into Card Columns by tags" width="2076" height="1288" loading="eager" decoding="async" data-image-viewer />
           <figcaption>Links: 196 results in Columns view</figcaption>
         </figure>
 
@@ -176,8 +176,13 @@
             it just to check what changed.
           </p>
           <figure class="case-media case-media--wide">
-            <img src="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webp" alt="Tag filters above Card Columns cards and columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
-            <figcaption>Tag filters stay beside the columns</figcaption>
+            <div class="case-video-shell">
+              <video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webp" aria-label="Tag filtering demo in Card Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+                <source src="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webm" type="video/webm" />
+                Your browser does not support video.
+              </video>
+            </div>
+            <figcaption>Tag filtering: OR and AND</figcaption>
           </figure>
         </div>
 
@@ -219,7 +224,12 @@
             property chips, dates, and covers have their own controls. The view adapts to the database.
           </p>
           <figure class="case-media case-media--wide">
-            <img src="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webp" alt="Columns view configuration screen" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
+            <div class="case-video-shell">
+              <video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webp" aria-label="Columns view configuration demo" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+                <source src="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webm" type="video/webm" />
+                Your browser does not support video.
+              </video>
+            </div>
             <figcaption>Columns view settings</figcaption>
           </figure>
         </div>
diff --git a/src/pages/cases/card-columns-obsidian.html b/src/pages/cases/card-columns-obsidian.html
index 0b34728..0c8050a 100644
--- a/src/pages/cases/card-columns-obsidian.html
+++ b/src/pages/cases/card-columns-obsidian.html
@@ -122,7 +122,7 @@
         </p>
 
         <figure class="case-media case-media--wide">
-          <img src="{{assetPrefix}}assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
+          <img src="{{assetPrefix}}assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2076" height="1288" loading="eager" decoding="async" data-image-viewer />
           <figcaption>Links: 196 результатов в режиме Columns</figcaption>
         </figure>
 
@@ -175,8 +175,13 @@
             пришлось бы закрывать его, чтобы проверить результат.
           </p>
           <figure class="case-media case-media--wide">
-            <img src="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webp" alt="Теги-фильтры над колонками карточек Card Columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
-            <figcaption>Фильтры тегов остаются рядом с колонками</figcaption>
+            <div class="case-video-shell">
+              <video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webp" aria-label="Демонстрация фильтрации тегов в Card Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+                <source src="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webm" type="video/webm" />
+                Ваш браузер не поддерживает видео.
+              </video>
+            </div>
+            <figcaption>Фильтрация тегов: OR и AND</figcaption>
           </figure>
         </div>
 
@@ -220,7 +225,12 @@
             и обложки. Один вид подстраивается под разные базы, а не наоборот.
           </p>
           <figure class="case-media case-media--wide">
-            <img src="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webp" alt="Экран настройки вида Columns" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
+            <div class="case-video-shell">
+              <video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webp" aria-label="Демонстрация настроек вида Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+                <source src="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webm" type="video/webm" />
+                Ваш браузер не поддерживает видео.
+              </video>
+            </div>
             <figcaption>Настройки вида Columns</figcaption>
           </figure>
         </div>
diff --git a/texts/cases/card-columns-obsidian.md b/texts/cases/card-columns-obsidian.md
index d81574a..f746b88 100644
--- a/texts/cases/card-columns-obsidian.md
+++ b/texts/cases/card-columns-obsidian.md
@@ -59,11 +59,11 @@ Card Columns оставляет заметки в Bases, но меняет сп
 
 ## Медиа
 
-Изображения взяты из репозитория Card Columns и лежат в `public/assets/card-columns-obsidian/`:
+Скриншоты и скринкасты взяты из репозитория Card Columns и лежат в `public/assets/card-columns-obsidian/`:
 
-- `overview.webp` - обзор базы Links;
-- `filter-use.webp` - фильтрация тегами;
-- `view-configure.webp` - настройки вида.
+- `overview.webp` - обзор базы Links, обрезан по краям на 4 px;
+- `filter-use.webp` - постер фильтрации тегами, обрезан по краям на 4 px; `filter-use.webm` - демонстрация OR/AND;
+- `view-configure.webp` - постер настроек вида; `view-configure.webm` - демонстрация настроек.
 
 ## Источники фактуры