{"id":2313,"date":"2025-10-29T10:08:06","date_gmt":"2025-10-29T10:08:06","guid":{"rendered":"https:\/\/palcameroon.org\/?page_id=2313"},"modified":"2026-05-07T08:40:06","modified_gmt":"2026-05-07T08:40:06","slug":"videos","status":"publish","type":"page","link":"https:\/\/palcameroon.org\/fr\/videos\/","title":{"rendered":"AIDE VID\u00c9O"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2313\" class=\"elementor elementor-2313\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-5faf650 e-con-full e-flex e-con e-parent\" data-id=\"5faf650\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0893196 elementor-widget elementor-widget-html\" data-id=\"0893196\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- VIDEOS PAGE BANNER - PASTE THIS INTO WORDPRESS CODE EDITOR -->\r\n\r\n<style>\r\n    .page-header { \r\n        background: linear-gradient(135deg, #0054A6, #003d7a); \r\n        padding: 4rem 4%; \r\n        text-align: center; \r\n        color: white; \r\n    }\r\n\r\n    .page-header h1 { \r\n        font-size: 2.5rem; \r\n        font-weight: 700; \r\n        margin-bottom: 0.5rem; \r\n        color: white; \r\n    }\r\n\r\n    .page-header p { \r\n        font-size: 1.1rem; \r\n        opacity: 0.95; \r\n        color: white; \r\n    }\r\n\r\n    @media (max-width: 768px) { \r\n        .page-header h1 { font-size: 2rem; }\r\n        .page-header { padding: 3rem 2rem; }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"page-header\">\r\n    <h1>Training Video Library<\/h1>\r\n    <p>Access evidence-based clinical training videos in multiple languages for comprehensive respiratory care education.<\/p>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-e11da62 e-flex e-con-boxed e-con e-parent\" data-id=\"e11da62\" 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-c5dfcb5 elementor-widget elementor-widget-eael-advanced-search\" data-id=\"c5dfcb5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"eael-advanced-search.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"eael-adv-search-wrapper\">\n            <div id=\"eael-advanced-search-widget-c5dfcb5\" class=\"eael-advanced-search-widget\">\n                <form data-settings=\"{&quot;post_per_page&quot;:&quot;5&quot;,&quot;search_among_taxonomies&quot;:&quot;no&quot;,&quot;search_among_sku&quot;:&quot;no&quot;,&quot;show_popular_keyword&quot;:0,&quot;show_category&quot;:0,&quot;show_content_image&quot;:1,&quot;show_search_result_all_results&quot;:0,&quot;result_on_new_tab&quot;:&quot;no&quot;,&quot;show_product_price&quot;:&quot;&quot;,&quot;current_post_id&quot;:2313}\" method=\"POST\" name=\"eael-advanced-search-form-c5dfcb5\" class=\"eael-advanced-search-form eael-advanced-search-form-style-1\" action=\"\">\n                    <div class=\"eael-advanced-search-wrap\">\n                        <span class=\"eael-adv-search-loader\"><\/span>\n                        <span class=\"eael-adv-search-close\"><i class=\"fas fa-times\"><\/i><\/span>\n                        <span class=\"icon\"><i class=\"fas fa-search\"><\/i><\/span>\n\n                        <input type=\"text\"\n                               placeholder=\"Saisir le mot-cl\u00e9 de recherche\"\n                               class=\"eael-advanced-search\" autocomplete=\"off\" name=\"eael_advanced_search\">\n                    <\/div>\n\t\t\t\t\t                                            <button class=\"eael-advanced-search-button\">Search<\/button>\n                                    <input type=\"hidden\" name=\"trp-form-language\" value=\"fr\"\/><\/form>\n\n\t\t\t\t\n\t\t\t\t        <div class=\"eael-advanced-search-result\">\n            <div class=\"eael-advanced-search-popular-keyword\">\n\t\t\t\t<h4 class=\"eael-advanced-search-popular-keyword-text\">Popular Keywords<\/h4>                <div class=\"eael-popular-keyword-content\"><\/div>\n            <\/div>\n            <div class=\"eael-advanced-search-category\">\n\t\t\t\t<h4 class=\"eael-advanced-search-category-text\">Categories<\/h4>                <div class=\"eael-popular-category-content\"><\/div>\n            <\/div>\n\t\t\t<div class=\"eael-advanced-search-total-results-section\">\n\t\t\t\t\t\t\t<\/div>\n            <div class=\"eael-advanced-search-content eael-item-style-1\">\n            <\/div>\n            <div class=\"eael-advanced-search-not-found\">\n                <p>No Record Found<\/p><\/div>\n            <div class=\"eael-advanced-search-load-more\">\n\t\t\t\t<a \tclass=\"eael-advanced-search-load-more-button\"\n                \thref=\"#\">View All Results<\/a>\n            <\/div>\n        <\/div>\n\n\t\t <!-- Already escaped -->\n            <\/div>\n        <\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f885338 elementor-widget elementor-widget-html\" data-id=\"f885338\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n.video-lang-selector {\r\n    max-width: 1400px;\r\n    margin: 2rem auto 3rem;\r\n    padding: 2rem 4%;\r\n}\r\n\r\n.lang-selector-header {\r\n    text-align: center;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.lang-selector-header h3 {\r\n    font-size: 1.3rem;\r\n    color: #0f172a;\r\n    font-weight: 700;\r\n    margin: 0;\r\n}\r\n\r\n.lang-buttons-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n    gap: 1rem;\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.video-lang-btn {\r\n    padding: 1.2rem 2rem;\r\n    border: 2px solid #e2e8f0;\r\n    background: white;\r\n    color: #0f172a;\r\n    cursor: pointer;\r\n    font-size: 1rem;\r\n    border-radius: 12px;\r\n    font-weight: 600;\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    box-shadow: 0 2px 8px rgba(0,0,0,0.05);\r\n}\r\n\r\n.video-lang-btn:hover {\r\n    border-color: #0054A6;\r\n    color: #0054A6;\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 8px 20px rgba(0,84,166,0.15);\r\n}\r\n\r\n.video-lang-btn.active {\r\n    background: #ED1C24;\r\n    color: white;\r\n    border-color: #ED1C24;\r\n    box-shadow: 0 8px 25px rgba(237,28,36,0.3);\r\n}\r\n\r\n\/* Mobile responsive *\/\r\n@media (max-width: 768px) {\r\n    .lang-buttons-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n    \r\n    .video-lang-btn {\r\n        padding: 1rem 1.5rem;\r\n        font-size: 0.95rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"video-lang-selector\">\r\n    <div class=\"lang-selector-header\">\r\n        <h3>Select Video Language<\/h3>\r\n    <\/div>\r\n    <div class=\"lang-buttons-grid\">\r\n        <button class=\"video-lang-btn active\" onclick=\"switchLanguage('en')\" data-lang=\"en\">\r\n            English\r\n        <\/button>\r\n        <button class=\"video-lang-btn\" onclick=\"switchLanguage('fr')\" data-lang=\"fr\">\r\n            Fran\u00e7ais\r\n        <\/button>\r\n        <button class=\"video-lang-btn\" onclick=\"switchLanguage('ff')\" data-lang=\"ff\">\r\n            Fulfulde\r\n        <\/button>\r\n        <button class=\"video-lang-btn\" onclick=\"switchLanguage('pidgin')\" data-lang=\"pidgin\">\r\n            Pidgin\r\n        <\/button>\r\n    <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e389aa8 elementor-widget elementor-widget-html\" data-id=\"e389aa8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\r\n\/\/ Language display names\r\nvar languageNames = {\r\n    en: 'English',\r\n    fr: 'Fran\u00e7ais',\r\n    ff: 'Fulfulde',\r\n    pidgin: 'Pidgin'\r\n};\r\n\r\n\/\/ YOUR VIDEO DATABASE\r\nvar videoDatabase = [\r\n    {\r\n        \"video_id\": \"video_001\",\r\n        \"title_en\": \"Sputum Collection\",\r\n        \"title_fr\": \"Collection d'Expectorations\",\r\n        \"title_ff\": \"Jammude Sputum\",\r\n        \"title_pidgin\": \"How to Collect Sputum\",\r\n        \"url_en\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/09\/ENGLISH-Sputum-Collection-mobile.mp4\",\r\n        \"url_fr\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/09\/FRENCH-Sputum-Collection-mobile.mp4\",\r\n        \"url_ff\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/10\/VID-G-601-V1.0-FULFUDE-19-10-2023-Video-sur-le-prelevement-de-crachats.mp4\",\r\n        \"url_pidgin\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/11\/VID-G-601-V1.0-PIDGIN-19-10-2023-Sputum-collection-video-1.mp4\"\r\n    },\r\n    {\r\n        \"video_id\": \"video_002\",\r\n        \"title_en\": \"LF ECO Instructions\",\r\n        \"title_fr\": \"Instructions LF ECO\",\r\n        \"title_ff\": \"LF ECO (Fulfulde)\",\r\n        \"title_pidgin\": \"LF ECO Instructions\",\r\n        \"url_en\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/10\/VID-FC-601-EN-22-10-25-Lung-Flute-Eco-Introductory-video.mp4\",\r\n        \"url_fr\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/09\/LF-ECO-instructions-French.mp4\",\r\n        \"url_ff\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/10\/VID-FC-601-Fulfulde-22-10-25-Lung-flute-ECO-Introductory-Video.mp4\",\r\n        \"url_pidgin\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/10\/VID-FC-601-PIDGIN-22-10-25-Lung-Flute-Eco-Introductory-video.mp4\"\r\n    },\r\n    {\r\n        \"video_id\": \"video_003\",\r\n        \"title_en\": \"Xpert Ultra Pooled Testing\",\r\n        \"title_fr\": \"Test Pool\u00e9 Xpert Ultra\",\r\n        \"title_ff\": \"Xpert Ultra Pooled Testing\",\r\n        \"title_pidgin\": \"Xpert Ultra Pooled Testing\",\r\n        \"url_en\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/10\/VID-602-v1.1-EN-15.07.25-Xpert-Ultra-pooled-testing.mp4\",\r\n        \"url_fr\": \"https:\/\/palcameroon.org\/wp-content\/uploads\/2025\/10\/VID-602-v1.1-EN-15.07.25-Xpert-Ultra-pooled-testing.mp4\",\r\n        \"url_ff\": null,\r\n        \"url_pidgin\": null\r\n    },\r\n   \r\n];\r\n\r\n\/\/ Current selected language\r\nvar currentLanguage = 'en';\r\n\r\n\/\/ Get available languages for a video\r\nfunction getAvailableLanguages(video) {\r\n    var available = [];\r\n    ['en', 'fr', 'ff', 'pidgin'].forEach(function(lang) {\r\n        if (video['url_' + lang] && video['url_' + lang] !== null) {\r\n            available.push(lang);\r\n        }\r\n    });\r\n    return available;\r\n}\r\n\r\n\/\/ Function to switch language\r\nfunction switchLanguage(lang) {\r\n    currentLanguage = lang;\r\n    \r\n    \/\/ Update button active states\r\n    document.querySelectorAll('.video-lang-btn').forEach(function(btn) {\r\n        btn.classList.remove('active');\r\n    });\r\n    document.querySelector('.video-lang-btn[data-lang=\"' + lang + '\"]').classList.add('active');\r\n    \r\n    \/\/ Rebuild video grid\r\n    displayVideos();\r\n}\r\n\r\n\/\/ Function to copy video link\r\nfunction copyVideoLink(videoId, event) {\r\n    event.stopPropagation(); \/\/ Prevent opening modal\r\n    \r\n    var video = videoDatabase.find(v => v.video_id === videoId);\r\n    var url = video['url_' + currentLanguage];\r\n    \r\n    \/\/ Create temporary input to copy link\r\n    var tempInput = document.createElement('input');\r\n    tempInput.value = url;\r\n    document.body.appendChild(tempInput);\r\n    tempInput.select();\r\n    document.execCommand('copy');\r\n    document.body.removeChild(tempInput);\r\n    \r\n    \/\/ Show copied notification\r\n    showNotification('\u2713 Video link copied to clipboard!');\r\n}\r\n\r\n\/\/ Function to show notification\r\nfunction showNotification(message) {\r\n    var notification = document.createElement('div');\r\n    notification.className = 'copy-notification';\r\n    notification.textContent = message;\r\n    document.body.appendChild(notification);\r\n    \r\n    setTimeout(function() {\r\n        notification.classList.add('show');\r\n    }, 100);\r\n    \r\n    setTimeout(function() {\r\n        notification.classList.remove('show');\r\n        setTimeout(function() {\r\n            notification.remove();\r\n        }, 300);\r\n    }, 2500);\r\n}\r\n\r\n\/\/ Function to display videos\r\nfunction displayVideos() {\r\n    var container = document.getElementById('video-grid-container');\r\n    var html = '<div class=\"video-grid\">';\r\n    \r\n    videoDatabase.forEach(function(video) {\r\n        var title = video['title_' + currentLanguage];\r\n        var url = video['url_' + currentLanguage];\r\n        var urlEn = video['url_en'];\r\n        \r\n        \/\/ Check if video is available\r\n        var isAvailable = (url && url !== null);\r\n        var isFallback = (isAvailable && url === urlEn && currentLanguage !== 'en');\r\n        var availableLanguages = getAvailableLanguages(video);\r\n        \r\n        if (!isAvailable) {\r\n            \/\/ VIDEO NOT AVAILABLE - Show unavailable card\r\n            var langButtons = '';\r\n            availableLanguages.forEach(function(lang) {\r\n                langButtons += '<button class=\"lang-switch-btn\" onclick=\"switchLanguage(\\'' + lang + '\\'); event.stopPropagation();\">Watch in ' + languageNames[lang] + '<\/button>';\r\n            });\r\n            \r\n            html += '<div class=\"video-card unavailable-card\">' +\r\n                '<div class=\"video-preview\">' +\r\n                    '<div class=\"unavailable-overlay\">' +\r\n                        '<div class=\"unavailable-content\">' +\r\n                            '<div class=\"unavailable-icon\">\ud83d\udeab<\/div>' +\r\n                            '<h4>Not Available in ' + languageNames[currentLanguage] + '<\/h4>' +\r\n                            '<p>This video hasn\\'t been translated yet.<\/p>' +\r\n                            (availableLanguages.length > 0 ? \r\n                                '<div class=\"available-languages\">' +\r\n                                '<p><strong>Available in:<\/strong><\/p>' +\r\n                                langButtons +\r\n                                '<\/div>' \r\n                                : '') +\r\n                        '<\/div>' +\r\n                    '<\/div>' +\r\n                '<\/div>' +\r\n                '<div class=\"video-info\">' +\r\n                    '<h4 class=\"video-title\">' + title + '<\/h4>' +\r\n                '<\/div>' +\r\n            '<\/div>';\r\n            \r\n        } else {\r\n            \/\/ VIDEO AVAILABLE - Show normal card with SHARE button\r\n            html += '<div class=\"video-card\" onclick=\"openVideoModal(\\'' + video.video_id + '\\')\">' +\r\n                '<div class=\"video-preview\">' +\r\n                    '<video preload=\"metadata\" muted>' +\r\n                        '<source src=\"' + url + '#t=0.5\" type=\"video\/mp4\">' +\r\n                    '<\/video>' +\r\n                    '<div class=\"play-overlay\">' +\r\n                        '<div class=\"play-button\">\u25b6<\/div>' +\r\n                    '<\/div>' +\r\n                    '<button class=\"share-btn\" onclick=\"copyVideoLink(\\'' + video.video_id + '\\', event)\" title=\"Copy video link\">' +\r\n                        '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">' +\r\n                            '<path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"><\/path>' +\r\n                            '<polyline points=\"16 6 12 2 8 6\"><\/polyline>' +\r\n                            '<line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\"><\/line>' +\r\n                        '<\/svg>' +\r\n                        '<span>Share<\/span>' +\r\n                    '<\/button>' +\r\n                '<\/div>' +\r\n                '<div class=\"video-info\">' +\r\n                    '<h4 class=\"video-title\">' + title + '<\/h4>' +\r\n                '<\/div>' +\r\n            '<\/div>';\r\n        }\r\n    });\r\n    \r\n    html += '<\/div>';\r\n    container.innerHTML = html;\r\n}\r\n\r\n\/\/ Function to open video in modal\r\nfunction openVideoModal(videoId) {\r\n    var video = videoDatabase.find(v => v.video_id === videoId);\r\n    var url = video['url_' + currentLanguage];\r\n    var title = video['title_' + currentLanguage];\r\n    var urlEn = video['url_en'];\r\n    var isFallback = (url === urlEn && currentLanguage !== 'en');\r\n    \r\n    \/\/ Create modal\r\n    var modal = document.createElement('div');\r\n    modal.className = 'video-modal';\r\n    modal.innerHTML = '<div class=\"modal-backdrop\" onclick=\"closeModal()\"><\/div>' +\r\n        '<div class=\"modal-content\">' +\r\n            '<span class=\"close-modal\" onclick=\"closeModal()\">\u00d7<\/span>' +\r\n            '<div class=\"modal-header\">' +\r\n                '<h3>' + title + '<\/h3>' +\r\n                '<button class=\"modal-share-btn\" onclick=\"copyVideoLink(\\'' + videoId + '\\', event)\" title=\"Copy video link\">' +\r\n                    '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">' +\r\n                        '<path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"><\/path>' +\r\n                        '<polyline points=\"16 6 12 2 8 6\"><\/polyline>' +\r\n                        '<line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\"><\/line>' +\r\n                    '<\/svg>' +\r\n                    ' Copy Link' +\r\n                '<\/button>' +\r\n            '<\/div>' +\r\n            (isFallback ? '<div class=\"fallback-alert\">\u26a0\ufe0f This video is not yet available in ' + languageNames[currentLanguage] + '. Showing English version.<\/div>' : '') +\r\n            '<video controls autoplay style=\"width:100%; max-width:900px; border-radius:10px;\">' +\r\n                '<source src=\"' + url + '\" type=\"video\/mp4\">' +\r\n                'Your browser does not support the video tag.' +\r\n            '<\/video>' +\r\n        '<\/div>';\r\n    \r\n    modal.id = 'activeModal';\r\n    document.body.appendChild(modal);\r\n    document.body.style.overflow = 'hidden';\r\n}\r\n\r\n\/\/ Function to close modal\r\nfunction closeModal() {\r\n    var modal = document.getElementById('activeModal');\r\n    if (modal) {\r\n        var video = modal.querySelector('video');\r\n        if (video) video.pause();\r\n        modal.remove();\r\n        document.body.style.overflow = '';\r\n    }\r\n}\r\n\r\n\/\/ Initialize on page load\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    displayVideos();\r\n});\r\n<\/script>\r\n\r\n<style>\r\n\/* Video Grid Layout *\/\r\n.video-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n    gap: 30px;\r\n    padding: 20px 0;\r\n}\r\n\r\n\/* Video Card *\/\r\n.video-card {\r\n    background: white;\r\n    border-radius: 15px;\r\n    overflow: hidden;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n}\r\n\r\n.video-card:hover {\r\n    transform: translateY(-8px);\r\n    box-shadow: 0 8px 30px rgba(0,0,0,0.15);\r\n}\r\n\r\n\/* Unavailable Card *\/\r\n.unavailable-card {\r\n    cursor: default;\r\n    opacity: 0.95;\r\n}\r\n\r\n.unavailable-card:hover {\r\n    transform: none;\r\n}\r\n\r\n\/* Video Preview *\/\r\n.video-preview {\r\n    position: relative;\r\n    width: 100%;\r\n    padding-top: 56.25%; \/* 16:9 aspect ratio *\/\r\n    background: #000;\r\n    overflow: hidden;\r\n}\r\n\r\n.video-preview video {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n\r\n\/* Play Overlay *\/\r\n.play-overlay {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0,0,0,0.3);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.3s;\r\n}\r\n\r\n.video-card:hover .play-overlay {\r\n    background: rgba(0,0,0,0.5);\r\n}\r\n\r\n.play-button {\r\n    width: 70px;\r\n    height: 70px;\r\n    background: rgba(237, 28, 36, 0.9);  \/* BREATHE Red *\/\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 30px;\r\n    color: white;\r\n    transition: all 0.3s;\r\n}\r\n\r\n.video-card:hover .play-button {\r\n    transform: scale(1.15);\r\n    background: rgba(237, 28, 36, 1);\r\n    box-shadow: 0 0 30px rgba(237, 28, 36, 0.5);\r\n}\r\n\r\n\/* Share Button *\/\r\n.share-btn {\r\n    position: absolute;\r\n    top: 12px;\r\n    right: 12px;\r\n    background: rgba(0, 84, 166, 0.95);  \/* BREATHE Blue *\/\r\n    color: white;\r\n    border: none;\r\n    padding: 8px 16px;\r\n    border-radius: 20px;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    transition: all 0.3s;\r\n    z-index: 10;\r\n    backdrop-filter: blur(10px);\r\n}\r\n\r\n.share-btn:hover {\r\n    background: rgba(0, 84, 166, 1);\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 4px 15px rgba(0, 84, 166, 0.4);\r\n}\r\n\r\n.share-btn svg {\r\n    width: 16px;\r\n    height: 16px;\r\n}\r\n\r\n\/* Video Info - Enhanced Professional Style *\/\r\n.video-info {\r\n    padding: 0;\r\n    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);\r\n    border-top: 3px solid #0054A6;\r\n    position: relative;\r\n}\r\n\r\n.video-title {\r\n    margin: 0;\r\n    padding: 20px 20px 18px;\r\n    font-size: 17px;\r\n    color: #0f172a;\r\n    font-weight: 700;\r\n    line-height: 1.5;\r\n    letter-spacing: -0.01em;\r\n    min-height: 65px;\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n}\r\n\r\n.video-title::before {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    width: 4px;\r\n    height: 100%;\r\n    background: linear-gradient(to bottom, #0054A6, #ED1C24);\r\n    opacity: 0;\r\n    transition: opacity 0.3s;\r\n}\r\n\r\n.video-card:hover .video-title::before {\r\n    opacity: 1;\r\n}\r\n\r\n.video-card:hover .video-info {\r\n    background: linear-gradient(to bottom, #ffffff 0%, #f0f7ff 100%);\r\n}\r\n\r\n\/* Copy Notification *\/\r\n.copy-notification {\r\n    position: fixed;\r\n    top: 20px;\r\n    right: 20px;\r\n    background: #0054A6;  \/* BREATHE Blue *\/\r\n    color: white;\r\n    padding: 16px 24px;\r\n    border-radius: 10px;\r\n    box-shadow: 0 4px 20px rgba(0, 84, 166, 0.3);\r\n    font-weight: 600;\r\n    font-size: 15px;\r\n    z-index: 999999;\r\n    opacity: 0;\r\n    transform: translateY(-20px);\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.copy-notification.show {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* Fallback Badge *\/\r\n.fallback-badge {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 10px;\r\n    background: rgba(0, 84, 166, 0.95);  \/* BREATHE Blue *\/\r\n    color: white;\r\n    padding: 6px 12px;\r\n    border-radius: 20px;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    z-index: 10;\r\n    backdrop-filter: blur(5px);\r\n}\r\n\r\n.fallback-note {\r\n    font-size: 13px;\r\n    color: #0054A6;  \/* BREATHE Blue *\/\r\n    margin: 5px 0 0 0;\r\n    font-style: italic;\r\n}\r\n\r\n\/* Unavailable Overlay *\/\r\n.unavailable-overlay {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\r\n}\r\n\r\n.unavailable-content {\r\n    text-align: center;\r\n    padding: 20px;\r\n    color: white;\r\n    max-height: 100%;\r\n    overflow-y: auto;\r\n    width: 100%;\r\n}\r\n\r\n.unavailable-icon {\r\n    font-size: 50px;\r\n    margin-bottom: 12px;\r\n    animation: pulse 2s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n    0%, 100% { transform: scale(1); opacity: 1; }\r\n    50% { transform: scale(1.1); opacity: 0.8; }\r\n}\r\n\r\n.unavailable-content h4 {\r\n    font-size: 18px;\r\n    margin: 8px 0;\r\n    color: white;\r\n}\r\n\r\n.unavailable-content p {\r\n    font-size: 14px;\r\n    margin: 8px 0;\r\n    color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.available-languages {\r\n    margin-top: 15px;\r\n    padding-top: 15px;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.available-languages p {\r\n    margin-bottom: 10px;\r\n    font-size: 12px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n.lang-switch-btn {\r\n    padding: 8px 16px;\r\n    margin: 4px;\r\n    border: 2px solid white;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    color: white;\r\n    cursor: pointer;\r\n    font-size: 13px;\r\n    border-radius: 20px;\r\n    font-weight: 600;\r\n    transition: all 0.3s;\r\n    backdrop-filter: blur(10px);\r\n}\r\n\r\n.lang-switch-btn:hover {\r\n    background: white;\r\n    color: #1e293b;\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n\/* Custom scrollbar *\/\r\n.unavailable-overlay::-webkit-scrollbar {\r\n    width: 6px;\r\n}\r\n\r\n.unavailable-overlay::-webkit-scrollbar-track {\r\n    background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.unavailable-overlay::-webkit-scrollbar-thumb {\r\n    background: rgba(255, 255, 255, 0.5);\r\n    border-radius: 3px;\r\n}\r\n\r\n.unavailable-overlay::-webkit-scrollbar-thumb:hover {\r\n    background: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n\/* Modal Styles *\/\r\n.video-modal {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 999999;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.modal-backdrop {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0,0,0,0.85);\r\n    backdrop-filter: blur(5px);\r\n}\r\n\r\n.modal-content {\r\n    position: relative;\r\n    background: white;\r\n    padding: 30px;\r\n    border-radius: 20px;\r\n    max-width: 95%;\r\n    max-height: 90vh;\r\n    overflow: auto;\r\n    z-index: 1000000;\r\n    animation: modalSlideIn 0.3s ease;\r\n}\r\n\r\n@keyframes modalSlideIn {\r\n    from {\r\n        transform: translateY(50px);\r\n        opacity: 0;\r\n    }\r\n    to {\r\n        transform: translateY(0);\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n.modal-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n    gap: 20px;\r\n}\r\n\r\n.modal-content h3 {\r\n    margin: 0;\r\n    font-size: 24px;\r\n    color: #333;\r\n    flex: 1;\r\n}\r\n\r\n.modal-share-btn {\r\n    background: #0054A6;  \/* BREATHE Blue *\/\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 8px;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    transition: all 0.3s;\r\n}\r\n\r\n.modal-share-btn:hover {\r\n    background: #003d7a;\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 4px 15px rgba(0, 84, 166, 0.3);\r\n}\r\n\r\n.close-modal {\r\n    position: absolute;\r\n    top: 15px;\r\n    right: 25px;\r\n    font-size: 45px;\r\n    color: #666;\r\n    cursor: pointer;\r\n    line-height: 1;\r\n    transition: all 0.2s;\r\n    z-index: 1000001;\r\n}\r\n\r\n.close-modal:hover {\r\n    color: #ED1C24;  \/* BREATHE Red *\/\r\n    transform: rotate(90deg);\r\n}\r\n\r\n.fallback-alert {\r\n    background: #fff3cd;\r\n    border: 2px solid #ffc107;\r\n    border-radius: 10px;\r\n    padding: 15px;\r\n    margin-bottom: 20px;\r\n    color: #856404;\r\n    font-size: 15px;\r\n    text-align: center;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 768px) {\r\n    .video-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 20px;\r\n    }\r\n    \r\n    .modal-content {\r\n        padding: 20px;\r\n        max-width: 100%;\r\n        border-radius: 0;\r\n    }\r\n    \r\n    .modal-header {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n    }\r\n    \r\n    .unavailable-content {\r\n        padding: 20px;\r\n    }\r\n    \r\n    .unavailable-content h4 {\r\n        font-size: 16px;\r\n    }\r\n    \r\n    .unavailable-icon {\r\n        font-size: 40px;\r\n    }\r\n    \r\n    .copy-notification {\r\n        right: 10px;\r\n        left: 10px;\r\n        text-align: center;\r\n    }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84b688c elementor-widget elementor-widget-html\" data-id=\"84b688c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"video-grid-container\">\n    <!-- Videos will be loaded here by JavaScript -->\n<\/div>\t\t\t\t<\/div>\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>","protected":false},"excerpt":{"rendered":"<p>Training Video Library Access evidence-based clinical training videos in multiple languages for comprehensive respiratory care education. Search Popular Keywords Categories [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2313","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/palcameroon.org\/fr\/wp-json\/wp\/v2\/pages\/2313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/palcameroon.org\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/palcameroon.org\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/palcameroon.org\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/palcameroon.org\/fr\/wp-json\/wp\/v2\/comments?post=2313"}],"version-history":[{"count":81,"href":"https:\/\/palcameroon.org\/fr\/wp-json\/wp\/v2\/pages\/2313\/revisions"}],"predecessor-version":[{"id":2553,"href":"https:\/\/palcameroon.org\/fr\/wp-json\/wp\/v2\/pages\/2313\/revisions\/2553"}],"wp:attachment":[{"href":"https:\/\/palcameroon.org\/fr\/wp-json\/wp\/v2\/media?parent=2313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}