alexencom/Olapka-ru
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add video player

Browse Source
This commit is contained in:
alexencom committed 2026-10-30 22:31:58 +03:00
1 parent edc022c895
commit e4988e9d67
9 files changed
+303 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

html/portfolio.html
+51 -6
View File
@@ -74,7 +74,11 @@
<div class="portfolio-grid">
<article class="work-card" id="work-1">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Love Story</div>
<button class="work-video" type="button" data-video="video/video-1.webm" data-title="История Анны и Дмитрия" data-goal="video_open" aria-label="Смотреть видео: История Анны и Дмитрия">
<video class="work-video-preview" src="video/video-1.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
<span class="work-video-label">Love Story</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">💍 Love Story</span>
@@ -88,7 +92,11 @@
</article>
<article class="work-card" id="work-2">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Реклама студии</div>
<button class="work-video" type="button" data-video="video/video-2.webm" data-title="Рекламный ролик для детской массажной студии" data-goal="video_open" aria-label="Смотреть видео: Рекламный ролик для детской массажной студии">
<video class="work-video-preview" src="video/video-2.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
<span class="work-video-label">Реклама студии</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">🚀 Для бизнеса</span>
@@ -102,7 +110,11 @@
</article>
<article class="work-card" id="work-3">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Сказка для Миши</div>
<button class="work-video" type="button" data-video="video/video-3.webm" data-title="Миша и волшебный лес" data-goal="video_open" aria-label="Смотреть видео: Миша и волшебный лес">
<video class="work-video-preview" src="video/video-3.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
<span class="work-video-label">Сказка для Миши</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">🧸 Детская сказка</span>
@@ -116,7 +128,11 @@
</article>
<article class="work-card" id="work-4">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Подарок маме</div>
<button class="work-video" type="button" data-video="video/video-4.webm" data-title="Юбилей мамы — 55 лет" data-goal="video_open" aria-label="Смотреть видео: Юбилей мамы — 55 лет">
<video class="work-video-preview" src="video/video-4.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
<span class="work-video-label">Подарок маме</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">🎁 Подарок</span>
@@ -130,7 +146,11 @@
</article>
<article class="work-card" id="work-5">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Контент для блога</div>
<button class="work-video" type="button" data-video="video/video-5.webm" data-title="Серия Reels для эксперта по детскому сну" data-goal="video_open" aria-label="Смотреть видео: Серия Reels для эксперта по детскому сну">
<video class="work-video-preview" src="video/video-5.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
<span class="work-video-label">Контент для блога</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">📱 Для соцсетей</span>
@@ -144,7 +164,11 @@
</article>
<article class="work-card" id="work-6">
<div class="work-media">
<div class="work-placeholder">▶ Видео: Открытка</div>
<button class="work-video" type="button" data-video="video/video-6.webm" data-title="Поздравление с Новым годом для партнёров" data-goal="video_open" aria-label="Смотреть видео: Поздравление с Новым годом для партнёров">
<video class="work-video-preview" src="video/video-6.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
<span class="work-video-label">Открытка</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">✨ Короткий</span>
@@ -235,6 +259,27 @@
<div class="footer-bottom"><div class="container">© 2026 Студия мультфильмов О'ляпка</div></div>
</footer>
<!-- Видео-лайтбокс -->
<div class="video-modal" id="videoModal" role="dialog" aria-modal="true" aria-labelledby="videoModalTitle" aria-hidden="true">
<div class="video-modal-backdrop" data-video-close></div>
<div class="video-modal-dialog">
<div class="video-modal-bar">
<span class="video-modal-title" id="videoModalTitle"></span>
<div class="video-modal-actions">
<button class="video-modal-btn" type="button" id="videoModalFullscreen" aria-label="На весь экран" title="На весь экран">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="video-modal-btn" type="button" data-video-close aria-label="Закрыть" title="Закрыть (Esc)">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
</div>
<div class="video-modal-stage">
<video id="videoModalPlayer" controls playsinline preload="metadata"></video>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>