{"id":25699,"date":"2025-09-25T12:08:59","date_gmt":"2025-09-25T12:08:59","guid":{"rendered":"https:\/\/nationalexchangeqatar.com\/?page_id=25699"},"modified":"2025-09-25T12:09:32","modified_gmt":"2025-09-25T12:09:32","slug":"media-center","status":"publish","type":"page","link":"https:\/\/nationalexchangeqatar.com\/ar\/media-center\/","title":{"rendered":"Media Center"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><div class=\"vc_row-full-width-before\"><\/div><div id=\"vc_row-6a2794acbb6d4\" data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" class=\"vc_row wpb_row vc_row-fluid vc_custom_1542285465663 thegem-custom-6a2794acbb6b14785 vc_row-has-fill\"><script type=\"text\/javascript\">if (typeof(gem_fix_fullwidth_position) == \"function\") { gem_fix_fullwidth_position(document.getElementById(\"vc_row-6a2794acbb6d4\")); }<\/script><div class=\"wpb_animate_when_almost_visible wpb_bottom-to-top bottom-to-top wpb_column vc_column_container vc_col-sm-12 thegem-custom-6a2794acbbc3a9497\" ><div class=\"vc_column-inner thegem-custom-inner-6a2794acbbc3d \"><div class=\"wpb_wrapper thegem-custom-6a2794acbbc3a9497\">\r\n\t\r\n\t\t<div class=\"wpb_text_column wpb_content_element  thegem-vc-text thegem-custom-6a2794acbc3683561\"  >\r\n\t\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t\t<h2 style=\"text-align: center;\">Youtube Chanel<\/h2>\n\r\n\t\t\t<\/div>\r\n\t\t\t<style>@media screen and (max-width: 1023px) {.thegem-vc-text.thegem-custom-6a2794acbc3683561{display: block!important;}}@media screen and (max-width: 767px) {.thegem-vc-text.thegem-custom-6a2794acbc3683561{display: block!important;}}@media screen and (max-width: 1023px) {.thegem-vc-text.thegem-custom-6a2794acbc3683561{position: relative !important;}}@media screen and (max-width: 767px) {.thegem-vc-text.thegem-custom-6a2794acbc3683561{position: relative !important;}}<\/style>\r\n\t\t<\/div>\r\n\t\r\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div id=\"vc_row-6a2794acbc9b9\" class=\"vc_row wpb_row vc_row-fluid thegem-custom-6a2794acbc9a72759\"><div class=\"wpb_column vc_column_container vc_col-sm-12 thegem-custom-6a2794acbce894140\" ><div class=\"vc_column-inner thegem-custom-inner-6a2794acbce8c \"><div class=\"wpb_wrapper thegem-custom-6a2794acbce894140\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>YouTube Media Center - National Exchange<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background: transparent;\n            padding: 20px;\n        }\n\n        .media-center {\n            max-width: 1200px;\n            margin: 0 auto;\n            background: transparent;\n        }\n\n        .videos-container {\n            padding: 0;\n        }\n\n        .videos-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 30px;\n            margin-top: 20px;\n        }\n\n        .video-card {\n            background: white;\n            border-radius: 15px;\n            overflow: hidden;\n            transition: all 0.3s ease;\n            cursor: pointer;\n            border: 2px solid transparent;\n        }\n\n        .video-card:hover {\n            transform: translateY(-10px);\n            border-color: #667eea;\n        }\n\n        .video-thumbnail {\n            position: relative;\n            width: 100%;\n            height: 200px;\n            overflow: hidden;\n        }\n\n        .video-thumbnail img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.3s ease;\n            opacity: 0;\n            transition: opacity 0.3s ease, transform 0.3s ease;\n        }\n\n        .video-thumbnail img.loaded {\n            opacity: 1;\n        }\n\n        .video-card:hover .video-thumbnail img {\n            transform: scale(1.05);\n        }\n\n        .play-button {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 70px;\n            height: 70px;\n            background: rgba(255, 255, 255, 0.9);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all 0.3s ease;\n        }\n\n        .play-button::after {\n            content: '';\n            width: 0;\n            height: 0;\n            border-left: 20px solid #667eea;\n            border-top: 12px solid transparent;\n            border-bottom: 12px solid transparent;\n            margin-left: 4px;\n        }\n\n        .video-card:hover .play-button {\n            background: #667eea;\n            transform: translate(-50%, -50%) scale(1.1);\n        }\n\n        .video-card:hover .play-button::after {\n            border-left-color: white;\n        }\n\n        .video-info {\n            padding: 20px;\n        }\n\n        .video-title {\n            font-size: 1.1em;\n            font-weight: bold;\n            color: #333;\n            margin-bottom: 8px;\n            line-height: 1.4;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        .video-duration {\n            color: #666;\n            font-size: 0.9em;\n            display: flex;\n            align-items: center;\n            gap: 5px;\n        }\n\n        .video-duration::before {\n            content: '\u23f1\ufe0f';\n        }\n\n        .modal {\n            display: none;\n            position: fixed;\n            z-index: 1000;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.9);\n            animation: fadeIn 0.3s ease;\n        }\n\n        .modal-content {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 90%;\n            max-width: 900px;\n            background: white;\n            border-radius: 15px;\n            overflow: hidden;\n            animation: slideIn 0.3s ease;\n        }\n\n        .close {\n            position: absolute;\n            right: 15px;\n            top: 15px;\n            color: white;\n            font-size: 35px;\n            font-weight: bold;\n            cursor: pointer;\n            z-index: 1001;\n            width: 40px;\n            height: 40px;\n            background: rgba(0, 0, 0, 0.5);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: background 0.3s ease;\n        }\n\n        .close:hover {\n            background: rgba(255, 0, 0, 0.7);\n        }\n\n        .modal iframe {\n            width: 100%;\n            height: 500px;\n            border: none;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        @keyframes slideIn {\n            from { \n                opacity: 0;\n                transform: translate(-50%, -60%);\n            }\n            to { \n                opacity: 1;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n        .loading {\n            display: inline-block;\n            width: 20px;\n            height: 20px;\n            border: 3px solid #f3f3f3;\n            border-top: 3px solid #667eea;\n            border-radius: 50%;\n            animation: spin 1s linear infinite;\n        }\n\n        @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n\n        @media (max-width: 768px) {\n            body {\n                padding: 10px;\n            }\n            \n            .videos-grid {\n                grid-template-columns: 1fr;\n                gap: 20px;\n            }\n            \n            .modal-content {\n                width: 95%;\n                margin: 20px;\n            }\n            \n            .modal iframe {\n                height: 250px;\n            }\n        }\n\n        @media (max-width: 1024px) and (min-width: 769px) {\n            .videos-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 25px;\n            }\n        }\n\n        @media (min-width: 1025px) {\n            .videos-grid {\n                grid-template-columns: repeat(4, 1fr);\n                gap: 30px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"media-center\">        \n        <div class=\"videos-container\">\n            <div class=\"videos-grid\" id=\"videosGrid\">\n                <div class=\"loading\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Modal for video playback -->\n    <div id=\"videoModal\" class=\"modal\">\n        <div class=\"modal-content\">\n            <span class=\"close\">&times;<\/span>\n            <iframe id=\"videoFrame\" src=\"\" allowfullscreen><\/iframe>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ YouTube video IDs and details\n        const videos = [\n            {\n                id: 'T2WwNycVnxM',\n                title: 'National Exchange - Fast Transfer Services',\n                duration: '2:45'\n            },\n            {\n                id: 'Qt2idaasMtw',\n                title: 'National Exchange Mobile Application',\n                duration: '3:12'\n            },\n            {\n                id: 'yL_QZkIoG2A',\n                title: 'Gold Prices and Exchange Services',\n                duration: '4:20'\n            },\n            {\n                id: 'jhXM7rK8WUw',\n                title: 'International Transfer and Foreign Currency Services',\n                duration: '3:55'\n            }\n        ];\n\n        \/\/ Function to get YouTube thumbnail URL with multiple fallbacks\n        function getThumbnailUrl(videoId) {\n            return `https:\/\/img.youtube.com\/vi\/${videoId}\/hqdefault.jpg`;\n        }\n\n        \/\/ Function to create video card\n        function createVideoCard(video) {\n            const thumbnailUrl = getThumbnailUrl(video.id);\n            return `\n                <div class=\"video-card\" onclick=\"openVideo('${video.id}')\">\n                    <div class=\"video-thumbnail\">\n                        <img decoding=\"async\" src=\"${thumbnailUrl}\" \n                             alt=\"${video.title}\" \n                             onerror=\"handleImageError(this, '${video.id}')\"\n                             onload=\"this.style.opacity='1'\">\n                        <div class=\"play-button\"><\/div>\n                    <\/div>\n                    <div class=\"video-info\">\n                        <div class=\"video-title\">${video.title}<\/div>\n                        <div class=\"video-duration\">${video.duration}<\/div>\n                    <\/div>\n                <\/div>\n            `;\n        }\n\n        \/\/ Handle image loading errors with multiple fallbacks\n        function handleImageError(img, videoId) {\n            const fallbacks = [\n                `https:\/\/img.youtube.com\/vi\/${videoId}\/maxresdefault.jpg`,\n                `https:\/\/img.youtube.com\/vi\/${videoId}\/sddefault.jpg`,\n                `https:\/\/img.youtube.com\/vi\/${videoId}\/mqdefault.jpg`,\n                `https:\/\/img.youtube.com\/vi\/${videoId}\/default.jpg`\n            ];\n            \n            let currentSrc = img.src;\n            let nextFallback = null;\n            \n            for (let i = 0; i < fallbacks.length; i++) {\n                if (currentSrc.includes(fallbacks[i].split('\/').pop())) {\n                    if (i + 1 < fallbacks.length) {\n                        nextFallback = fallbacks[i + 1];\n                    }\n                    break;\n                }\n            }\n            \n            if (nextFallback) {\n                img.src = nextFallback;\n            } else {\n                \/\/ Create a placeholder if all thumbnails fail\n                img.src = createPlaceholder(videoId);\n            }\n        }\n\n        \/\/ Create a placeholder image\n        function createPlaceholder(videoId) {\n            const canvas = document.createElement('canvas');\n            canvas.width = 480;\n            canvas.height = 360;\n            const ctx = canvas.getContext('2d');\n            \n            \/\/ Background\n            ctx.fillStyle = '#f0f0f0';\n            ctx.fillRect(0, 0, 480, 360);\n            \n            \/\/ Play button\n            ctx.fillStyle = '#666';\n            ctx.beginPath();\n            ctx.moveTo(180, 120);\n            ctx.lineTo(300, 180);\n            ctx.lineTo(180, 240);\n            ctx.closePath();\n            ctx.fill();\n            \n            \/\/ Text\n            ctx.fillStyle = '#999';\n            ctx.font = '16px Arial';\n            ctx.textAlign = 'center';\n            ctx.fillText('YouTube Video', 240, 280);\n            ctx.fillText(`ID: ${videoId}`, 240, 300);\n            \n            return canvas.toDataURL();\n        }\n\n        \/\/ Function to load videos\n        function loadVideos() {\n            const videosGrid = document.getElementById('videosGrid');\n            const videoCards = videos.map(video => createVideoCard(video)).join('');\n            videosGrid.innerHTML = videoCards;\n            \n            \/\/ Force image loading\n            const images = videosGrid.querySelectorAll('img');\n            images.forEach(img => {\n                if (img.complete) {\n                    img.style.opacity = '1';\n                } else {\n                    img.addEventListener('load', function() {\n                        this.style.opacity = '1';\n                    });\n                }\n            });\n        }\n\n        \/\/ Function to open video in modal\n        function openVideo(videoId) {\n            const modal = document.getElementById('videoModal');\n            const videoFrame = document.getElementById('videoFrame');\n            const embedUrl = `https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1&rel=0`;\n            \n            videoFrame.src = embedUrl;\n            modal.style.display = 'block';\n            document.body.style.overflow = 'hidden';\n        }\n\n        \/\/ Function to close modal\n        function closeModal() {\n            const modal = document.getElementById('videoModal');\n            const videoFrame = document.getElementById('videoFrame');\n            \n            modal.style.display = 'none';\n            videoFrame.src = '';\n            document.body.style.overflow = 'auto';\n        }\n\n        \/\/ Event listeners\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Load videos immediately\n            loadVideos();\n            \n            \/\/ Close modal when clicking the X\n            document.querySelector('.close').addEventListener('click', closeModal);\n            \n            \/\/ Close modal when clicking outside of it\n            document.getElementById('videoModal').addEventListener('click', function(e) {\n                if (e.target === this) {\n                    closeModal();\n                }\n            });\n            \n            \/\/ Close modal with Escape key\n            document.addEventListener('keydown', function(e) {\n                if (e.key === 'Escape') {\n                    closeModal();\n                }\n            });\n        });\n\n        \/\/ Handle image loading errors - remove the old error handler\n        \/\/ The new error handling is now integrated into the createVideoCard function\n    <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>YouTube Media Center - National Exchange<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background: transparent;\n            padding: 20px;\n        }\n\n        .media-center {\n            max-width: 1200px;\n            margin: 0 auto;\n            background: transparent;\n        }\n\n        .videos-container {\n            padding: 0;\n        }\n\n        .videos-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 30px;\n            margin-top: 20px;\n        }\n\n        .video-card {\n            background: white;\n            border-radius: 15px;\n            overflow: hidden;\n            transition: all 0.3s ease;\n            cursor: pointer;\n            border: 2px solid transparent;\n        }\n\n        .video-card:hover {\n            transform: translateY(-10px);\n            border-color: #667eea;\n        }\n\n        .video-thumbnail {\n            position: relative;\n            width: 100%;\n            height: 200px;\n            overflow: hidden;\n        }\n\n        .video-thumbnail img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.3s ease;\n            opacity: 0;\n            transition: opacity 0.3s ease, transform 0.3s ease;\n        }\n\n        .video-thumbnail img.loaded {\n            opacity: 1;\n        }\n\n        .video-card:hover .video-thumbnail img {\n            transform: scale(1.05);\n        }\n\n        .play-button {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 70px;\n            height: 70px;\n            background: rgba(255, 255, 255, 0.9);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all 0.3s ease;\n        }\n\n        .play-button::after {\n            content: '';\n            width: 0;\n            height: 0;\n            border-left: 20px solid #667eea;\n            border-top: 12px solid transparent;\n            border-bottom: 12px solid transparent;\n            margin-left: 4px;\n        }\n\n        .video-card:hover .play-button {\n            background: #667eea;\n            transform: translate(-50%, -50%) scale(1.1);\n        }\n\n        .video-card:hover .play-button::after {\n            border-left-color: white;\n        }\n\n        .video-info {\n            padding: 20px;\n        }\n\n        .video-title {\n            font-size: 1.1em;\n            font-weight: bold;\n            color: #333;\n            margin-bottom: 8px;\n            line-height: 1.4;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        .video-duration {\n            color: #666;\n            font-size: 0.9em;\n            display: flex;\n            align-items: center;\n            gap: 5px;\n        }\n\n        .video-duration::before {\n            content: '\u23f1\ufe0f';\n        }\n\n        .modal {\n            display: none;\n            position: fixed;\n            z-index: 1000;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.9);\n            animation: fadeIn 0.3s ease;\n        }\n\n        .modal-content {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 90%;\n            max-width: 900px;\n            background: white;\n            border-radius: 15px;\n            overflow: hidden;\n            animation: slideIn 0.3s ease;\n        }\n\n        .close {\n            position: absolute;\n            right: 15px;\n            top: 15px;\n            color: white;\n            font-size: 35px;\n            font-weight: bold;\n            cursor: pointer;\n            z-index: 1001;\n            width: 40px;\n            height: 40px;\n            background: rgba(0, 0, 0, 0.5);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: background 0.3s ease;\n        }\n\n        .close:hover {\n            background: rgba(255, 0, 0, 0.7);\n        }\n\n        .modal iframe {\n            width: 100%;\n            height: 500px;\n            border: none;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        @keyframes slideIn {\n            from { \n                opacity: 0;\n                transform: translate(-50%, -60%);\n            }\n            to { \n                opacity: 1;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n        .loading {\n            display: inline-block;\n            width: 20px;\n            height: 20px;\n            border: 3px solid #f3f3f3;\n            border-top: 3px solid #667eea;\n            border-radius: 50%;\n            animation: spin 1s linear infinite;\n        }\n\n        @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n\n        @media (max-width: 768px) {\n            body {\n                padding: 10px;\n            }\n            \n            .videos-grid {\n                grid-template-columns: 1fr;\n                gap: 20px;\n            }\n            \n            .modal-content {\n                width: 95%;\n                margin: 20px;\n            }\n            \n            .modal iframe {\n                height: 250px;\n            }\n        }\n\n        @media (max-width: 1024px) and (min-width: 769px) {\n            .videos-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 25px;\n            }\n        }\n\n        @media (min-width: 1025px) {\n            .videos-grid {\n                grid-template-columns: repeat(4, 1fr);\n                gap: 30px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"media-center\">        \n        <div class=\"videos-container\">\n            <div class=\"videos-grid\" id=\"videosGrid\">\n                <div class=\"loading\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Modal for video playback -->\n    <div id=\"videoModal\" class=\"modal\">\n        <div class=\"modal-content\">\n            <span class=\"close\">&times;<\/span>\n            <iframe id=\"videoFrame\" src=\"\" allowfullscreen><\/iframe>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ YouTube video IDs and details\n        const videos = [\n            {\n                id: 'T2WwNycVnxM',\n                title: 'National Exchange - Fast Transfer Services',\n                duration: '2:45'\n            },\n            {\n                id: 'Qt2idaasMtw',\n                title: 'National Exchange Mobile Application',\n                duration: '3:12'\n            },\n            {\n                id: 'yL_QZkIoG2A',\n                title: 'Gold Prices and Exchange Services',\n                duration: '4:20'\n            },\n            {\n                id: 'jhXM7rK8WUw',\n                title: 'International Transfer and Foreign Currency Services',\n                duration: '3:55'\n            }\n        ];\n\n        \/\/ Function to get YouTube thumbnail URL with multiple fallbacks\n        function getThumbnailUrl(videoId) {\n            return `https:\/\/img.youtube.com\/vi\/${videoId}\/hqdefault.jpg`;\n        }\n\n        \/\/ Function to create video card\n        function createVideoCard(video) {\n            const thumbnailUrl = getThumbnailUrl(video.id);\n            return `\n                <div class=\"video-card\" onclick=\"openVideo('${video.id}')\">\n                    <div class=\"video-thumbnail\">\n                        <img decoding=\"async\" src=\"${thumbnailUrl}\" \n                             alt=\"${video.title}\" \n                             onerror=\"handleImageError(this, '${video.id}')\"\n                             onload=\"this.style.opacity='1'\">\n                        <div class=\"play-button\"><\/div>\n                    <\/div>\n                    <div class=\"video-info\">\n                        <div class=\"video-title\">${video.title}<\/div>\n                        <div class=\"video-duration\">${video.duration}<\/div>\n                    <\/div>\n                <\/div>\n            `;\n        }\n\n        \/\/ Handle image loading errors with multiple fallbacks\n        function handleImageError(img, videoId) {\n            const fallbacks = [\n                `https:\/\/img.youtube.com\/vi\/${videoId}\/maxresdefault.jpg`,\n                `https:\/\/img.youtube.com\/vi\/${videoId}\/sddefault.jpg`,\n                `https:\/\/img.youtube.com\/vi\/${videoId}\/mqdefault.jpg`,\n                `https:\/\/img.youtube.com\/vi\/${videoId}\/default.jpg`\n            ];\n            \n            let currentSrc = img.src;\n            let nextFallback = null;\n            \n            for (let i = 0; i < fallbacks.length; i++) {\n                if (currentSrc.includes(fallbacks[i].split('\/').pop())) {\n                    if (i + 1 < fallbacks.length) {\n                        nextFallback = fallbacks[i + 1];\n                    }\n                    break;\n                }\n            }\n            \n            if (nextFallback) {\n                img.src = nextFallback;\n            } else {\n                \/\/ Create a placeholder if all thumbnails fail\n                img.src = createPlaceholder(videoId);\n            }\n        }\n\n        \/\/ Create a placeholder image\n        function createPlaceholder(videoId) {\n            const canvas = document.createElement('canvas');\n            canvas.width = 480;\n            canvas.height = 360;\n            const ctx = canvas.getContext('2d');\n            \n            \/\/ Background\n            ctx.fillStyle = '#f0f0f0';\n            ctx.fillRect(0, 0, 480, 360);\n            \n            \/\/ Play button\n            ctx.fillStyle = '#666';\n            ctx.beginPath();\n            ctx.moveTo(180, 120);\n            ctx.lineTo(300, 180);\n            ctx.lineTo(180, 240);\n            ctx.closePath();\n            ctx.fill();\n            \n            \/\/ Text\n            ctx.fillStyle = '#999';\n            ctx.font = '16px Arial';\n            ctx.textAlign = 'center';\n            ctx.fillText('YouTube Video', 240, 280);\n            ctx.fillText(`ID: ${videoId}`, 240, 300);\n            \n            return canvas.toDataURL();\n        }\n\n        \/\/ Function to load videos\n        function loadVideos() {\n            const videosGrid = document.getElementById('videosGrid');\n            const videoCards = videos.map(video => createVideoCard(video)).join('');\n            videosGrid.innerHTML = videoCards;\n            \n            \/\/ Force image loading\n            const images = videosGrid.querySelectorAll('img');\n            images.forEach(img => {\n                if (img.complete) {\n                    img.style.opacity = '1';\n                } else {\n                    img.addEventListener('load', function() {\n                        this.style.opacity = '1';\n                    });\n                }\n            });\n        }\n\n        \/\/ Function to open video in modal\n        function openVideo(videoId) {\n            const modal = document.getElementById('videoModal');\n            const videoFrame = document.getElementById('videoFrame');\n            const embedUrl = `https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1&rel=0`;\n            \n            videoFrame.src = embedUrl;\n            modal.style.display = 'block';\n            document.body.style.overflow = 'hidden';\n        }\n\n        \/\/ Function to close modal\n        function closeModal() {\n            const modal = document.getElementById('videoModal');\n            const videoFrame = document.getElementById('videoFrame');\n            \n            modal.style.display = 'none';\n            videoFrame.src = '';\n            document.body.style.overflow = 'auto';\n        }\n\n        \/\/ Event listeners\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Load videos immediately\n            loadVideos();\n            \n            \/\/ Close modal when clicking the X\n            document.querySelector('.close').addEventListener('click', closeModal);\n            \n            \/\/ Close modal when clicking outside of it\n            document.getElementById('videoModal').addEventListener('click', function(e) {\n                if (e.target === this) {\n                    closeModal();\n                }\n            });\n            \n            \/\/ Close modal with Escape key\n            document.addEventListener('keydown', function(e) {\n                if (e.key === 'Escape') {\n                    closeModal();\n                }\n            });\n        });\n\n        \/\/ Handle image loading errors - remove the old error handler\n        \/\/ The new error handling is now integrated into the createVideoCard function\n    <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-25699","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/nationalexchangeqatar.com\/ar\/wp-json\/wp\/v2\/pages\/25699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nationalexchangeqatar.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nationalexchangeqatar.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nationalexchangeqatar.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nationalexchangeqatar.com\/ar\/wp-json\/wp\/v2\/comments?post=25699"}],"version-history":[{"count":5,"href":"https:\/\/nationalexchangeqatar.com\/ar\/wp-json\/wp\/v2\/pages\/25699\/revisions"}],"predecessor-version":[{"id":25725,"href":"https:\/\/nationalexchangeqatar.com\/ar\/wp-json\/wp\/v2\/pages\/25699\/revisions\/25725"}],"wp:attachment":[{"href":"https:\/\/nationalexchangeqatar.com\/ar\/wp-json\/wp\/v2\/media?parent=25699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}