{"id":2422,"date":"2025-09-19T10:13:59","date_gmt":"2025-09-19T10:13:59","guid":{"rendered":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/?page_id=2422"},"modified":"2025-09-19T10:43:15","modified_gmt":"2025-09-19T10:43:15","slug":"vpayo-bernyanyi","status":"publish","type":"page","link":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpayo-bernyanyi\/","title":{"rendered":"vpayo-bernyanyi"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"utf-8\"\/>\n    <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\n    <title>Jenjang PAUD<\/title>\n    <style>\n        body {\n            margin: 0;\n            font-family: 'Poppins', sans-serif;\n            background-color: #f0f4f8;\n            color: #333;\n            line-height: 1.6;\n        }\n\n        .nav-paud {\n            background: #0a4a82;\n            position: sticky;\n            top: 0;\n            z-index: 1000;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 0 10px;\n        }\n\n        .menu-paud {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n            display: flex;\n        }\n\n        .menu-paud > li {\n            position: relative;\n        }\n\n        .menu-paud > li > a {\n            display: block;\n            padding: 14px 20px;\n            color: #fff;\n            text-decoration: none;\n            font-weight: 500;\n        }\n\n        .menu-paud > li > a:hover {\n            background: #0e5aa0;\n        }\n\n        .submenu {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n            position: absolute;\n            top: 100%;\n            left: 0;\n            background: #0e5aa0;\n            display: none;\n            min-width: 220px;\n        }\n\n        .submenu li a {\n            display: block;\n            padding: 12px 16px;\n            color: #fff;\n            text-decoration: none;\n            white-space: nowrap;\n        }\n\n        .submenu li a:hover {\n            background: #1372cf;\n        }\n\n        .menu-paud > li:hover .submenu {\n            display: block;\n        }\n\n        .hamburger {\n            display: none;\n            cursor: pointer;\n            font-size: 22px;\n            color: #fff;\n            padding: 14px 20px;\n            background: #0a4a82;\n            border: none;\n            order: -1; \n        }\n\n        .search-container {\n            display: flex;\n            align-items: center;\n        }\n        \n        .search-container input[type=\"search\"] {\n            padding: 6px 10px;\n            border: 1px solid #5f99cf; \n            border-radius: 5px;\n            font-size: 14px;\n            background-color: #0e5aa0; \n            color: #ffffff; \n        }\n        \n        .search-container input[type=\"search\"]::placeholder {\n            color: #d1d1d1; \n        }\n\n        @media (max-width: 900px) {\n            .nav-paud {\n                flex-wrap: wrap;\n            }\n\n            .menu-paud {\n                flex-direction: column;\n                display: none;\n                width: 100%;\n                order: 3; \n            }\n\n            .menu-paud.active {\n                display: flex;\n            }\n\n            .menu-paud > li {\n                width: 100%;\n            }\n\n            .submenu {\n                position: static;\n                display: none;\n                background: #1372cf;\n            }\n\n            .menu-paud > li.open > .submenu {\n                display: block;\n            }\n\n            .hamburger {\n                display: block;\n            }\n            \n            .search-container {\n                margin-left: auto; \n            }\n\n            .menu-paud > li > a {\n                padding: 12px 16px;\n            }\n        }\n\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 20px;\n        }\n\n        .page-header {\n            background-color: #ffd700;\n            color: #333;\n            text-align: center;\n            padding: 40px 20px;\n            border-radius: 10px;\n            margin-bottom: 40px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n        }\n\n        .page-header h1 {\n            font-size: 3rem;\n            font-weight: 600;\n            margin-bottom: 10px;\n        }\n\n        .page-header-logos {\n            display: flex;\n            justify-content: center;\n            gap: 20px;\n        }\n        \n        @media (max-width: 600px) {\n            .page-header-logos {\n                flex-direction: column;\n                align-items: center;\n            }\n        }\n\n        .page-header-logos a {\n            display: inline-block;\n            transition: transform 0.3s ease;\n        }\n\n        .page-header-logos a:hover {\n            transform: scale(1.05);\n        }\n\n        .page-header-logos img {\n            height: 80px;\n            width: auto;\n        }\n\n        .content-section {\n            background-color: #fff;\n            padding: 30px;\n            border-radius: 10px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n            margin-bottom: 40px;\n        }\n\n        .section-title {\n            font-size: 2.5rem;\n            color: #007bff;\n            text-align: center;\n            margin-bottom: 20px;\n        }\n\n        .content-row {\n            display: flex;\n            align-items: center;\n            gap: 30px;\n            margin-bottom: 30px;\n        }\n\n        .image-col {\n            flex-shrink: 0;\n            text-align: center;\n        }\n\n        .image-col img {\n            max-width: 200px;\n            height: auto;\n        }\n\n        .text-col {\n            flex-grow: 1;\n        }\n\n        .text-col p {\n            font-size: 1rem;\n            text-align: justify;\n        }\n\n        hr {\n            border: none;\n            height: 3px;\n            background-color: #007bff;\n            margin: 40px 0;\n        }\n\n        .video-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n            gap: 20px;\n        }\n\n        .video-item {\n            background-color: #f9f9f9;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n        \n        .video-thumbnail-container {\n            position: relative;\n            cursor: pointer;\n            overflow: hidden;\n            border-radius: 5px;\n            margin-bottom: 15px;\n        }\n        \n        .video-thumbnail-container img {\n            width: 100%;\n            height: auto;\n            display: block;\n            transition: transform 0.3s ease;\n        }\n        \n        .video-thumbnail-container:hover img {\n            transform: scale(1.05);\n        }\n        \n        .video-thumbnail-container .play-icon {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            color: #fff;\n            font-size: 3rem;\n            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\n            opacity: 0.8;\n            transition: opacity 0.3s ease;\n        }\n        \n        .video-thumbnail-container:hover .play-icon {\n            opacity: 1;\n        }\n\n        .video-details {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            text-align: center;\n        }\n\n        .video-title {\n            font-size: 1.5rem;\n            color: #0056b3;\n            margin: 0;\n        }\n        \n        .play-buttons {\n            display: flex;\n            justify-content: center;\n            gap: 10px;\n            margin-top: 10px;\n            margin-bottom: 15px;\n        }\n\n        .play-btn {\n            background-color: #007bff;\n            color: #fff;\n            border: none;\n            padding: 8px 16px;\n            border-radius: 5px;\n            cursor: pointer;\n            font-size: 0.9rem;\n            transition: background-color 0.3s ease, transform 0.2s ease;\n        }\n\n        .play-btn:hover {\n            background-color: #0056b3;\n            transform: translateY(-2px);\n        }\n\n        .video-description {\n            font-size: 0.9rem;\n            color: #555;\n            text-align: justify;\n            margin-top: 15px;\n        }\n\n        .guidance-link-btn {\n            display: block;\n            background-color: #1abc9c;\n            color: #fff;\n            padding: 10px 15px;\n            border-radius: 5px;\n            text-decoration: none;\n            font-weight: bold;\n            margin-top: 15px;\n            transition: background-color 0.3s ease, transform 0.2s ease;\n            text-align: center;\n            cursor: pointer;\n            border: none;\n        }\n        \n        .guidance-link-btn:hover {\n            background-color: #16a085;\n            transform: translateY(-2px);\n        }\n        \n        .modal {\n            display: none;\n            position: fixed;\n            z-index: 2000; \n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.9);\n            justify-content: center;\n            align-items: center;\n        }\n\n        .modal-content {\n            background-color: #000;\n            padding: 0;\n            position: relative;\n            width: 100%;\n            height: 100%;\n            border-radius: 0;\n            box-shadow: none;\n        }\n\n        .close-btn {\n            color: #fff;\n            position: absolute;\n            top: 15px;\n            right: 35px;\n            font-size: 40px;\n            font-weight: bold;\n            cursor: pointer;\n            transition: color 0.2s;\n            z-index: 2001;\n        }\n\n        .close-btn:hover,\n        .close-btn:focus {\n            color: #ccc;\n        }\n        \n        #video-modal-container {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            max-width: 1280px; \n            transform: translate(-50%, -50%);\n            padding-bottom: 56.25%; \n            height: 0;\n        }\n\n        #video-modal-container iframe {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            border: none;\n        }\n\n        @media (max-width: 768px) {\n            .page-header h1 {\n                font-size: 2rem;\n            }\n\n            .page-header-logos img {\n                height: 60px;\n            }\n\n            .content-row {\n                flex-direction: column;\n            }\n\n            .image-col img {\n                max-width: 150px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n<nav class=\"nav-paud\">\n    <button aria-label=\"Menu\" class=\"hamburger\">\u2630<\/button>\n    <ul class=\"menu-paud\">\n        <li>\n            <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vppaud\/\">Jenjang PAUD<\/a>\n            <ul class=\"submenu\">\n                <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpayo-bernyanyi\/\">Ayo Bernyanyi<\/a><\/li>\n                <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpmentari\/\">Mentari<\/a><\/li>\n            <\/ul>\n        <\/li>\n        <li>\n            <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpsd\/\">Jenjang SD<\/a>\n            <ul class=\"submenu\">\n                <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpseni-musik\/\">Seni Musik<\/a><\/li>\n                <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpseri-literasi\/\">Seri Literasi<\/a><\/li>\n                <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpseri-numerasi\/\">Seri Numerasi<\/a><\/li>\n            <\/ul>\n        <\/li>\n        <li>\n            <a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpsma\/\">Jenjang SMA<\/a>\n            <ul class=\"submenu\">\n                <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpmapel-bahasa-inggris\/\">Mapel Bahasa Inggris<\/a><\/li>\n                <li><a href=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpmapel-bahasa-indonesia\/\">Mapel Bahasa Indonesia<\/a><\/li>\n            <\/ul>\n        <\/li>\n    <\/ul>\n    <div class=\"search-container\">\n        <input id=\"searchInput\" placeholder=\"Cari video...\" type=\"search\"\/>\n    <\/div>\n<\/nav>\n\n<main class=\"container\">\n    <header class=\"page-header\">\n        <h1>Jenjang PAUD<\/h1>\n        <div class=\"page-header-logos\">\n            <a href=\"#ayo-bernyanyi-section\">\n                <img decoding=\"async\" alt=\"Logo Ayo Bernyanyi\" src=\"https:\/\/bbgpdiy.kemdikbud.go.id\/produk\/wp-content\/uploads\/sites\/7\/2024\/08\/ayo_bernyanyi-removebg-preview.png\"\/>\n            <\/a>\n        <\/div>\n    <\/header>\n    \n    <section class=\"content-section\" id=\"ayo-bernyanyi-section\">\n        <h2 class=\"section-title\">Ayo Bernyanyi<\/h2>\n        <div class=\"content-row\">\n            <div class=\"image-col\">\n                <img decoding=\"async\" alt=\"Ayo Bernyanyi Logo\" src=\"https:\/\/bbgpdiy.kemdikbud.go.id\/produk\/wp-content\/uploads\/sites\/7\/2024\/08\/ayo_bernyanyi-removebg-preview.png\"\/>\n            <\/div>\n            <div class=\"text-col\">\n                <p>Ayo Bernyanyi merupakan bahan ajar untuk Fase Fondasi PAUD untuk membantu guru dalam membelajarkan lagu. Bahan ajar ini terdiri dari dua video yaitu video 1 yang berisi materi untuk mengajarkan lagu dan video 2 yang berisi iringan musik lagu (karaoke). Bahan ajar ini dilengkapi dengan petunjuk pemanfaatan untuk memudahkan guru dalam pemanfaatannya. Bahan ajar beserta kelengkapannya juga dapat diunduh pada fitur Perangkat Ajar pada Platform Merdeka Mengajar (PMM).<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"video-grid\">\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"40TnPq38BzU\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Ayo Mandi\" src=\"https:\/\/img.youtube.com\/vi\/40TnPq38BzU\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Ayo Mandi<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"40TnPq38BzU\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"niP8F0HaS3g\">Iringan<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat mengenal kebiasaan baik dan buruk bagi kesehatan; menjaga kebersihan dan merawat diri; serta memahami dan bersedia menjaga kesehatan diri sebagai bentuk syukur kepada Tuhan YME.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/1iQeXc4cIzp4f79Hn8wFjgc4AGQYaoOEa\/view?usp=drivesdk\">Panduan Guru: Ayo Mandi<\/a>\n            <\/div>\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"DSHKrip7d28\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Siapa Namamu\" src=\"https:\/\/img.youtube.com\/vi\/DSHKrip7d28\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Siapa Namamu<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"DSHKrip7d28\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"FLhN-GjYPbA\">Instrumen<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat mengenal nama sendiri, menyebutkan nama, serta mengenal simbol huruf dalam nama.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/1qRRou-PPJlY1dCDkm-fGJnvm4SIhkK6G\/view?usp=drivesdk\">Panduan Guru: Siapa Namamu<\/a>\n            <\/div>\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"KxFhPYbIs6k\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Lima Jari\" src=\"https:\/\/img.youtube.com\/vi\/KxFhPYbIs6k\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Lima Jari<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"KxFhPYbIs6k\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"1BRAOmToUes\">Instrumen<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat mengenal perbedaan bentuk jari; menyebutkan nama-nama jari; mengekspresikan aktivitas seni menggunakan jari; serta memahami dasar-dasar literasi, matematika, sains, teknologi, rekayasa, dan seni.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/1ckFAVFuj6rKGU3EHkXbwXBWNUSc1ir8g\/view?usp=drivesdk\">Panduan Guru: Lima Jari<\/a>\n            <\/div>\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"GtVhQC116zk\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Buah dan Sayur\" src=\"https:\/\/img.youtube.com\/vi\/GtVhQC116zk\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Buah dan Sayur<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"GtVhQC116zk\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"8xJtVJN16r0\">Instrumen<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat menyebutkan nama buah dan sayur, mengenal perbedaan buah dan sayur., serta mengidentifikasi manfaat buah dan sayur.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/1ydyeNygGNb8EgC2Pa9z8Z7wPrPObhlOD\/view?usp=drivesdk\">Panduan Guru: Buah dan Sayur<\/a>\n            <\/div>\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"ffzFkqyOd2Y\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Tujuh Ekor Ikan Mas\" src=\"https:\/\/img.youtube.com\/vi\/ffzFkqyOd2Y\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Tujuh Ekor Ikan Mas<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"ffzFkqyOd2Y\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"A7t59I7qfZE\">Instrumen<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat terbiasa menyayangi makhluk ciptaan Tuhan; memberi makan ikan; membersihkan tempat tinggal ikan; menirukan gerakan ikan; serta memahami dasar-dasar literasi, matematika, sains, teknologi, rekayasa, dan seni.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/1-Z2K-Xd_bxiI0_aeTm8jHCjris9RzBhY\/view?usp=drivesdk\">Panduan Guru: Tujuh Ekor Ikan Mas<\/a>\n            <\/div>\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"K6ddSVMVvr8\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Makan Pagi\" src=\"https:\/\/img.youtube.com\/vi\/K6ddSVMVvr8\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Makan Pagi<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"K6ddSVMVvr8\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"4_a8shSz4ys\">Instrumen<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat mengenal pola hidup sehat dengan makan pagi, memahami jenis-jenis makan pagi, mengidentifikasi manfaat makan pagi bagi pertumbuhan dan sumber energi, serta mampu memilih makanan yang sehat dan bergizi.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/1un-J8-dfM8Booc_8GPe0DKy9fpPQTZZ4\/view?usp=drivesdk\">Panduan Guru: Makan Pagi<\/a>\n            <\/div>\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"hZ0c3zd08dg\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Ayo Tamasya\" src=\"https:\/\/img.youtube.com\/vi\/hZ0c3zd08dg\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Ayo Tamasya<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"hZ0c3zd08dg\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"DuyNPATVXAM\">Instrumen<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat meningkatkan kemampuan berkomunikasi dan berinteraksi dengan teman sebaya, menumbuhkan rasa keingintahuan dan minat anak terhadap lingkungan sekitar, serta mengajarkan anak untuk mengamati dan memperhatikan hal-hal di sekitarnya.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/1IA9RLy6E-Qz_T_GhFCiiBC1TTth7hkQV\/view?usp=drivesdk\">Panduan Guru: Ayo Tamasya<\/a>\n            <\/div>\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"omkCa6EzFPA\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Berkibarlah Benderaku\" src=\"https:\/\/img.youtube.com\/vi\/omkCa6EzFPA\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Berkibarlah Benderaku<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"omkCa6EzFPA\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"6dt0xcL-mZs\">Instrumen<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat memahami pentingnya menghormati dan menghargai bendera, mengembangkan rasa cinta tanah air dan kebangsaan melalui bendera, serta mengetahui makna dan simbol-simbol yang terdapat dalam bendera.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/12lrATbf4EZbJxrsMHRvtF4F3R3lUfyNz\/view?usp=drivesdk\">Panduan Guru: Berkibarlah Benderaku<\/a>\n            <\/div>\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"E247MBkxoi4\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Air\" src=\"https:\/\/img.youtube.com\/vi\/E247MBkxoi4\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Air<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"E247MBkxoi4\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"IEHiJkt2-zM\">Instrumen<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat mengenal air ciptaan Tuhan, mengenal pola hidup yang sehat terkait air, mengenal fungsi air dalam kehidupan sehari-hari, mengenal lingkungan hidup yang berkaitan dengan air, dan mengenal macam-macam air.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/1Edq3wzYWLjFA83pmrQ4Gsz4GD6KXaUvu\/view?usp=drivesdk\">Panduan Guru: Air<\/a>\n            <\/div>\n            <div class=\"video-item\">\n                <div class=\"video-thumbnail-container\" data-video-id=\"X-8Y9vhyYJs\">\n                    <img decoding=\"async\" alt=\"Video thumbnail Tukang Sayur\" src=\"https:\/\/img.youtube.com\/vi\/X-8Y9vhyYJs\/hqdefault.jpg\"\/>\n                    <span class=\"play-icon\">\u25ba<\/span>\n                <\/div>\n                <div class=\"video-details\">\n                    <h3 class=\"video-title\">Tukang Sayur<\/h3>\n                    <div class=\"play-buttons\">\n                        <button class=\"play-btn\" data-video-id=\"X-8Y9vhyYJs\">Lagu<\/button>\n                        <button class=\"play-btn\" data-video-id=\"_8zqKSIFcqo\">Instrumen<\/button>\n                    <\/div>\n                <\/div>\n                <p class=\"video-description\">Bahan ajar ini mengajarkan anak-anak dapat mengenal tugas dan manfaat keberadaan tukang sayur dalam kehidupan sehari-hari, mengenali lingkungan sekitar yang berkaitan dengan profesi tukang sayur, serta mengenal macam-macam sayuran yang dijual oleh tukang sayur.<\/p>\n                <a class=\"guidance-link-btn\" href=\"https:\/\/drive.google.com\/file\/d\/19dxwe5AtpjBtH7V48ni-FneHUfxF_bzP\/view?usp=drivesdk\">Panduan Guru: Tukang Sayur<\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<\/main>\n\n<div class=\"modal\" id=\"videoModal\">\n    <div class=\"modal-content\">\n        <span class=\"close-btn\">\u00d7<\/span>\n        <div id=\"video-modal-container\">\n            <iframe allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" frameborder=\"0\" id=\"youtube-iframe\" src=\"about:blank\"><\/iframe>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const hamburger = document.querySelector('.hamburger');\n        const menu = document.querySelector('.menu-paud');\n        const searchInput = document.getElementById('searchInput');\n        const videoModal = document.getElementById('videoModal');\n        const youtubeIframe = document.getElementById('youtube-iframe');\n\n        \/\/ Hamburger Menu Toggle\n        hamburger.addEventListener('click', () => {\n            menu.classList.toggle('active');\n        });\n\n        \/\/ Submenu toggle for mobile\n        const menuItems = document.querySelectorAll('.menu-paud > li > a');\n        menuItems.forEach(link => {\n            link.addEventListener('click', e => {\n                if (window.innerWidth <= 900) {\n                    const parentLi = link.parentElement;\n                    if (parentLi.querySelector('.submenu')) {\n                        e.preventDefault();\n                        parentLi.classList.toggle('open');\n                    }\n                }\n            });\n        });\n\n        \/\/ Video Modal Logic\n        document.body.addEventListener('click', (event) => {\n            const target = event.target;\n            const playButton = target.closest('.play-btn');\n            const thumbnail = target.closest('.video-thumbnail-container');\n\n            if (playButton || thumbnail) {\n                const videoId = (playButton || thumbnail).getAttribute('data-video-id');\n                const embedUrl = `https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1&rel=0&modestbranding=1`;\n                \n                youtubeIframe.src = embedUrl;\n                videoModal.style.display = 'flex';\n            }\n        });\n\n        function closeModal(modal) {\n            modal.style.display = 'none';\n            if (modal.id === 'videoModal') {\n                youtubeIframe.src = '';\n            }\n        }\n        \n        document.querySelectorAll('.modal .close-btn').forEach(btn => {\n            btn.addEventListener('click', () => {\n                closeModal(btn.closest('.modal'));\n            });\n        });\n\n        window.addEventListener('click', (event) => {\n            if (event.target === videoModal) {\n                closeModal(videoModal);\n            }\n        });\n\n        document.addEventListener('keydown', (event) => {\n            if (event.key === \"Escape\" && videoModal.style.display === \"flex\") {\n                closeModal(videoModal);\n            }\n        });\n        \n        \/\/ Search Functionality\n        searchInput.addEventListener('keyup', () => {\n            const searchTerm = searchInput.value.toLowerCase().trim();\n\n            document.querySelectorAll('.content-section').forEach(section => {\n                let matchesInSection = 0;\n\n                section.querySelectorAll('.video-item').forEach(item => {\n                    const title = item.querySelector('.video-title').textContent.toLowerCase();\n                    const description = item.querySelector('.video-description').textContent.toLowerCase();\n                    \n                    if (title.includes(searchTerm) || description.includes(searchTerm)) {\n                        item.style.display = 'flex';\n                        matchesInSection++;\n                    } else {\n                        item.style.display = 'none';\n                    }\n                });\n\n                if (matchesInSection > 0) {\n                    section.style.display = 'block';\n                } else {\n                    section.style.display = 'none';\n                }\n            });\n        });\n    });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Jenjang PAUD \u2630 Jenjang PAUD Ayo Bernyanyi Mentari Jenjang SD Seni Musik Seri Literasi Seri Numerasi Jenjang SMA Mapel Bahasa Inggris Mapel Bahasa Indonesia Jenjang PAUD Ayo Bernyanyi Ayo Bernyanyi merupakan bahan ajar untuk Fase Fondasi PAUD untuk membantu guru dalam membelajarkan lagu. Bahan ajar ini terdiri dari dua video yaitu video 1 yang berisi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_joinchat":[],"footnotes":""},"class_list":["post-2422","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/comments?post=2422"}],"version-history":[{"count":2,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2422\/revisions"}],"predecessor-version":[{"id":2424,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2422\/revisions\/2424"}],"wp:attachment":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/media?parent=2422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}