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