{"id":4747,"date":"2025-09-24T11:53:25","date_gmt":"2025-09-24T11:53:25","guid":{"rendered":"https:\/\/president.govmu.org\/president\/?page_id=4747"},"modified":"2025-09-25T04:29:02","modified_gmt":"2025-09-25T04:29:02","slug":"video-gallery","status":"publish","type":"page","link":"https:\/\/president.govmu.org\/president\/gallery\/video-gallery\/","title":{"rendered":"Video Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4747\" class=\"elementor elementor-4747\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6bd48dd e-flex e-con-boxed e-con e-parent\" data-id=\"6bd48dd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-750ef7c elementor-widget elementor-widget-heading\" data-id=\"750ef7c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Video Gallery<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19f23f0 e-flex e-con-boxed e-con e-parent\" data-id=\"19f23f0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d0d38d elementor-widget elementor-widget-text-editor\" data-id=\"8d0d38d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Discover moments that reflect the vision, leadership, and engagements of the Office of President of the Republic of Mauritius.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cd5e0f8 e-flex e-con-boxed e-con e-parent\" data-id=\"cd5e0f8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f976d3b elementor-widget elementor-widget-html\" data-id=\"f976d3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  :root {\r\n    --gap: 3rem; \/* space between cards *\/\r\n    --radius: 16px;\r\n    --shadow: 0 10px 25px rgba(0,0,0,.12);\r\n  }\r\n\r\n   .video-gallery {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr); \/* exactly 2 per row *\/\r\n    gap: 2rem;             \/* this now shows clearly *\/\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 2rem 1rem;\r\n}\r\n\r\n\r\n  .video-card {\r\n    position: relative;\r\n    border-radius: var(--radius);\r\n    overflow: hidden;\r\n    box-shadow: var(--shadow);\r\n    background: #0b1220;\r\n    cursor: pointer;\r\n    isolation: isolate;\r\n    outline: none;\r\n  }\r\n\r\n  .thumb-wrap {\r\n    position: relative;\r\n    aspect-ratio: 16 \/ 9;\r\n    background: #111;\r\n  }\r\n  .thumb-wrap img.thumb {\r\n    width: 100%; height: 100%; object-fit: cover; display: block;\r\n    filter: brightness(.9) contrast(1.05);\r\n    transition: transform .5s ease, filter .5s ease;\r\n  }\r\n  .video-card:hover img.thumb { transform: scale(1.03); filter: brightness(1); }\r\n\r\n  \/* Hover-preview container (iframe\/video injected here) *\/\r\n  .hover-play {\r\n    position: absolute; inset: 0; display: none; pointer-events: none;\r\n  }\r\n  .video-card.hovering .hover-play { display: block; }\r\n  .hover-play iframe, .hover-play video { width:100%; height:100%; border:0; }\r\n\r\n  \/* Play badge *\/\r\n  .play-badge {\r\n    position: absolute; inset: auto 1rem 1rem auto;\r\n    background: rgba(0,0,0,.65);\r\n    color: #fff;\r\n    display: inline-flex; align-items:center; gap:.5rem;\r\n    padding: .4rem .6rem; border-radius: 999px; font: 500 13px\/1.2 system-ui,Segoe UI,Roboto,Ubuntu;\r\n    backdrop-filter: blur(6px);\r\n    transition: transform .2s ease, opacity .2s ease;\r\n  }\r\n  .video-card:hover .play-badge { transform: translateY(-2px); opacity: .95; }\r\n  .play-icon { width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }\r\n\r\n  .meta { padding: .8rem 1rem 1rem; color: #eaf0ff; }\r\n  .title { font: 600 16px\/1.3 system-ui,Segoe UI,Roboto,Ubuntu; margin: 0 0 .25rem; }\r\n  .kicker { font: 12px\/1.2 system-ui,Segoe UI,Roboto,Ubuntu; opacity: .75; }\r\n\r\n  \/* Lightbox *\/\r\n  .vg-lightbox { position: fixed; inset: 0; display: none; place-items: center; background: rgba(6,10,22,.85); z-index: 99999; }\r\n  .vg-lightbox.open { display: grid; }\r\n  .vg-dialog { width: min(96vw, 1000px); aspect-ratio: 16\/9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); position: relative; }\r\n  .vg-dialog iframe, .vg-dialog video { width:100%; height:100%; border:0; display:block; }\r\n  .vg-close { position: absolute; top: .6rem; right: .6rem; width: 40px; height: 40px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; display:grid; place-items:center; font-size: 22px; cursor: pointer; border: 1px solid rgba(255,255,255,.18); }\r\n  .vg-close:hover { background: rgba(0,0,0,.8); }\r\n<\/style>\r\n\r\n<section class=\"video-gallery\" aria-label=\"Presidential Video Gallery\">\r\n  <!-- YOUTUBE CARD (full URL or plain ID in data-video-id) -->\r\n  <article class=\"video-card\"\r\n    data-video-type=\"youtube\"\r\n    data-video-id=\"https:\/\/www.youtube.com\/watch?v=sx6Qoa7FgR4&si=rtUWKuP4YCBbftxm\"\r\n    data-title=\"Ayurvedic Garden- Ayurveda Marigolds Curry Leaves Stevia\"\r\n    tabindex=\"0\" role=\"button\" aria-label=\"Play Ayurvedic Garden video\">\r\n    <div class=\"thumb-wrap\">\r\n      <img decoding=\"async\" class=\"thumb\" loading=\"lazy\"\r\n           src=\"https:\/\/president.govmu.org\/president\/wp-content\/uploads\/2025\/09\/1.-Radhakeesoon-thumnail.png\"\r\n           alt=\"Ayurvedic Garden- Ayurveda Marigolds Curry Leaves Stevia\">\r\n      <div class=\"hover-play\" aria-hidden=\"true\"><\/div>\r\n      <div class=\"play-badge\"><span class=\"play-icon\" aria-hidden=\"true\"><\/span><span>Play<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"meta\">\r\n      <h3 class=\"title\">Ayurvedic Garden- Ayurveda Marigolds Curry Leaves Stevia<\/h3>\r\n      <p class=\"kicker\">Saver Kiltirel-Dr Comalchandra Radhakessoon \u2022 30:01<\/p>\r\n    <\/div>\r\n  <\/article>\r\n\r\n  <article class=\"video-card\"\r\n    data-video-type=\"youtube\"\r\n    data-video-id=\"https:\/\/youtu.be\/sgVIGRpnDHU?si=87rr_Mwxo6D6U5d4\"\r\n    data-title=\"Jardin Medicinale Ayurvedic au Chateau de R\u00e9duit\"\r\n    tabindex=\"0\" role=\"button\" aria-label=\"Play Jardin Medicinale video\">\r\n    <div class=\"thumb-wrap\">\r\n      <img decoding=\"async\" class=\"thumb\" loading=\"lazy\"\r\n           src=\"https:\/\/president.govmu.org\/president\/wp-content\/uploads\/2025\/09\/2.-Radhakeesoon-thumnail.png\"\r\n           alt=\"Jardin Medicinale Ayurvedic au Chateau de R\u00e9duit\">\r\n      <div class=\"hover-play\" aria-hidden=\"true\"><\/div>\r\n      <div class=\"play-badge\"><span class=\"play-icon\" aria-hidden=\"true\"><\/span><span>Play<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"meta\">\r\n      <h3 class=\"title\">Jardin Medicinale Ayurvedic au Chateau de R\u00e9duit<\/h3>\r\n      <p class=\"kicker\">Saver Kiltirel \u2022 22:51<\/p>\r\n    <\/div>\r\n  <\/article>\r\n<\/section>\r\n\r\n<!-- LIGHTBOX ROOT -->\r\n<div class=\"vg-lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Video player\">\r\n  <div class=\"vg-dialog\">\r\n    <button class=\"vg-close\" aria-label=\"Close video\">\u00d7<\/button>\r\n    <!-- Player injected here -->\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const gallery  = document.querySelector('.video-gallery');\r\n  const lightbox = document.querySelector('.vg-lightbox');\r\n  const dialog   = document.querySelector('.vg-dialog');\r\n  const closeBtn = document.querySelector('.vg-close');\r\n\r\n  \/\/ If theme moves markup, ensure lightbox is in <body> so it's not clipped\r\n  if (lightbox && lightbox.parentElement !== document.body) {\r\n    document.body.appendChild(lightbox);\r\n  }\r\n\r\n  \/\/ Normalize YouTube input: accept full URL (watch|youtu.be) or raw ID; strip queries like ?si=...\r\n  function normalizeYouTubeId(raw){\r\n    if (!raw) return '';\r\n    raw = String(raw).trim();\r\n    try {\r\n      if (raw.includes('youtube.com') || raw.includes('youtu.be')) {\r\n        const u = new URL(raw, window.location.origin);\r\n        if (u.hostname.includes('youtu.be')) {\r\n          return (u.pathname.replace('\/', '') || '').split('?')[0];\r\n        }\r\n        const v = u.searchParams.get('v');\r\n        if (v) return v.split('&')[0];\r\n        const seg = u.pathname.split('\/').filter(Boolean).pop() || '';\r\n        return seg.split('?')[0];\r\n      }\r\n      return raw.split('?')[0].split('&')[0];\r\n    } catch {\r\n      return raw.split('?')[0].split('&')[0];\r\n    }\r\n  }\r\n\r\n  function ytURL(id, opts={}){\r\n    const p = new URLSearchParams({\r\n      autoplay: opts.autoplay ? 1 : 0,\r\n      mute:     opts.mute     ? 1 : 0,\r\n      controls: opts.controls ? 1 : 0,\r\n      playsinline: 1,\r\n      rel: 0,\r\n      modestbranding: 1\r\n    });\r\n    return `https:\/\/www.youtube.com\/embed\/${id}?${p.toString()}`;\r\n  }\r\n\r\n  function startHover(card){\r\n    if (card.classList.contains('hovering')) return;\r\n    card.classList.add('hovering');\r\n    const host = card.querySelector('.hover-play');\r\n    if (!host) return;\r\n\r\n    const type = card.dataset.videoType;\r\n    if (type === 'youtube'){\r\n      const id = normalizeYouTubeId(card.dataset.videoId);\r\n      if (!id) return;\r\n      const iframe = document.createElement('iframe');\r\n      iframe.allow = 'autoplay; encrypted-media; picture-in-picture';\r\n      iframe.src   = ytURL(id, { autoplay: 1, mute: 1, controls: 0 });\r\n      host.appendChild(iframe);\r\n    } else if (type === 'mp4'){\r\n      const src = (card.dataset.videoSrc || '').trim();\r\n      if (!src) return;\r\n      const vid = document.createElement('video');\r\n      vid.src = src; vid.muted = true; vid.playsInline = true; vid.autoplay = true; vid.loop = true;\r\n      host.appendChild(vid);\r\n    }\r\n  }\r\n\r\n  function stopHover(card){\r\n    card.classList.remove('hovering');\r\n    const host = card.querySelector('.hover-play');\r\n    if (host) host.innerHTML = '';\r\n  }\r\n\r\n  function openLightbox(card){\r\n    \/\/ remove hover preview to save CPU\r\n    stopHover(card);\r\n\r\n    const type  = card.dataset.videoType;\r\n    const title = card.dataset.title || 'Video';\r\n\r\n    \/\/ Clear previous player\r\n    [...dialog.children].forEach(n => { if (!n.classList || !n.classList.contains('vg-close')) n.remove(); });\r\n\r\n    let player;\r\n    if (type === 'youtube'){\r\n      const id = normalizeYouTubeId(card.dataset.videoId);\r\n      if (!id) return;\r\n      player = document.createElement('iframe');\r\n      player.src   = ytURL(id, { autoplay: 1, mute: 0, controls: 1 });\r\n      player.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen';\r\n      player.title = title;\r\n    } else if (type === 'mp4'){\r\n      const src = (card.dataset.videoSrc || '').trim();\r\n      if (!src) return;\r\n      player = document.createElement('video');\r\n      player.src = src; player.controls = true; player.autoplay = true; player.playsInline = true;\r\n    } else {\r\n      return;\r\n    }\r\n\r\n    dialog.appendChild(player);\r\n    lightbox.classList.add('open');\r\n    document.documentElement.style.overflow = 'hidden';\r\n  }\r\n\r\n  function closeLightbox(){\r\n    lightbox.classList.remove('open');\r\n    document.documentElement.style.overflow = '';\r\n    [...dialog.children].forEach(n => { if (!n.classList || !n.classList.contains('vg-close')) n.remove(); });\r\n  }\r\n\r\n  \/\/ Bind per-card listeners (avoids delegation issues with margins\/overlays)\r\n  document.querySelectorAll('.video-card').forEach(card => {\r\n    card.addEventListener('mouseenter', () => startHover(card));\r\n    card.addEventListener('mouseleave', () => stopHover(card));\r\n    card.addEventListener('click',      (e) => { e.preventDefault(); openLightbox(card); });\r\n    \/\/ keyboard access\r\n    card.addEventListener('keydown',    (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openLightbox(card); }});\r\n  });\r\n\r\n  \/\/ Lightbox controls\r\n  closeBtn.addEventListener('click', closeLightbox);\r\n  lightbox.addEventListener('click', e => { if (e.target === lightbox) closeLightbox(); });\r\n  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox(); });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Video Gallery Discover moments that reflect the vision, leadership, and engagements of the Office of President of the Republic of Mauritius. Play Ayurvedic Garden- Ayurveda Marigolds Curry Leaves Stevia Saver Kiltirel-Dr Comalchandra Radhakessoon \u2022 30:01 Play Jardin Medicinale Ayurvedic au Chateau de R\u00e9duit Saver Kiltirel \u2022 22:51 \u00d7<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":1030,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"folder":[],"wf_page_folders":[],"class_list":["post-4747","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/pages\/4747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/comments?post=4747"}],"version-history":[{"count":43,"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/pages\/4747\/revisions"}],"predecessor-version":[{"id":4801,"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/pages\/4747\/revisions\/4801"}],"up":[{"embeddable":true,"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/pages\/1030"}],"wp:attachment":[{"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/media?parent=4747"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/folder?post=4747"},{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/president.govmu.org\/president\/wp-json\/wp\/v2\/wf_page_folders?post=4747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}