Add video card insert feature + MkDocs video hydration + fixes
- New video card block for GrapesJS landing pages, email templates, MkDocs export, and documentation editor Insert dropdown - Shared HTML generators in admin/src/utils/videoCardHtml.ts - MkDocs video-player.js hydrates .video-card-block elements: thumbnail fix via MEDIA_API_URL, click-to-play inline, Gallery link - Media API CORS: auto-add MkDocs + docs subdomain origins - env_config_hook.py: smart Docker hostname detection, ADMIN_PORT resolution, pass env vars to MkDocs container - Gallery URL uses /gallery?expanded=ID format - VideoPickerModal: fix double /api prefix and Docker hostname thumbs - Seed: default-video-card PageBlock - Remove V1 legacy code (influence/, map/) Bunker Admin
This commit is contained in:
@@ -102,14 +102,20 @@
|
||||
/* Responsive video containers */
|
||||
@media (max-width: 768px) {
|
||||
.video-block,
|
||||
.advanced-video-container {
|
||||
.advanced-video-container,
|
||||
.video-card-block {
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
|
||||
.video-block video,
|
||||
.advanced-video-container video {
|
||||
.advanced-video-container video,
|
||||
.video-card-player video {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.video-card-block {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Video placeholder (shown during GrapesJS export before hydration) */
|
||||
@@ -138,9 +144,45 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Video card block (YouTube-style preview card) */
|
||||
.video-card-block {
|
||||
margin: 2rem auto;
|
||||
max-width: 480px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.video-card-block:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.video-card-block a {
|
||||
text-decoration: none !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Video card gallery button */
|
||||
.video-card-gallery-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
/* Video card inline player (after clicking thumbnail) */
|
||||
.video-card-player video {
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.video-card-player video:focus {
|
||||
outline: 2px solid var(--md-primary-fg-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Ensure videos respect content width in Material theme */
|
||||
.md-content .video-block,
|
||||
.md-content .advanced-video-container {
|
||||
.md-content .advanced-video-container,
|
||||
.md-content .video-card-block {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user