{"id":2434,"date":"2025-09-19T14:00:38","date_gmt":"2025-09-19T14:00:38","guid":{"rendered":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/?page_id=2434"},"modified":"2025-09-19T14:23:16","modified_gmt":"2025-09-19T14:23:16","slug":"vpmapel-bahasa-inggris","status":"publish","type":"page","link":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/vpmapel-bahasa-inggris\/","title":{"rendered":"vpmapel-bahasa-inggris"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Video Pembelajaran &#8211; Jenjang SMA<\/title>\n    <style>\n        \/* CSS Universal & Scroll Halus *\/\n        html { scroll-behavior: smooth; }\n        body { margin: 0; font-family: Arial, sans-serif; background:#f9f9f9; color:#333; }\n        \n        \/* Navigasi Atas *\/\n        .custom-nav { background: #0a4a82; position: sticky; top: 0; z-index: 1000; }\n        .menu { list-style: none; margin: 0; padding: 0; display: flex; }\n        .menu > li { position: relative; }\n        .menu > li > a { display: block; padding: 14px 20px; color: #fff; text-decoration: none; font-weight: 500; }\n        .menu > li > a:hover { background: #0e5aa0; }\n        .submenu { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; background: #0e5aa0; display: none; min-width: 220px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }\n        .submenu li a { display: block; padding: 12px 16px; color: #fff; text-decoration: none; white-space: nowrap; }\n        .submenu li a:hover { background: #1372cf; }\n        .menu > li:hover .submenu { display: block; }\n        .hamburger { display: none; cursor: pointer; font-size: 22px; color: #fff; padding: 14px 20px; background: #0a4a82; border: none; }\n\n        \/* Header Utama *\/\n        .main-header {\n            padding: 40px 20px; text-align: center; color: white;\n            background-color: #4a4a4a; \/* Warna abu-abu gelap *\/\n            position: relative;\n        }\n        .header-content { position: relative; z-index: 1; }\n        .main-header h1 { font-size: 3em; margin: 0 0 20px 0; color: #ffffff; }\n        .header-logos { display: flex; justify-content: center; gap: 20px; align-items: center; }\n        .header-logos img { height: 90px; transition: transform 0.2s ease; }\n        .header-logos a:hover img { transform: scale(1.1); }\n\n        \/* Search Bar *\/\n        .search-container { position: absolute; top: 20px; right: 20px; z-index: 2; }\n        .search-container input {\n            padding: 8px 12px;\n            border: 1px solid #ccc;\n            border-radius: 20px;\n            width: 250px;\n            \/* MODIFIKASI: Menambahkan !important untuk 'memaksa' style diterapkan *\/\n            background-color: #ffffff !important;\n            color: #333333 !important;\n        }\n        .search-container input:focus {\n            outline: none; \/* Menghilangkan outline biru saat di-klik *\/\n            border-color: #0e5aa0;\n        }\n\n        \/* Konten *\/\n        .container { padding: 20px 40px; }\n        .section { margin-bottom: 40px; }\n        .section-title {\n            font-size: 2.2em; color: #1a237e; margin-bottom: 25px;\n            padding-bottom: 10px; border-bottom: 3px solid #1a237e; display: inline-block;\n        }\n        .intro-section {\n            display: flex; align-items: center; gap: 30px; margin-bottom: 30px;\n            background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n        }\n        .intro-logo { text-align: center; flex: 0 0 200px; }\n        .intro-logo img { max-width: 100%; height: auto; }\n        .intro-description { font-size: 1em; line-height: 1.7; text-align: justify; }\n\n        \/* Video *\/\n        .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 25px; }\n        .video-card {\n            background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n            overflow: hidden; display: flex; flex-direction: column;\n        }\n        .video-card-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }\n        .video-card-title { font-size: 1.2em; margin: 0 0 15px 0; color: #1a237e; }\n        .video-placeholder { position: relative; cursor: pointer; }\n        .video-placeholder img { width: 100%; display: block; transition: transform 0.2s ease; }\n        .video-placeholder:hover img { transform: scale(1.03); }\n        .play-button {\n            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n            width: 70px; height: 50px; background-color: rgba(255, 0, 0, 0.85);\n            border-radius: 12px; display: flex; align-items: center; justify-content: center;\n            transition: background-color 0.2s;\n        }\n        .video-placeholder:hover .play-button { background-color: rgba(255, 0, 0, 1); }\n        .play-button::after {\n            content: ''; display: block; border-style: solid;\n            border-width: 12px 0 12px 20px; border-color: transparent transparent transparent white;\n        }\n        .video-description { margin-top: 15px; font-size: 0.95em; line-height: 1.6; flex-grow: 1;}\n        .video-links { margin-top: 15px; }\n        .video-links strong { display: block; margin-bottom: 8px; font-size: 0.95em; }\n        \n        \/* Tombol *\/\n        .action-button {\n            display: block; background-color: #1976d2; color: white !important; padding: 10px 15px;\n            margin-bottom: 8px; border-radius: 5px; text-align: center; text-decoration: none;\n            font-weight: bold; transition: background-color 0.2s;\n        }\n        .action-button:hover { background-color: #0d47a1; color: white; }\n        .action-button:last-child { margin-bottom: 0; }\n\n        \/* Modal Pop-up *\/\n        .modal {display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); align-items:center; justify-content:center;}\n        .modal-content {position:relative; width:90%; max-width:900px;}\n        .modal-content iframe {width:100%; aspect-ratio: 16 \/ 9; border:none; border-radius:8px;}\n        .close {position:absolute; top:-15px; right:-15px; font-size:30px; color:white; background-color:#333; border-radius:50%; width:35px; height:35px; display:flex; align-items:center; justify-content:center; line-height:0; cursor:pointer;}\n        \n        \/* Responsive *\/\n        @media (max-width: 900px) {\n            .menu { flex-direction: column; display: none; }\n            .menu.active { display: flex; }\n            .menu > li { width: 100%; }\n            .submenu { position: static; display: none; background: #1372cf; }\n            .menu > li.open > .submenu { display: block; }\n            .hamburger { display: block; }\n            .menu > li > a { padding: 12px 16px; }\n        }\n        @media (max-width: 992px) {\n            .video-grid { grid-template-columns: 1fr; }\n            .intro-section { flex-direction: column; text-align: center; }\n        }\n        @media (max-width: 768px) {\n            .container { padding: 20px; }\n            .main-header h1 { font-size: 2.2em; }\n            .search-container { position: static; padding: 15px 20px 0 20px; }\n            .search-container input { width: 100%; box-sizing: border-box; }\n            .main-header { padding-bottom: 20px; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <nav class=\"custom-nav\">\n        <button class=\"hamburger\" aria-label=\"Menu\">&#9776;<\/button>\n        <ul class=\"menu\">\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    <\/nav>\n\n    <header class=\"main-header\">\n        <div class=\"search-container\">\n            <input type=\"text\" id=\"searchInput\" placeholder=\"Cari video...\">\n        <\/div>\n        <div class=\"header-content\">\n            <h1>Jenjang SMA<\/h1>\n            <div class=\"header-logos\">\n                <a href=\"#mapel-bahasa-inggris\"><img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-content\/uploads\/sites\/5\/2024\/08\/SEA.png\" alt=\"SEA Logo\"><\/a>\n                <a href=\"#mapel-bahasa-indonesia\"><img decoding=\"async\" src=\"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-content\/uploads\/sites\/5\/2024\/08\/Sasando-removebg-preview.png\" alt=\"Sasando Logo\"><\/a>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <main class=\"container\">\n        <section class=\"section\">\n            <h2 class=\"section-title\" id=\"mapel-bahasa-inggris\">Mapel Bahasa Inggris<\/h2>\n            <div class=\"intro-section\">\n                <div class=\"intro-logo\"><img decoding=\"async\" src=\"https:\/\/bbgpdiy.kemdikbud.go.id\/produk\/wp-content\/uploads\/sites\/7\/2024\/08\/SEA.png\" alt=\"SEA Logo\"><\/div>\n                <div class=\"intro-description\">\n                    <p><strong>SEA (Smart English Activity)<\/strong> merupakan bahan ajar yang membantu guru SMA\/MA dalam melakukan pembelajaran berdiferensiasi berdasarkan kesiapan belajar peserta didik.<\/p>\n                    <p>Selain dilengkapi dengan materi listening, bahan ajar ini dilengkapi dengan Petunjuk Pemanfaatan untuk Guru, Lembar Kerja Berdiferensiasi dan Lembar Refleksi. SEA beserta kelengkapannya dapat juga diunduh pada fitur Perangkat Ajar pada Platform Merdeka Mengajar.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"video-grid\">\n                <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/vuxOu2citoA\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/vuxOu2citoA\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">Let\u2019s Explore Ocean Park Hong Kong<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks descriptive.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/1JjBQ_7kZ5ha7zSQDM0yCKG_6JzYurXH-?usp=sharing\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/1-Mt14IT9aw5xtI4x59NRrh2MbtrcUoX9\/view?usp=drive_link\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n                <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/f6ThYNHK8wQ\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/f6ThYNHK8wQ\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">What Does the Colosseum in Rome Look Like?<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks descriptive.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/1w0B0ZP6M4sPuI1w1onEeTZB_5T4--ttz?usp=drive_link\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/1jrucMWeQp-FX6BqXr8KWx0BQAG8WcYYr\/view?usp=drive_link\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n                <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/x1TVuUdJl7Q\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/x1TVuUdJl7Q\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">I Personally Think that Poverty Can Be Reduced<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks exposition.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/1RSdpVd0PQWUx9n-WrxgjgWZCC07KckbU?usp=drive_link\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/1IC2efiySLjo6_Ezi_B9-bd__Np8VkKxV\/view?usp=drive_link\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n                <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/L7j1eIgQHK4\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/L7j1eIgQHK4\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">Why Should We Protect Our Environment?<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks exposition.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/1VhXrH7-kecmpXvjAMj8j8gm08BUIUkk5?usp=drive_link\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/17OPxdB-9fCLaXGjsw5Z6N0CBg2yBKadF\/view?usp=drive_link\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n                 <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/BzI_mGwprjo\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/BzI_mGwprjo\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">Once Upon a Time in Japan<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks narrative.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/1_itlz9SIV_sAGJPX_-MKM3RPQkFZ3yGt?usp=drive_link\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/1KsCPu36vEk9R1PmRnpVVPI3P2g0lR8MY\/view?usp=drive_link\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n                <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/HJ-77UjnVCc\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/HJ-77UjnVCc\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">What Do You Think of the New TV Channel?<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks asking for and giving opinions.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/1hpgIcdmO2KYg0FOp0y3JjK75FPOeCz2v?usp=drive_link\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/156EhQ2Wr4j052ABqeOCTnFgY4Y0-x4X0\/view?usp=drive_link\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n                <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/kNOUJaVQMgM\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/kNOUJaVQMgM\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">How to Do Laundry Using a Washing Machine<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks procedure.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/12ExJDOwvdxRDJgOspWNyoiK9JLf-Z5uw?usp=sharing\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/1-LmYQAtY4xWi8fG7cjLvuqSWVsQS_8ZB\/view?usp=drivesdk\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n                <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/C9oMLoEqxpY\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/C9oMLoEqxpY\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">Never Trust the Headlines<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks procedure.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/19PH0X9v-MiZBoXfu6E4qmGNVwZAhGg8X?usp=sharing\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/1xSkZEDOLnNWuoIkBRKj0AMFpeijGby6S\/view?usp=drivesdk\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n                 <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/Vs6zDAqdK1k\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/Vs6zDAqdK1k\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">He Was the Third President of Indonesia<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks recount.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/1FXZK81Lv9C1ZwJnUFXLrQlv82BBUTcH0?usp=sharing\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/1jSkDQsxtOm_uVcVw644Ex58JixrtPtwE\/view?usp=drivesdk\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n                <div class=\"video-card\">\n                    <div class=\"video-placeholder\" data-src=\"https:\/\/www.youtube.com\/embed\/qcEicqUNp84\"><img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/qcEicqUNp84\/hqdefault.jpg\" alt=\"Thumbnail\"><div class=\"play-button\"><\/div><\/div>\n                    <div class=\"video-card-content\"><h3 class=\"video-card-title\">The Bandung Sea of Fire<\/h3><p class=\"video-description\">Video bahan ajar bahasa Inggris untuk elemen menyimak (listening) pada materi jenis teks recount.<\/p><div class=\"video-links\"><strong>Kelengkapan:<\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/1eSmdS1F-k_OERBzCjrWrc6R-Sau97_Df?usp=sharing\" class=\"action-button\">Panduan Pemanfaatan<\/a><a href=\"https:\/\/drive.google.com\/file\/d\/1mFVdqJqVydFACVBRTrkkRxCZWyncRW30\/view?usp=drivesdk\" class=\"action-button\">LKPD<\/a><\/div><\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <div class=\"modal\" id=\"videoModal\">\n      <div class=\"modal-content\">\n        <span class=\"close\" id=\"closeModalButton\">&times;<\/span>\n        <iframe id=\"modalVideo\" src=\"about:blank\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>\n      <\/div>\n    <\/div>\n\n    <script src=\"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=xIDG6JzF\"><\/script>\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const hamburger = document.querySelector('.hamburger');\n            const menu = document.querySelector('.menu');\n            const modal = document.getElementById(\"videoModal\");\n            const modalVideo = document.getElementById(\"modalVideo\");\n            const closeModalBtn = document.getElementById(\"closeModalButton\");\n            const searchInput = document.getElementById('searchInput');\n\n            hamburger.addEventListener('click', () => { menu.classList.toggle('active'); });\n            document.querySelectorAll('.menu > li > a').forEach(link => {\n                link.addEventListener('click', e => {\n                    if (window.innerWidth <= 900) {\n                        const parentLi = link.parentElement;\n                        if (parentLi.querySelector('.submenu')) { e.preventDefault(); parentLi.classList.toggle('open'); }\n                    }\n                });\n            });\n\n            document.querySelectorAll(\".video-placeholder\").forEach(placeholder => {\n                placeholder.addEventListener(\"click\", function(){\n                    const videoSrc = this.getAttribute(\"data-src\");\n                    modal.style.display = \"flex\";\n                    modalVideo.src = videoSrc + \"?autoplay=1\";\n                });\n            });\n\n            function closeModal(){\n                modal.style.display = \"none\";\n                modalVideo.src = \"about:blank\";\n            }\n            closeModalBtn.addEventListener(\"click\", closeModal);\n            modal.addEventListener(\"click\", function(event) { if (event.target === modal) { closeModal(); } });\n\n            searchInput.addEventListener('input', function() {\n                let query = this.value.toLowerCase();\n                document.querySelectorAll('.video-card').forEach(card => {\n                    let textContent = (card.innerText || card.textContent).toLowerCase();\n                    card.style.display = textContent.includes(query) ? 'flex' : 'none';\n                });\n            });\n\n            function bacaTeksTerpilih() {\n                const selectedText = window.getSelection().toString().trim();\n                if (selectedText.length > 0) { responsiveVoice.cancel(); responsiveVoice.speak(selectedText, \"Indonesian Female\"); }\n            }\n            document.addEventListener(\"mouseup\", () => setTimeout(bacaTeksTerpilih, 100));\n            document.addEventListener(\"dblclick\", () => setTimeout(bacaTeksTerpilih, 100));\n            \n            let hoverTimeout;\n            document.querySelectorAll(\"p, span, li, a, h1, h2, h3, h4, h5, h6\").forEach(function(el) {\n                el.addEventListener(\"mouseenter\", function () {\n                    clearTimeout(hoverTimeout);\n                    const text = el.innerText.trim();\n                    if (text.length > 0 && text.length < 300) {\n                        hoverTimeout = setTimeout(() => { responsiveVoice.cancel(); responsiveVoice.speak(text, \"Indonesian Female\"); }, 500);\n                    }\n                });\n                el.addEventListener(\"mouseleave\", function() { clearTimeout(hoverTimeout); responsiveVoice.cancel(); });\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Video Pembelajaran &#8211; Jenjang SMA &#9776; Jenjang PAUD Ayo Bernyanyi Mentari Jenjang SD Seni Musik Seri Literasi Seri Numerasi Jenjang SMA Mapel Bahasa Inggris Mapel Bahasa Indonesia Jenjang SMA Mapel Bahasa Inggris SEA (Smart English Activity) merupakan bahan ajar yang membantu guru SMA\/MA dalam melakukan pembelajaran berdiferensiasi berdasarkan kesiapan belajar peserta didik. Selain dilengkapi dengan [&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-2434","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2434","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=2434"}],"version-history":[{"count":2,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2434\/revisions"}],"predecessor-version":[{"id":2437,"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/pages\/2434\/revisions\/2437"}],"wp:attachment":[{"href":"https:\/\/bbgtkdiy.kemendikdasmen.go.id\/produk\/wp-json\/wp\/v2\/media?parent=2434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}