{"id":7224,"date":"2025-12-30T06:38:07","date_gmt":"2025-12-30T06:38:07","guid":{"rendered":"https:\/\/promotionexams.com\/?page_id=7224"},"modified":"2026-01-13T06:33:47","modified_gmt":"2026-01-13T06:33:47","slug":"video-course-coi","status":"publish","type":"page","link":"https:\/\/promotionexams.com\/?page_id=7224","title":{"rendered":"VIDEO COURSE -COI"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7224\" class=\"elementor elementor-7224\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9164acf e-con-full e-flex e-con e-parent\" data-id=\"9164acf\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d063d45 elementor-widget elementor-widget-html\" data-id=\"d063d45\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \r\n    VIDEO COURSE PLAYER v5 - SUPPORTS BOTH MP4 AND YOUTUBE VIDEOS\r\n    Both video section and sidebar have same height\r\n    Paste in Elementor HTML widget\r\n    \r\n    =============================================\r\n    HOW TO USE:\r\n    =============================================\r\n    For MP4 videos, use data-v with full URL:\r\n        data-v=\"https:\/\/yoursite.com\/videos\/lesson1.mp4\"\r\n    \r\n    For YouTube videos, use ANY of these formats:\r\n        data-v=\"dQw4w9WgXcQ\"\r\n        data-v=\"https:\/\/www.youtube.com\/watch?v=dQw4w9WgXcQ\"\r\n        data-v=\"https:\/\/youtu.be\/dQw4w9WgXcQ\"\r\n        data-v=\"https:\/\/www.youtube.com\/embed\/dQw4w9WgXcQ\"\r\n    =============================================\r\n-->\r\n\r\n<style>\r\n   body, html {\r\n    overflow-x: hidden;\r\n}\r\n.vcp {\r\n        --blue: #1e3a8a;\r\n        --blue-light: #3b82f6;\r\n        --orange: #ff6b35;\r\n        --green: #10b981;\r\n        --dark: #0f172a;\r\n        --gray: #6b7280;\r\n        --light: #f8fafc;\r\n        font-family: 'Poppins', sans-serif;\r\n        width: 100%;\r\n        border-radius: 10px;\r\n    \r\n        overflow: hidden;\r\n        box-shadow: 0 4px 20px rgba(0,0,0,0.15);\r\n    }\r\n    .vcp * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n    \/* === HEADER === *\/\r\n    .vcp-head {\r\n        background: var(--dark);\r\n        padding: 12px 20px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n    }\r\n    .vcp-head-left {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n    .vcp-back {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        padding: 8px 14px;\r\n        background: rgba(255,255,255,0.1);\r\n        border: none;\r\n        border-radius: 6px;\r\n        color: #fff;\r\n        font-size: 13px;\r\n        cursor: pointer;\r\n        font-family: inherit;\r\n    }\r\n    .vcp-back:hover { background: rgba(255,255,255,0.2); }\r\n    .vcp-tag {\r\n        background: var(--orange);\r\n        color: #fff;\r\n        padding: 4px 10px;\r\n        border-radius: 20px;\r\n        font-size: 11px;\r\n        font-weight: 600;\r\n    }\r\n    .vcp-name {\r\n        color: #fff;\r\n        font-size: 15px;\r\n        font-weight: 600;\r\n    }\r\n    .vcp-head-right {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        color: rgba(255,255,255,0.8);\r\n        font-size: 12px;\r\n    }\r\n    .vcp-mini-bar {\r\n        width: 100px;\r\n        height: 5px;\r\n        background: rgba(255,255,255,0.2);\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n    }\r\n    .vcp-mini-fill {\r\n        height: 100%;\r\n        background: var(--green);\r\n        transition: width 0.3s;\r\n    }\r\n    .vcp-menu-btn {\r\n        display: none;\r\n        width: 38px;\r\n        height: 38px;\r\n        background: rgba(255,255,255,0.1);\r\n        border: none;\r\n        border-radius: 6px;\r\n        color: #fff;\r\n        font-size: 16px;\r\n        cursor: pointer;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    \/* === MAIN BODY - FLEX WITH STRETCH === *\/\r\n    .vcp-body {\r\n        display: flex;\r\n        align-items: stretch;\r\n        background: var(--dark);\r\n    }\r\n\r\n    \/* === LEFT SIDE - VIDEO + INFO + NAV === *\/\r\n    .vcp-left {\r\n        flex: 1;\r\n        display: flex;\r\n        flex-direction: column;\r\n        min-width: 0;\r\n    }\r\n\r\n    \/* Video Container *\/\r\n    .vcp-video-box {\r\n        position: relative;\r\n        width: 100%;\r\n        padding-top: 56.25%; \/* 16:9 Aspect Ratio *\/\r\n        background: #000;\r\n    }\r\n    .vcp-placeholder {\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: linear-gradient(135deg, var(--blue) 0%, #1e40af 100%);\r\n        color: #fff;\r\n        cursor: pointer;\r\n        transition: background 0.3s;\r\n        z-index: 2;\r\n    }\r\n    .vcp-placeholder:hover {\r\n        background: linear-gradient(135deg, var(--blue-light) 0%, var(--blue) 100%);\r\n    }\r\n    .vcp-placeholder .play-icon { font-size: 60px; margin-bottom: 10px; }\r\n    .vcp-placeholder h3 { font-size: 18px; margin-bottom: 5px; }\r\n    .vcp-placeholder p { font-size: 13px; opacity: 0.8; text-align: center; padding: 0 20px; }\r\n    .vcp-placeholder .video-type-badge {\r\n        margin-top: 10px;\r\n        padding: 4px 12px;\r\n        background: rgba(255,255,255,0.2);\r\n        border-radius: 20px;\r\n        font-size: 11px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n    \r\n    \/* Video Element Styling (for MP4) *\/\r\n    .vcp-video-box video {\r\n        position: absolute;\r\n        top: 0; left: 0;\r\n        width: 100%; height: 100%;\r\n        background: #000;\r\n        z-index: 1;\r\n    }\r\n    \r\n    \/* YouTube iframe styling *\/\r\n    .vcp-video-box iframe {\r\n        position: absolute;\r\n        top: 0; left: 0;\r\n        width: 100%; height: 100%;\r\n        border: none;\r\n        z-index: 1;\r\n    }\r\n\r\n    \/* Lesson Info Bar *\/\r\n    .vcp-info {\r\n        padding: 15px 20px;\r\n        background: var(--dark);\r\n        border-top: 1px solid rgba(255,255,255,0.1);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n    }\r\n    .vcp-info-title {\r\n        font-size: 16px;\r\n        font-weight: 600;\r\n        color: #fff;\r\n        margin-bottom: 5px;\r\n    }\r\n    .vcp-info-meta {\r\n        display: flex;\r\n        gap: 15px;\r\n        flex-wrap: wrap;\r\n    }\r\n    .vcp-meta {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n        font-size: 12px;\r\n        color: rgba(255,255,255,0.7);\r\n    }\r\n    .vcp-meta i { color: var(--orange); }\r\n    .vcp-done-btn {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        padding: 10px 16px;\r\n        background: rgba(255,255,255,0.1);\r\n        border: none;\r\n        border-radius: 6px;\r\n        color: #fff;\r\n        font-size: 13px;\r\n        font-weight: 500;\r\n        cursor: pointer;\r\n        font-family: inherit;\r\n        transition: background 0.3s;\r\n    }\r\n    .vcp-done-btn:hover { background: rgba(255,255,255,0.2); }\r\n    .vcp-done-btn.completed { background: var(--green); }\r\n\r\n    \/* Navigation Buttons *\/\r\n    .vcp-nav {\r\n        display: flex;\r\n        gap: 10px;\r\n        padding: 15px 20px;\r\n        background: var(--dark);\r\n        border-top: 1px solid rgba(255,255,255,0.05);\r\n    }\r\n    .vcp-nav-btn {\r\n        flex: 1;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        padding: 12px 15px;\r\n        border: none;\r\n        border-radius: 8px;\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        font-family: inherit;\r\n        transition: background 0.3s;\r\n    }\r\n    .vcp-nav-btn.prev {\r\n        background: rgba(255,255,255,0.1);\r\n        color: #fff;\r\n    }\r\n    .vcp-nav-btn.prev:hover { background: rgba(255,255,255,0.2); }\r\n    .vcp-nav-btn.next {\r\n        background: var(--orange);\r\n        color: #fff;\r\n    }\r\n    .vcp-nav-btn.next:hover { background: #e55a2b; }\r\n\r\n    \/* === RIGHT SIDE - SIDEBAR (FULL HEIGHT) === *\/\r\n    .vcp-right {\r\n        width: 340px;\r\n        background: #fff;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-shrink: 0;\r\n    }\r\n    .vcp-sidebar-head {\r\n        padding: 15px;\r\n        background: var(--light);\r\n        border-bottom: 1px solid #e5e7eb;\r\n        flex-shrink: 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n    }\r\n    .vcp-sidebar-top {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n    }\r\n    .vcp-sidebar-title {\r\n        font-size: 15px;\r\n        font-weight: 700;\r\n        color: #1f2937;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n    .vcp-sidebar-title i { color: var(--blue); }\r\n    .vcp-close-btn {\r\n        display: none;\r\n        width: 32px;\r\n        height: 32px;\r\n        background: #e5e7eb;\r\n        border: none;\r\n        border-radius: 50%;\r\n        color: #1f2937;\r\n        font-size: 14px;\r\n        cursor: pointer;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n    .vcp-close-btn:hover { background: #d1d5db; }\r\n    .vcp-prog-row {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    .vcp-prog-bar {\r\n        flex: 1;\r\n        height: 6px;\r\n        background: #e5e7eb;\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n    }\r\n    .vcp-prog-fill {\r\n        height: 100%;\r\n        background: var(--green);\r\n        transition: width 0.3s;\r\n    }\r\n    .vcp-prog-pct {\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        color: var(--green);\r\n    }\r\n\r\n    \/* Curriculum - TAKES REMAINING HEIGHT & SCROLLS *\/\r\n    .vcp-curriculum {\r\n        flex: 1;\r\n        overflow-y: auto;\r\n        padding: 10px;\r\n    }\r\n    .vcp-curriculum::-webkit-scrollbar { width: 5px; }\r\n    .vcp-curriculum::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }\r\n\r\n    \/* Section *\/\r\n    .vcp-sec { margin-bottom: 6px; }\r\n    .vcp-sec-head {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 10px 12px;\r\n        background: var(--light);\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        border: 2px solid transparent;\r\n        transition: all 0.3s;\r\n    }\r\n    .vcp-sec-head:hover { background: #e2e8f0; }\r\n    .vcp-sec-head.open {\r\n        background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);\r\n        border-color: var(--blue-light);\r\n    }\r\n    .vcp-sec-left {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    .vcp-sec-num {\r\n        width: 24px;\r\n        height: 24px;\r\n        background: var(--blue);\r\n        color: #fff;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 11px;\r\n        font-weight: 700;\r\n    }\r\n    .vcp-sec-name { font-size: 12px; font-weight: 600; color: #1f2937; }\r\n    .vcp-sec-info { font-size: 10px; color: var(--gray); }\r\n    .vcp-sec-arrow {\r\n        color: var(--gray);\r\n        font-size: 10px;\r\n        transition: transform 0.3s;\r\n    }\r\n    .vcp-sec-head.closed .vcp-sec-arrow { transform: rotate(-90deg); }\r\n\r\n    \/* Lessons *\/\r\n    .vcp-lessons {\r\n        padding-left: 10px;\r\n        padding-top: 6px;\r\n        display: none;\r\n    }\r\n    .vcp-lessons.show { display: block; }\r\n\r\n    \/* Lesson Item *\/\r\n    .vcp-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding: 8px 10px;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        margin-bottom: 3px;\r\n        border: 2px solid transparent;\r\n        transition: all 0.3s;\r\n    }\r\n    .vcp-item:hover { background: var(--light); }\r\n    .vcp-item.active {\r\n        background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);\r\n        border-color: var(--orange);\r\n    }\r\n    .vcp-item.done {\r\n        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\r\n    }\r\n    .vcp-item-icon {\r\n        width: 26px;\r\n        height: 26px;\r\n        background: var(--light);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 10px;\r\n        color: var(--blue);\r\n        flex-shrink: 0;\r\n    }\r\n    .vcp-item.active .vcp-item-icon { background: var(--orange); color: #fff; }\r\n    .vcp-item.done .vcp-item-icon { background: var(--green); color: #fff; }\r\n    .vcp-item-text { flex: 1; min-width: 0; }\r\n    .vcp-item-name {\r\n        font-size: 11px;\r\n        font-weight: 600;\r\n        color: #1f2937;\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n    }\r\n    .vcp-item-dur { font-size: 9px; color: var(--gray); }\r\n    .vcp-item-status { font-size: 10px; color: var(--gray); }\r\n    .vcp-item.done .vcp-item-status { color: var(--green); }\r\n    .vcp-item.active .vcp-item-status { color: var(--orange); }\r\n\r\n    \/* Overlay *\/\r\n    .vcp-overlay {\r\n        display: none;\r\n        position: fixed;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        background: rgba(0,0,0,0.5);\r\n        z-index: 999998;\r\n    }\r\n    .vcp-overlay.show { display: block; }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 1024px) {\r\n        .vcp-right {\r\n            position: fixed;\r\n            top: 0; right: 0; bottom: 0;\r\n            z-index: 999999;\r\n            transform: translateX(100%);\r\n            transition: transform 0.3s;\r\n            height: 100vh;\r\n        }\r\n        .vcp-right.show { transform: translateX(0); }\r\n        .vcp-menu-btn { display: flex; }\r\n        .vcp-close-btn { display: flex; }\r\n        .vcp-curriculum { flex: 1; }\r\n        .vcp-overlay {\r\n            z-index: 999998;\r\n        }\r\n    }\r\n    @media (max-width: 768px) {\r\n        .vcp {\r\n            margin: 0;\r\n            height: auto;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n        .vcp-head { \r\n            padding: 10px 15px; \r\n        }\r\n        .vcp-name { display: none; }\r\n        .vcp-head-right > span { display: none; }\r\n        \r\n        .vcp-body {\r\n            display: flex;\r\n            flex-direction: column;\r\n            max-height: none;\r\n            min-height: 0;\r\n            height: auto;\r\n            align-items: stretch;\r\n        }\r\n        \r\n        .vcp-left {\r\n            flex: none;\r\n            min-height: 0;\r\n            height: auto;\r\n            overflow: visible;\r\n        }\r\n        \r\n        .vcp-video-box {\r\n            padding-top: 56.25%;\r\n            margin: 0;\r\n        }\r\n        \r\n        .vcp-info { \r\n            padding: 10px 15px;\r\n            margin: 0;\r\n        }\r\n        .vcp-info-title { font-size: 14px; }\r\n        .vcp-done-btn { display: none; }\r\n        \r\n        .vcp-nav { \r\n            padding: 10px 15px;\r\n            margin: 0;\r\n        }\r\n        \r\n        .vcp-right { \r\n            width: 100%;\r\n            height: 100vh;\r\n        }\r\n          \/* Remove padding\/margin from Elementor container *\/\r\n    .elementor-widget-html {\r\n        margin-bottom: 0 !important;\r\n        padding-bottom: 0 !important;\r\n    }\r\n    \r\n    \/* Make the section fit content *\/\r\n    .elementor-section.elementor-section-full_width,\r\n    .elementor-section-wrap > .elementor-section,\r\n    .elementor-widget-wrap,\r\n    .elementor-element {\r\n        margin-bottom: 0 !important;\r\n    }\r\n    \r\n    \/* Remove any min-height from the section *\/\r\n    .elementor-section {\r\n        min-height: auto !important;\r\n    }\r\n    \r\n    \/* Make VCP fill space properly *\/\r\n    .vcp {\r\n        margin-bottom: 0 !important;\r\n    }\r\n    }\r\n    @media (max-width: 480px) {\r\n        .vcp-back span { display: none; }\r\n    }\r\n<\/style>\r\n\r\n<!-- Font Awesome for icons -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<div class=\"vcp\">\r\n    <!-- Header -->\r\n    <div class=\"vcp-head\">\r\n        <div class=\"vcp-head-left\">\r\n            <button class=\"vcp-back\" onclick=\"history.back()\"><i class=\"fas fa-arrow-left\"><\/i><span>Back<\/span><\/button>\r\n            <span class=\"vcp-tag\">Paper 1<\/span>\r\n            <span class=\"vcp-name\">Constitution of India<\/span>\r\n        <\/div>\r\n        <div class=\"vcp-head-right\">\r\n            <span id=\"vcpCnt\">8 of 27<\/span>\r\n            <div class=\"vcp-mini-bar\"><div class=\"vcp-mini-fill\" id=\"vcpMiniFill\" style=\"width:30%\"><\/div><\/div>\r\n            <button class=\"vcp-menu-btn\" onclick=\"vcpMenu()\"><i class=\"fas fa-list\"><\/i><\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Body -->\r\n    <div class=\"vcp-body\">\r\n        <!-- Left - Video Area -->\r\n        <div class=\"vcp-left\">\r\n            <div class=\"vcp-video-box\">\r\n                <!-- Placeholder - Click to Play -->\r\n                <div class=\"vcp-placeholder\" id=\"vcpPH\" onclick=\"vcpStartVideo()\">\r\n                    <i class=\"fas fa-play-circle play-icon\" id=\"vcpPlayIcon\"><\/i>\r\n                    <h3>Click to Play<\/h3>\r\n                    <p id=\"vcpPHTitle\">Introduction to Fundamental Rights<\/p>\r\n                    <div class=\"video-type-badge\" id=\"vcpTypeBadge\">\r\n                        <i class=\"fab fa-youtube\"><\/i> <span>YouTube<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- MP4 Video Element -->\r\n                <video id=\"vcpVidMP4\" style=\"display:none\" controls controlsList=\"nodownload\">\r\n                    Your browser does not support the video tag.\r\n                <\/video>\r\n                <!-- YouTube iframe -->\r\n                <iframe id=\"vcpVidYT\" \r\n                        src=\"\" \r\n                        style=\"display:none\"\r\n                        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" \r\n                        allowfullscreen>\r\n                <\/iframe>\r\n            <\/div>\r\n            <div class=\"vcp-info\">\r\n                <div>\r\n                    <div class=\"vcp-info-title\" id=\"vcpTitle\">Introduction to Fundamental Rights<\/div>\r\n                    <div class=\"vcp-info-meta\">\r\n                        <span class=\"vcp-meta\"><i class=\"fas fa-play-circle\"><\/i><span id=\"vcpNum\">Lesson 9 of 27<\/span><\/span>\r\n                        <span class=\"vcp-meta\"><i class=\"fas fa-clock\"><\/i><span id=\"vcpDur\">18 mins<\/span><\/span>\r\n                        <span class=\"vcp-meta\"><i class=\"fas fa-folder\"><\/i><span id=\"vcpSec\">Fundamental Rights<\/span><\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                <button class=\"vcp-done-btn\" id=\"vcpDoneBtn\" onclick=\"vcpDone()\"><i class=\"fas fa-check-circle\"><\/i> Mark Complete<\/button>\r\n            <\/div>\r\n            <div class=\"vcp-nav\">\r\n                <button class=\"vcp-nav-btn prev\" onclick=\"vcpPrev()\"><i class=\"fas fa-chevron-left\"><\/i> Previous<\/button>\r\n                <button class=\"vcp-nav-btn next\" onclick=\"vcpNext()\">Next Lesson <i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Right - Sidebar (Full Height) -->\r\n        <div class=\"vcp-right\" id=\"vcpSidebar\">\r\n            <div class=\"vcp-sidebar-head\">\r\n                <div class=\"vcp-sidebar-top\">\r\n                    <div class=\"vcp-sidebar-title\"><i class=\"fas fa-list-ul\"><\/i> Course Content<\/div>\r\n                    <button class=\"vcp-close-btn\" onclick=\"vcpMenu()\"><i class=\"fas fa-times\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"vcp-prog-row\">\r\n                    <div class=\"vcp-prog-bar\"><div class=\"vcp-prog-fill\" id=\"vcpProgFill\" style=\"width:30%\"><\/div><\/div>\r\n                    <span class=\"vcp-prog-pct\" id=\"vcpProgPct\">30%<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"vcp-curriculum\">\r\n                \r\n                <!-- ============================================ -->\r\n                <!-- SECTION 1: INTRODUCTION (MP4 EXAMPLES) -->\r\n                <!-- ============================================ -->\r\n                <div class=\"vcp-sec\">\r\n                    <div class=\"vcp-sec-head closed\" onclick=\"vcpToggle(this)\">\r\n                        <div class=\"vcp-sec-left\">\r\n                            <div class=\"vcp-sec-num\">1<\/div>\r\n                            <div><div class=\"vcp-sec-name\">Introduction<\/div><div class=\"vcp-sec-info\">4 lessons \u2022 45 mins<\/div><\/div>\r\n                        <\/div>\r\n                        <i class=\"fas fa-chevron-down vcp-sec-arrow\"><\/i>\r\n                    <\/div>\r\n                    <div class=\"vcp-lessons\">\r\n                        <!-- \r\n                        =============================================\r\n                        MP4 VIDEO EXAMPLES:\r\n                        Use full URL ending in .mp4, .webm, .ogg\r\n                        =============================================\r\n                        -->\r\n                        \r\n                        <!-- LESSON 1 - MP4 Example -->\r\n                        <div class=\"vcp-item done\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Welcome & Course Overview\" \r\n                             data-d=\"8 mins\" \r\n                             data-s=\"Introduction\"\r\n                             data-v=\"https:\/\/yoursite.com\/videos\/lesson1.mp4\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-check\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Welcome & Course Overview<\/div>\r\n                                <div class=\"vcp-item-dur\">8 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 2 - MP4 Example -->\r\n                        <div class=\"vcp-item done\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Making of Constitution\" \r\n                             data-d=\"15 mins\" \r\n                             data-s=\"Introduction\"\r\n                             data-v=\"https:\/\/yoursite.com\/videos\/lesson2.mp4\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-check\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Making of Constitution<\/div>\r\n                                <div class=\"vcp-item-dur\">15 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 3 - MP4 Example -->\r\n                        <div class=\"vcp-item done\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Preamble & Its Significance\" \r\n                             data-d=\"12 mins\" \r\n                             data-s=\"Introduction\"\r\n                             data-v=\"https:\/\/yoursite.com\/videos\/lesson3.mp4\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-check\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Preamble & Its Significance<\/div>\r\n                                <div class=\"vcp-item-dur\">12 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 4 - MP4 Example -->\r\n                        <div class=\"vcp-item done\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Salient Features\" \r\n                             data-d=\"10 mins\" \r\n                             data-s=\"Introduction\"\r\n                             data-v=\"https:\/\/yoursite.com\/videos\/lesson4.mp4\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-check\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Salient Features<\/div>\r\n                                <div class=\"vcp-item-dur\">10 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- ============================================ -->\r\n                <!-- SECTION 2: UNION & TERRITORY (YOUTUBE EXAMPLES) -->\r\n                <!-- ============================================ -->\r\n                <div class=\"vcp-sec\">\r\n                    <div class=\"vcp-sec-head closed\" onclick=\"vcpToggle(this)\">\r\n                        <div class=\"vcp-sec-left\">\r\n                            <div class=\"vcp-sec-num\">2<\/div>\r\n                            <div><div class=\"vcp-sec-name\">Union & Territory<\/div><div class=\"vcp-sec-info\">5 lessons \u2022 55 mins<\/div><\/div>\r\n                        <\/div>\r\n                        <i class=\"fas fa-chevron-down vcp-sec-arrow\"><\/i>\r\n                    <\/div>\r\n                    <div class=\"vcp-lessons\">\r\n                        <!-- \r\n                        =============================================\r\n                        YOUTUBE VIDEO EXAMPLES:\r\n                        Use Video ID or full YouTube URL\r\n                        =============================================\r\n                        -->\r\n                        \r\n                        <!-- LESSON 5 - YouTube ID only -->\r\n                        <div class=\"vcp-item done\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Part I - Union & Its Territory\" \r\n                             data-d=\"12 mins\" \r\n                             data-s=\"Union & Territory\"\r\n                             data-v=\"dQw4w9WgXcQ\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-check\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Part I - Union & Its Territory<\/div>\r\n                                <div class=\"vcp-item-dur\">12 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 6 - YouTube full URL -->\r\n                        <div class=\"vcp-item done\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Citizenship - Part II\" \r\n                             data-d=\"14 mins\" \r\n                             data-s=\"Union & Territory\"\r\n                             data-v=\"https:\/\/www.youtube.com\/watch?v=YOUR_VIDEO_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-check\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Citizenship - Part II<\/div>\r\n                                <div class=\"vcp-item-dur\">14 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 7 - YouTube short URL -->\r\n                        <div class=\"vcp-item done\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Acquisition & Loss of Citizenship\" \r\n                             data-d=\"10 mins\" \r\n                             data-s=\"Union & Territory\"\r\n                             data-v=\"https:\/\/youtu.be\/YOUR_VIDEO_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-check\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Acquisition & Loss<\/div>\r\n                                <div class=\"vcp-item-dur\">10 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 8 - YouTube embed URL -->\r\n                        <div class=\"vcp-item done\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Citizenship Amendment Act\" \r\n                             data-d=\"8 mins\" \r\n                             data-s=\"Union & Territory\"\r\n                             data-v=\"https:\/\/www.youtube.com\/embed\/YOUR_VIDEO_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-check\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Citizenship Amendment Act<\/div>\r\n                                <div class=\"vcp-item-dur\">8 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 9 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Overseas Citizenship\" \r\n                             data-d=\"11 mins\" \r\n                             data-s=\"Union & Territory\"\r\n                             data-v=\"YOUR_YOUTUBE_VIDEO_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Overseas Citizenship<\/div>\r\n                                <div class=\"vcp-item-dur\">11 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- ============================================ -->\r\n                <!-- SECTION 3: FUNDAMENTAL RIGHTS (MIXED EXAMPLES) -->\r\n                <!-- ============================================ -->\r\n                <div class=\"vcp-sec\">\r\n                    <div class=\"vcp-sec-head open\" onclick=\"vcpToggle(this)\">\r\n                        <div class=\"vcp-sec-left\">\r\n                            <div class=\"vcp-sec-num\">3<\/div>\r\n                            <div><div class=\"vcp-sec-name\">Fundamental Rights<\/div><div class=\"vcp-sec-info\">8 lessons \u2022 1h 30m<\/div><\/div>\r\n                        <\/div>\r\n                        <i class=\"fas fa-chevron-down vcp-sec-arrow\"><\/i>\r\n                    <\/div>\r\n                    <div class=\"vcp-lessons show\">\r\n                        <!-- \r\n                        =============================================\r\n                        MIXED EXAMPLES - MP4 AND YOUTUBE\r\n                        =============================================\r\n                        -->\r\n                        \r\n                        <!-- LESSON 10 - ACTIVE - YouTube -->\r\n                        <div class=\"vcp-item active\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Introduction to Fundamental Rights\" \r\n                             data-d=\"18 mins\" \r\n                             data-s=\"Fundamental Rights\"\r\n                             data-v=\"dQw4w9WgXcQ\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Introduction to FR<\/div>\r\n                                <div class=\"vcp-item-dur\">18 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-play-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 11 - MP4 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Right to Equality (Art 14-18)\" \r\n                             data-d=\"20 mins\" \r\n                             data-s=\"Fundamental Rights\"\r\n                             data-v=\"https:\/\/yoursite.com\/videos\/right-to-equality.mp4\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Right to Equality<\/div>\r\n                                <div class=\"vcp-item-dur\">20 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 12 - YouTube -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Right to Freedom (Art 19-22)\" \r\n                             data-d=\"22 mins\" \r\n                             data-s=\"Fundamental Rights\"\r\n                             data-v=\"YOUR_YOUTUBE_VIDEO_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Right to Freedom<\/div>\r\n                                <div class=\"vcp-item-dur\">22 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 13 - MP4 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Right against Exploitation\" \r\n                             data-d=\"12 mins\" \r\n                             data-s=\"Fundamental Rights\"\r\n                             data-v=\"https:\/\/yoursite.com\/videos\/exploitation.mp4\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Right against Exploitation<\/div>\r\n                                <div class=\"vcp-item-dur\">12 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 14 - YouTube -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Right to Freedom of Religion\" \r\n                             data-d=\"15 mins\" \r\n                             data-s=\"Fundamental Rights\"\r\n                             data-v=\"YOUR_YOUTUBE_VIDEO_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Freedom of Religion<\/div>\r\n                                <div class=\"vcp-item-dur\">15 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 15 - MP4 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Cultural & Educational Rights\" \r\n                             data-d=\"10 mins\" \r\n                             data-s=\"Fundamental Rights\"\r\n                             data-v=\"https:\/\/yoursite.com\/videos\/cultural-rights.mp4\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Cultural & Educational<\/div>\r\n                                <div class=\"vcp-item-dur\">10 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 16 - YouTube -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Right to Constitutional Remedies\" \r\n                             data-d=\"18 mins\" \r\n                             data-s=\"Fundamental Rights\"\r\n                             data-v=\"YOUR_YOUTUBE_VIDEO_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Constitutional Remedies<\/div>\r\n                                <div class=\"vcp-item-dur\">18 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 17 - MP4 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Writs & Their Types\" \r\n                             data-d=\"15 mins\" \r\n                             data-s=\"Fundamental Rights\"\r\n                             data-v=\"https:\/\/yoursite.com\/videos\/writs.mp4\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Writs & Their Types<\/div>\r\n                                <div class=\"vcp-item-dur\">15 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- ============================================ -->\r\n                <!-- SECTION 4: DPSP & DUTIES -->\r\n                <!-- ============================================ -->\r\n                <div class=\"vcp-sec\">\r\n                    <div class=\"vcp-sec-head closed\" onclick=\"vcpToggle(this)\">\r\n                        <div class=\"vcp-sec-left\">\r\n                            <div class=\"vcp-sec-num\">4<\/div>\r\n                            <div><div class=\"vcp-sec-name\">DPSP & Duties<\/div><div class=\"vcp-sec-info\">5 lessons \u2022 1h 5m<\/div><\/div>\r\n                        <\/div>\r\n                        <i class=\"fas fa-chevron-down vcp-sec-arrow\"><\/i>\r\n                    <\/div>\r\n                    <div class=\"vcp-lessons\">\r\n                        <!-- LESSON 18 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Introduction to DPSP\" \r\n                             data-d=\"15 mins\" \r\n                             data-s=\"DPSP\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Introduction to DPSP<\/div>\r\n                                <div class=\"vcp-item-dur\">15 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 19 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Classification of DPSP\" \r\n                             data-d=\"12 mins\" \r\n                             data-s=\"DPSP\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Classification of DPSP<\/div>\r\n                                <div class=\"vcp-item-dur\">12 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 20 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"DPSP vs Fundamental Rights\" \r\n                             data-d=\"18 mins\" \r\n                             data-s=\"DPSP\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">DPSP vs FR<\/div>\r\n                                <div class=\"vcp-item-dur\">18 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 21 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Fundamental Duties\" \r\n                             data-d=\"12 mins\" \r\n                             data-s=\"DPSP\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Fundamental Duties<\/div>\r\n                                <div class=\"vcp-item-dur\">12 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 22 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Verma Committee\" \r\n                             data-d=\"8 mins\" \r\n                             data-s=\"DPSP\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Verma Committee<\/div>\r\n                                <div class=\"vcp-item-dur\">8 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- ============================================ -->\r\n                <!-- SECTION 5: UNION EXECUTIVE -->\r\n                <!-- ============================================ -->\r\n                <div class=\"vcp-sec\">\r\n                    <div class=\"vcp-sec-head closed\" onclick=\"vcpToggle(this)\">\r\n                        <div class=\"vcp-sec-left\">\r\n                            <div class=\"vcp-sec-num\">5<\/div>\r\n                            <div><div class=\"vcp-sec-name\">Union Executive<\/div><div class=\"vcp-sec-info\">5 lessons \u2022 1h 20m<\/div><\/div>\r\n                        <\/div>\r\n                        <i class=\"fas fa-chevron-down vcp-sec-arrow\"><\/i>\r\n                    <\/div>\r\n                    <div class=\"vcp-lessons\">\r\n                        <!-- LESSON 23 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"President of India\" \r\n                             data-d=\"20 mins\" \r\n                             data-s=\"Union Executive\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">President of India<\/div>\r\n                                <div class=\"vcp-item-dur\">20 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 24 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Vice President\" \r\n                             data-d=\"12 mins\" \r\n                             data-s=\"Union Executive\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Vice President<\/div>\r\n                                <div class=\"vcp-item-dur\">12 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 25 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Prime Minister & Council\" \r\n                             data-d=\"18 mins\" \r\n                             data-s=\"Union Executive\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Prime Minister<\/div>\r\n                                <div class=\"vcp-item-dur\">18 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 26 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"Attorney General\" \r\n                             data-d=\"15 mins\" \r\n                             data-s=\"Union Executive\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">Attorney General<\/div>\r\n                                <div class=\"vcp-item-dur\">15 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- LESSON 27 -->\r\n                        <div class=\"vcp-item\" onclick=\"vcpPlay(this)\" \r\n                             data-t=\"CAG\" \r\n                             data-d=\"15 mins\" \r\n                             data-s=\"Union Executive\"\r\n                             data-v=\"YOUR_VIDEO_URL_OR_YOUTUBE_ID\">\r\n                            <div class=\"vcp-item-icon\"><i class=\"fas fa-play\"><\/i><\/div>\r\n                            <div class=\"vcp-item-text\">\r\n                                <div class=\"vcp-item-name\">CAG<\/div>\r\n                                <div class=\"vcp-item-dur\">15 mins<\/div>\r\n                            <\/div>\r\n                            <div class=\"vcp-item-status\"><i class=\"fas fa-circle\"><\/i><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<div class=\"vcp-overlay\" id=\"vcpOL\" onclick=\"vcpMenu()\"><\/div>\r\n\r\n<script>\r\n\/\/ ============================================\r\n\/\/ VIDEO COURSE PLAYER - JAVASCRIPT\r\n\/\/ SUPPORTS BOTH MP4 AND YOUTUBE VIDEOS\r\n\/\/ ============================================\r\n\r\n\/\/ Track currently open section\r\nlet vcpOpen = document.querySelector('.vcp-sec-head.open');\r\n\r\n\/\/ Store current video URL\/ID and type\r\nlet currentVideoUrl = '';\r\nlet currentVideoType = 'youtube'; \/\/ 'youtube' or 'mp4'\r\n\r\n\/\/ Toggle mobile menu\r\nfunction vcpMenu() {\r\n    document.getElementById('vcpSidebar').classList.toggle('show');\r\n    document.getElementById('vcpOL').classList.toggle('show');\r\n}\r\n\r\n\/\/ Toggle section accordion\r\nfunction vcpToggle(h) {\r\n    const l = h.nextElementSibling;\r\n    const isOpen = l.classList.contains('show');\r\n    \r\n    \/\/ Close previously open section\r\n    if (vcpOpen && vcpOpen !== h) {\r\n        vcpOpen.classList.remove('open');\r\n        vcpOpen.classList.add('closed');\r\n        vcpOpen.nextElementSibling.classList.remove('show');\r\n    }\r\n    \r\n    if (isOpen) {\r\n        h.classList.remove('open');\r\n        h.classList.add('closed');\r\n        l.classList.remove('show');\r\n        vcpOpen = null;\r\n    } else {\r\n        h.classList.remove('closed');\r\n        h.classList.add('open');\r\n        l.classList.add('show');\r\n        vcpOpen = h;\r\n    }\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ DETECT VIDEO TYPE (MP4 or YouTube)\r\n\/\/ ============================================\r\nfunction detectVideoType(input) {\r\n    if (!input) return { type: 'unknown', url: null };\r\n    \r\n    \/\/ Check if it's an MP4\/video file\r\n    if (input.match(\/\\.(mp4|webm|ogg|mov|avi)(\\?.*)?$\/i)) {\r\n        return { type: 'mp4', url: input };\r\n    }\r\n    \r\n    \/\/ Check if it's a YouTube video\r\n    const youtubeId = getYouTubeVideoId(input);\r\n    if (youtubeId) {\r\n        return { type: 'youtube', id: youtubeId };\r\n    }\r\n    \r\n    \/\/ Default: treat as unknown\/YouTube ID\r\n    if (\/^[a-zA-Z0-9_-]{11}$\/.test(input)) {\r\n        return { type: 'youtube', id: input };\r\n    }\r\n    \r\n    return { type: 'unknown', url: input };\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ EXTRACT YOUTUBE VIDEO ID\r\n\/\/ Supports multiple URL formats\r\n\/\/ ============================================\r\nfunction getYouTubeVideoId(input) {\r\n    if (!input) return null;\r\n    \r\n    \/\/ If it's already just a video ID (11 characters)\r\n    if (\/^[a-zA-Z0-9_-]{11}$\/.test(input)) {\r\n        return input;\r\n    }\r\n    \r\n    \/\/ Standard YouTube URL: youtube.com\/watch?v=VIDEO_ID\r\n    let match = input.match(\/[?&]v=([a-zA-Z0-9_-]{11})\/);\r\n    if (match) return match[1];\r\n    \r\n    \/\/ Short URL: youtu.be\/VIDEO_ID\r\n    match = input.match(\/youtu\\.be\\\/([a-zA-Z0-9_-]{11})\/);\r\n    if (match) return match[1];\r\n    \r\n    \/\/ Embed URL: youtube.com\/embed\/VIDEO_ID\r\n    match = input.match(\/youtube\\.com\\\/embed\\\/([a-zA-Z0-9_-]{11})\/);\r\n    if (match) return match[1];\r\n    \r\n    \/\/ YouTube Shorts: youtube.com\/shorts\/VIDEO_ID\r\n    match = input.match(\/youtube\\.com\\\/shorts\\\/([a-zA-Z0-9_-]{11})\/);\r\n    if (match) return match[1];\r\n    \r\n    return null;\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ UPDATE PLACEHOLDER BADGE\r\n\/\/ ============================================\r\nfunction updateTypeBadge(type) {\r\n    const badge = document.getElementById('vcpTypeBadge');\r\n    const icon = document.getElementById('vcpPlayIcon');\r\n    \r\n    if (type === 'mp4') {\r\n        badge.innerHTML = '<i class=\"fas fa-film\"><\/i> <span>MP4 Video<\/span>';\r\n        icon.className = 'fas fa-play-circle play-icon';\r\n    } else {\r\n        badge.innerHTML = '<i class=\"fab fa-youtube\"><\/i> <span>YouTube<\/span>';\r\n        icon.className = 'fab fa-youtube play-icon';\r\n    }\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ PLAY SELECTED LESSON\r\n\/\/ ============================================\r\nfunction vcpPlay(e) {\r\n    \/\/ Remove active class from all items\r\n    document.querySelectorAll('.vcp-item').forEach(i => i.classList.remove('active'));\r\n    \r\n    \/\/ Add active class to clicked item\r\n    e.classList.add('active');\r\n    \r\n    \/\/ Update info display\r\n    document.getElementById('vcpTitle').textContent = e.dataset.t;\r\n    document.getElementById('vcpPHTitle').textContent = e.dataset.t;\r\n    document.getElementById('vcpDur').textContent = e.dataset.d;\r\n    document.getElementById('vcpSec').textContent = e.dataset.s;\r\n    \r\n    \/\/ Store the video URL\/ID from data-v attribute\r\n    currentVideoUrl = e.dataset.v || '';\r\n    \r\n    \/\/ Detect video type and update badge\r\n    const videoInfo = detectVideoType(currentVideoUrl);\r\n    currentVideoType = videoInfo.type;\r\n    updateTypeBadge(currentVideoType);\r\n    \r\n    \/\/ Reset to placeholder view (stop any playing video)\r\n    document.getElementById('vcpPH').style.display = 'flex';\r\n    \r\n    \/\/ Hide and reset both players\r\n    const mp4Player = document.getElementById('vcpVidMP4');\r\n    const ytPlayer = document.getElementById('vcpVidYT');\r\n    \r\n    mp4Player.pause();\r\n    mp4Player.style.display = 'none';\r\n    mp4Player.src = '';\r\n    \r\n    ytPlayer.style.display = 'none';\r\n    ytPlayer.src = '';\r\n    \r\n    \/\/ Update lesson counter\r\n    const all = Array.from(document.querySelectorAll('.vcp-item'));\r\n    document.getElementById('vcpNum').textContent = 'Lesson ' + (all.indexOf(e) + 1) + ' of ' + all.length;\r\n    \r\n    \/\/ Update done button state\r\n    const btn = document.getElementById('vcpDoneBtn');\r\n    if (e.classList.contains('done')) {\r\n        btn.classList.add('completed');\r\n        btn.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Completed';\r\n    } else {\r\n        btn.classList.remove('completed');\r\n        btn.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Mark Complete';\r\n    }\r\n    \r\n    \/\/ Close mobile menu if open\r\n    if (window.innerWidth <= 1024) vcpMenu();\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ START VIDEO PLAYBACK\r\n\/\/ ============================================\r\nfunction vcpStartVideo() {\r\n    const videoInfo = detectVideoType(currentVideoUrl);\r\n    \r\n    if (videoInfo.type === 'unknown' || !currentVideoUrl) {\r\n        alert('No valid video found for this lesson.\\n\\nPlease add a video URL in the data-v attribute.\\n\\nFor MP4:\\ndata-v=\"https:\/\/yoursite.com\/video.mp4\"\\n\\nFor YouTube:\\ndata-v=\"dQw4w9WgXcQ\" or full URL');\r\n        return;\r\n    }\r\n    \r\n    \/\/ Hide placeholder\r\n    document.getElementById('vcpPH').style.display = 'none';\r\n    \r\n    if (videoInfo.type === 'mp4') {\r\n        \/\/ Play MP4 video\r\n        const mp4Player = document.getElementById('vcpVidMP4');\r\n        mp4Player.src = videoInfo.url;\r\n        mp4Player.style.display = 'block';\r\n        mp4Player.play();\r\n    } else if (videoInfo.type === 'youtube') {\r\n        \/\/ Play YouTube video\r\n        const ytPlayer = document.getElementById('vcpVidYT');\r\n        const embedUrl = `https:\/\/www.youtube.com\/embed\/${videoInfo.id}?autoplay=1&rel=0&modestbranding=1`;\r\n        ytPlayer.src = embedUrl;\r\n        ytPlayer.style.display = 'block';\r\n    }\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ MARK LESSON AS COMPLETE\r\n\/\/ ============================================\r\nfunction vcpDone() {\r\n    const a = document.querySelector('.vcp-item.active');\r\n    const btn = document.getElementById('vcpDoneBtn');\r\n    \r\n    if (a && !a.classList.contains('done')) {\r\n        a.classList.add('done');\r\n        a.querySelector('.vcp-item-icon').innerHTML = '<i class=\"fas fa-check\"><\/i>';\r\n        a.querySelector('.vcp-item-status').innerHTML = '<i class=\"fas fa-check-circle\"><\/i>';\r\n        btn.classList.add('completed');\r\n        btn.innerHTML = '<i class=\"fas fa-check-circle\"><\/i> Completed';\r\n        vcpUpd();\r\n        \r\n        \/\/ Auto-advance to next lesson after short delay\r\n        setTimeout(vcpNext, 800);\r\n    }\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ UPDATE PROGRESS INDICATORS\r\n\/\/ ============================================\r\nfunction vcpUpd() {\r\n    const d = document.querySelectorAll('.vcp-item.done').length;\r\n    const t = document.querySelectorAll('.vcp-item').length;\r\n    const p = Math.round((d \/ t) * 100);\r\n    \r\n    document.getElementById('vcpProgFill').style.width = p + '%';\r\n    document.getElementById('vcpMiniFill').style.width = p + '%';\r\n    document.getElementById('vcpProgPct').textContent = p + '%';\r\n    document.getElementById('vcpCnt').textContent = d + ' of ' + t;\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ NAVIGATE TO NEXT LESSON\r\n\/\/ ============================================\r\nfunction vcpNext() {\r\n    const all = Array.from(document.querySelectorAll('.vcp-item'));\r\n    const a = document.querySelector('.vcp-item.active');\r\n    const i = all.indexOf(a);\r\n    \r\n    if (i < all.length - 1) {\r\n        const n = all[i + 1];\r\n        const ph = n.closest('.vcp-sec').querySelector('.vcp-sec-head');\r\n        \r\n        \/\/ Open section if closed\r\n        if (!n.closest('.vcp-lessons').classList.contains('show')) {\r\n            vcpToggle(ph);\r\n        }\r\n        vcpPlay(n);\r\n    }\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ NAVIGATE TO PREVIOUS LESSON\r\n\/\/ ============================================\r\nfunction vcpPrev() {\r\n    const all = Array.from(document.querySelectorAll('.vcp-item'));\r\n    const a = document.querySelector('.vcp-item.active');\r\n    const i = all.indexOf(a);\r\n    \r\n    if (i > 0) {\r\n        const p = all[i - 1];\r\n        const ph = p.closest('.vcp-sec').querySelector('.vcp-sec-head');\r\n        \r\n        \/\/ Open section if closed\r\n        if (!p.closest('.vcp-lessons').classList.contains('show')) {\r\n            vcpToggle(ph);\r\n        }\r\n        vcpPlay(p);\r\n    }\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ AUTO-MARK COMPLETE WHEN MP4 VIDEO ENDS\r\n\/\/ ============================================\r\ndocument.getElementById('vcpVidMP4').addEventListener('ended', function() {\r\n    vcpDone();\r\n});\r\n\r\n\/\/ ============================================\r\n\/\/ INITIALIZE\r\n\/\/ ============================================\r\nvcpUpd();\r\n\r\n\/\/ Set initial video URL from active lesson\r\nconst initialActive = document.querySelector('.vcp-item.active');\r\nif (initialActive) {\r\n    currentVideoUrl = initialActive.dataset.v || '';\r\n    const videoInfo = detectVideoType(currentVideoUrl);\r\n    currentVideoType = videoInfo.type;\r\n    updateTypeBadge(currentVideoType);\r\n}\r\n<\/script>\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>Back Paper 1 Constitution of India 8 of 27 Click to Play Introduction to Fundamental Rights YouTube Your browser does [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","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":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"disabled","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":""},"categories":[],"tags":[],"class_list":["post-7224","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/7224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7224"}],"version-history":[{"count":130,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/7224\/revisions"}],"predecessor-version":[{"id":9649,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/7224\/revisions\/9649"}],"wp:attachment":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}