Restore inline playback for release note videos

Author: phaupt

docs/.vitepress/config.mts

@@ -8,7 +8,6 @@ import { fileURLToPath } from 'node:url'
 const SITE_URL = 'https://docs.mobileid.ch'
 const DOCS_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..')
 const RELEASE_NOTES_POST_LAYOUT = 'release-notes-post'
-const RELEASE_NOTES_VIDEO_LAYOUT = 'release-notes-video'
 const SUPPORTED_LANGS = ['en', 'de', 'fr', 'it'] as const
 
 type SupportedLang = typeof SUPPORTED_LANGS[number]
@@ -190,15 +189,13 @@ export default withMermaid(defineConfig({
         ? toAbsoluteUrl(videoMeta.poster)
       : undefined
     const isReleaseNotesPost = pageData.frontmatter.layout === RELEASE_NOTES_POST_LAYOUT
-    const isReleaseNotesVideo = pageData.frontmatter.layout === RELEASE_NOTES_VIDEO_LAYOUT
-    const isReleaseNotesContent = isReleaseNotesPost || isReleaseNotesVideo
     const keywords = getFrontmatterKeywords(pageData.frontmatter)
     const head: HeadConfig[] = [
       ['link', { rel: 'canonical', href: canonicalUrl }],
       ['meta', { property: 'og:title', content: ogTitle }],
       ['meta', { property: 'og:description', content: ogDesc }],
       ['meta', { property: 'og:url', content: canonicalUrl }],
-      ['meta', { property: 'og:type', content: isReleaseNotesVideo ? 'video.other' : isReleaseNotesPost ? 'article' : 'website' }],
+      ['meta', { property: 'og:type', content: isReleaseNotesPost ? 'article' : 'website' }],
       ['meta', { property: 'og:locale', content: OG_LOCALE_BY_LANG[lang] }],
     ]
 
@@ -211,7 +208,7 @@ export default withMermaid(defineConfig({
       )
     }
 
-    if (isReleaseNotesContent) {
+    if (isReleaseNotesPost) {
       head.push(
         ['meta', { name: 'twitter:title', content: ogTitle }],
         ['meta', { name: 'twitter:description', content: ogDesc }],
@@ -294,7 +291,7 @@ export default withMermaid(defineConfig({
       ])
     }
 
-    if (isReleaseNotesVideo && videoMeta) {
+    if (videoMeta) {
       const uploadDate = videoMeta.uploadDate
         ?? (pageData.frontmatter.date ? new Date(pageData.frontmatter.date).toISOString() : undefined)
       const contentUrl = toAbsoluteUrl(videoMeta.src)

docs/.vitepress/theme/ReleaseNotesVideoLayout.vue

@@ -6,6 +6,7 @@ const props = defineProps({
   src: { type: String, required: true },
   poster: { type: String, default: '' },
   type: { type: String, default: 'video/mp4' },
+  linkText: { type: String, default: 'Open MP4' },
 })
 
 const videoRef = ref(null)
@@ -37,10 +38,14 @@ watch(() => route.path, reload)
     >
       <source :src="src" :type="type" />
       Your browser does not support the video element.
+      <a :href="src">Open the MP4 directly.</a>
     </video>
-    <div v-if="$slots.default" class="blog-video-caption">
-      <svg class="video-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
-      <span><slot /></span>
+    <div v-if="$slots.default || src" class="blog-video-caption">
+      <span v-if="$slots.default" class="blog-video-caption-main">
+        <svg class="video-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+        <span><slot /></span>
+      </span>
+      <a class="blog-video-link" :href="src" target="_blank" rel="noopener">{{ linkText }}</a>
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/VideoEmbed.vue

@@ -8,7 +8,6 @@ import specYaml from '../../public/openapi-mobileid.yaml?raw'
 import DocFeedback from './DocFeedback.vue'
 import ReleaseNotesLayout from './ReleaseNotesLayout.vue'
 import ReleaseNotesPostLayout from './ReleaseNotesPostLayout.vue'
-import ReleaseNotesVideoLayout from './ReleaseNotesVideoLayout.vue'
 import './custom.css'
 import './release-notes.css'
 
@@ -24,7 +23,6 @@ export default {
   async enhanceApp({ app }) {
     app.component('release-notes-index', ReleaseNotesLayout)
     app.component('release-notes-post', ReleaseNotesPostLayout)
-    app.component('release-notes-video', ReleaseNotesVideoLayout)
 
     useOpenapi({
       spec: specYaml,

docs/.vitepress/theme/components/VideoWatchCard.vue

@@ -355,7 +355,16 @@ html.dark .rn-sidebar-nav .rn-sidebar-link.is-active::before {
   color: var(--vp-c-text-2);
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 0.75em;
+  flex-wrap: wrap;
+}
+
+.blog-video-caption-main {
+  display: inline-flex;
+  align-items: center;
   gap: 0.5em;
+  min-width: 0;
 }
 
 .blog-video-caption .video-icon {
@@ -365,101 +374,18 @@ html.dark .rn-sidebar-nav .rn-sidebar-link.is-active::before {
   opacity: 0.6;
 }
 
-.blog-video-card {
-  display: block;
-  margin: 2em 0;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  overflow: hidden;
-  background: var(--vp-c-bg-soft);
-  color: inherit;
-  text-decoration: none;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-}
-
-.blog-video-card:hover {
-  border-color: var(--vp-c-brand-3);
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
-}
-
-.dark .blog-video-card {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
-}
-
-.dark .blog-video-card:hover {
-  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
-}
-
-.blog-video-card-media {
-  position: relative;
-  display: block;
-  background: #0f172a;
-}
-
-.blog-video-card-media img {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-.blog-video-card-play {
-  position: absolute;
-  left: 20px;
-  bottom: 20px;
+.blog-video-link {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-  border-radius: 999px;
-  background: rgba(0, 72, 68, 0.92);
-  color: #fff;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
-}
-
-.dark .blog-video-card-play {
-  background: rgba(45, 212, 176, 0.92);
-  color: #111827;
-}
-
-.blog-video-card-play svg {
-  width: 26px;
-  height: 26px;
-  margin-left: 2px;
-}
-
-.blog-video-card-body {
-  display: block;
-  padding: 16px 20px 20px;
-}
-
-.blog-video-card-kicker {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  gap: 0.35em;
+  flex-shrink: 0;
   color: var(--vp-c-brand-3);
-}
-
-.blog-video-card-title {
-  display: block;
-  font-family: var(--vp-font-family-heading);
-  font-size: 1.1rem;
   font-weight: 600;
-  line-height: 1.35;
-  color: var(--vp-c-text-1);
+  text-decoration: none;
 }
 
-.blog-video-card-text {
-  display: block;
-  margin-top: 8px;
-  font-size: 0.95rem;
-  line-height: 1.6;
-  color: var(--vp-c-text-2);
+.blog-video-link:hover {
+  text-decoration: underline;
 }
 
 /* Step list blocks */

docs/.vitepress/theme/index.js

@@ -17,14 +17,21 @@ keywords:
   - VPN MFA
 readingTime: 10
 layout: release-notes-post
+video:
+  title: "Mobile ID und Microsoft Entra ID: Stärkere MFA mit External Authentication"
+  description: "Kurzes Erklaervideo dazu, wie Mobile ID mit Microsoft Entra External MFA zusammenspielt."
+  src: /release-notes/media/entra-external-mfa-explainer.mp4
+  poster: /release-notes/img/entra-eam-thumb.png
+  duration: PT6M43S
+  uploadDate: 2026-03-27T00:00:00.000Z
 ---
 
 <script setup>
 import EntraIntegrationFlow from '../../.vitepress/theme/components/EntraIntegrationFlow.vue'
 import EntraUseCaseCards from '../../.vitepress/theme/components/EntraUseCaseCards.vue'
 import EntraMigrationTimeline from '../../.vitepress/theme/components/EntraMigrationTimeline.vue'
 import LanguageSwitcher from '../../.vitepress/theme/components/LanguageSwitcher.vue'
-import VideoWatchCard from '../../.vitepress/theme/components/VideoWatchCard.vue'
+import VideoEmbed from '../../.vitepress/theme/components/VideoEmbed.vue'
 </script>
 
 <LanguageSwitcher />
@@ -33,14 +40,9 @@ import VideoWatchCard from '../../.vitepress/theme/components/VideoWatchCard.vue
 Microsoft Entra ID ist die Identitätsplattform hinter Millionen von Unternehmensumgebungen. Mit der <strong>allgemeinen Verfügbarkeit von External MFA</strong> können Organisationen einen vertrauenswürdigen externen Authentisierungsanbieter in Entra ID einbinden und behalten dabei die volle Kontrolle über Conditional Access Policies. Mobile ID, betrieben von Swisscom, kombiniert <a href="/rest-api-guide/introduction#mobile-id-sim---method">hardwaregestützte SIM-Authentisierung</a>, <a href="/rest-api-guide/introduction#mobile-id-app---method">App-basiertes Push</a>, gemeinsame Controls wie Number Matching und Transaction Signing, differenzierte Geofencing-Optionen und ein breiteres OIDC-Ecosystem, das inzwischen auch <a href="/oidc-integration-guide/passkey-authentication">Mobile ID Passkeys</a> umfasst. Im Entra-External-MFA-Ablauf konsumiert Entra das Provider-Ergebnis, während Mobile ID das Second-Factor-Erlebnis ausführt.
 </div>
 
-<VideoWatchCard
-  href="/release-notes/videos/2026-03-27-mobile-id-entra-external-mfa-explainer.de.html"
-  poster="/release-notes/img/entra-eam-thumb.png"
-  label="Erklaervideo ansehen"
-  title="Mobile ID und Microsoft Entra ID: Stärkere MFA mit External Authentication"
->
+<VideoEmbed src="/release-notes/media/entra-external-mfa-explainer.mp4" poster="/release-notes/img/entra-eam-thumb.png" link-text="MP4 öffnen">
   Kurzes Erklaervideo dazu, wie Mobile ID mit Microsoft Entra External MFA zusammenspielt.
-</VideoWatchCard>
+</VideoEmbed>
 
 ## Was ist Microsoft Entra External MFA?
 

docs/.vitepress/theme/release-notes.css

@@ -17,14 +17,21 @@ keywords:
   - MFA VPN
 readingTime: 10
 layout: release-notes-post
+video:
+  title: "Mobile ID et Microsoft Entra ID : un MFA renforcé avec External Authentication"
+  description: "Courte vidéo explicative montrant comment Mobile ID s'intègre à Microsoft Entra External MFA."
+  src: /release-notes/media/entra-external-mfa-explainer.mp4
+  poster: /release-notes/img/entra-eam-thumb.png
+  duration: PT6M43S
+  uploadDate: 2026-03-27T00:00:00.000Z
 ---
 
 <script setup>
 import EntraIntegrationFlow from '../../.vitepress/theme/components/EntraIntegrationFlow.vue'
 import EntraUseCaseCards from '../../.vitepress/theme/components/EntraUseCaseCards.vue'
 import EntraMigrationTimeline from '../../.vitepress/theme/components/EntraMigrationTimeline.vue'
 import LanguageSwitcher from '../../.vitepress/theme/components/LanguageSwitcher.vue'
-import VideoWatchCard from '../../.vitepress/theme/components/VideoWatchCard.vue'
+import VideoEmbed from '../../.vitepress/theme/components/VideoEmbed.vue'
 </script>
 
 <LanguageSwitcher />
@@ -33,14 +40,9 @@ import VideoWatchCard from '../../.vitepress/theme/components/VideoWatchCard.vue
 Microsoft Entra ID est la plateforme d'identité utilisée par des millions d'environnements d'entreprise. Avec <strong>External MFA désormais disponible en version générale</strong>, les organisations peuvent intégrer un fournisseur d'authentification tiers de confiance dans Entra ID tout en conservant le contrôle total sur les politiques Conditional Access. Mobile ID, opéré par Swisscom, combine l'<a href="/rest-api-guide/introduction#mobile-id-sim---method">authentification matérielle via la SIM</a>, l'<a href="/rest-api-guide/introduction#mobile-id-app---method">authentification push via l'App</a>, des contrôles partagés tels que le Number Matching et le Transaction Signing, des options de geofencing différenciées et un écosystème OIDC plus large qui inclut désormais les <a href="/oidc-integration-guide/passkey-authentication">Mobile ID Passkeys</a>. Dans le parcours Entra External MFA, Entra consomme le résultat du fournisseur tandis que Mobile ID exécute l'expérience de second facteur.
 </div>
 
-<VideoWatchCard
-  href="/release-notes/videos/2026-03-27-mobile-id-entra-external-mfa-explainer.fr.html"
-  poster="/release-notes/img/entra-eam-thumb.png"
-  label="Regarder la vidéo explicative"
-  title="Mobile ID et Microsoft Entra ID : un MFA renforcé avec External Authentication"
->
+<VideoEmbed src="/release-notes/media/entra-external-mfa-explainer.mp4" poster="/release-notes/img/entra-eam-thumb.png" link-text="Ouvrir le MP4">
   Courte vidéo explicative montrant comment Mobile ID s'intègre à Microsoft Entra External MFA.
-</VideoWatchCard>
+</VideoEmbed>
 
 ## Qu'est-ce que Microsoft Entra External MFA ?