{"id":185,"date":"2025-02-22T03:08:29","date_gmt":"2025-02-22T03:08:29","guid":{"rendered":"https:\/\/kishaw.io\/?page_id=185"},"modified":"2025-02-22T03:08:29","modified_gmt":"2025-02-22T03:08:29","slug":"youtube","status":"publish","type":"page","link":"https:\/\/kishaw.io\/?page_id=185","title":{"rendered":"YouTube"},"content":{"rendered":"        <div class=\"youtube-content-selector\">\n            <div class=\"selector-controls\">\n                <select id=\"content-type-selector\" onchange=\"switchYouTubeContent(this.value)\">\n                    <option value=\"videos\">Videos<\/option>\n                    <option value=\"playlists\">Playlists<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Initialize the view\n            const initialType = document.getElementById('content-type-selector').value;\n            switchYouTubeContent(initialType);\n        });\n\n        function switchYouTubeContent(type) {\n            const videos = document.getElementById('youtube-videos');\n            const playlists = document.getElementById('youtube-playlists');\n            \n            if (!videos || !playlists) return; \/\/ Guard against missing elements\n            \n            if (type === 'videos') {\n                videos.style.display = 'grid';\n                playlists.style.display = 'none';\n            } else {\n                videos.style.display = 'none';\n                playlists.style.display = 'grid';\n            }\n        }\n        <\/script>\n\n        <style>\n        .youtube-content-selector {\n            margin-bottom: 20px;\n        }\n        \n        .youtube-content-selector .selector-controls {\n            text-align: right;\n        }\n        \n        .youtube-content-selector select {\n            padding: 8px 16px;\n            font-size: 16px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            background-color: white;\n            cursor: pointer;\n            min-width: 120px;\n        }\n        \n        .youtube-content-selector select:focus {\n            outline: none;\n            border-color: #666;\n        }\n\n        #youtube-videos,\n        #youtube-playlists {\n            transition: opacity 0.3s ease-in-out;\n        }\n        <\/style>\n        \n\n\n        <div class=\"youtube-content-wrapper\">\n            <div id=\"youtube-videos\" class=\"youtube-video-grid\">\n                                    <p>No videos found.<\/p>\n                            <\/div>\n\n            <div id=\"youtube-playlists\" class=\"youtube-video-grid\" style=\"display: none;\">\n                                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLUijl_Lb7hak\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/EhGR8JjCZxk\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZCBlKD4wDw==&#038;rs=AOn4CLCHvy9ViIAX2apsidQE3LwjFUHUbw\" \n                                         alt=\"Yeppoon 1st Aug 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLUijl_Lb7hak\" target=\"_blank\">\n                                    Yeppoon 1st Aug 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">4 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLDFNXFw4Cb48\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/wJV5niV-VBk\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBXKEwwDw==&#038;rs=AOn4CLCb0Pm2iMMcvGi1_aE3ML0tery-vw\" \n                                         alt=\"Corfield 1st Aug 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLDFNXFw4Cb48\" target=\"_blank\">\n                                    Corfield 1st Aug 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">6 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLa5gVvahC4Fc\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/JUaBcxIOl_s\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBUKEYwDw==&#038;rs=AOn4CLAU18nXnbeAOnt6IQIiAHNTwKGSPA\" \n                                         alt=\"Roma 1st Aug 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLa5gVvahC4Fc\" target=\"_blank\">\n                                    Roma 1st Aug 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLWv_YFOtsLVw\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/ZEcg4BCI2ko\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBYKEMwDw==&#038;rs=AOn4CLCoEI5dWKq-EFApAR0ds-JDimcN7Q\" \n                                         alt=\"Tambo 1st Aug 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLWv_YFOtsLVw\" target=\"_blank\">\n                                    Tambo 1st Aug 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLbjkQjcFyaxs\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/vFeBm094O_k\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYSiBaKGUwDw==&#038;rs=AOn4CLBwxW2x47VQ4vnmrc-_uwVeYg_6hg\" \n                                         alt=\"Julia Creek 25th July 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLbjkQjcFyaxs\" target=\"_blank\">\n                                    Julia Creek 25th July 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLZMCE2hVH1po\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/9tI6aeNcdqo\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYUyBdKGUwDw==&#038;rs=AOn4CLAdE-JVCq8-t_91B4RbWQnbrscoTA\" \n                                         alt=\"Longreach 25th July 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLZMCE2hVH1po\" target=\"_blank\">\n                                    Longreach 25th July 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLKGlTD6Ud3Os\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/tWHLd9NzGTc\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBlKEkwDw==&#038;rs=AOn4CLBCfpARbm-uOzn1jvus9Zi4gGVAIg\" \n                                         alt=\"Middlemount 25th July 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLKGlTD6Ud3Os\" target=\"_blank\">\n                                    Middlemount 25th July 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLWF326RjUydk\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/YNRLrIoF4_E\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZCBlKEUwDw==&#038;rs=AOn4CLA-Dloqb1LIIiw2Mw0DHCBZNWmPyQ\" \n                                         alt=\"Atherton 25th July 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLWF326RjUydk\" target=\"_blank\">\n                                    Atherton 25th July 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLNBWQ_hdnwUk\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/YJhEg6CFO0Y\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBZKEcwDw==&#038;rs=AOn4CLCvkWI_YGKtj-nMGMl3QJCgtfBdeg\" \n                                         alt=\"Thangool 18th July 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLNBWQ_hdnwUk\" target=\"_blank\">\n                                    Thangool 18th July 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLF-xlWdCLcc8\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/RHMyT3-yiwQ\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBlKGUwDw==&#038;rs=AOn4CLBSzuZqx3JK4lCeefIw3MkfWUUsDQ\" \n                                         alt=\"Hughenden 18th July 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLF-xlWdCLcc8\" target=\"_blank\">\n                                    Hughenden 18th July 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLQSpT1N14LQQ\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/MJjgkdqL7yM\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYciBiKDwwDw==&#038;rs=AOn4CLCqrz-bNNgqq_u-2Kp4gAyIWioc8g\" \n                                         alt=\"Gympie 18th July 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLQSpT1N14LQQ\" target=\"_blank\">\n                                    Gympie 18th July 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                            <div class=\"youtube-video-card\">\n                            <div class=\"video-thumbnail\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLTMKpRArPrkQ\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/UelNC10CCVo\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYSyBlKEcwDw==&#038;rs=AOn4CLD7cDVRZoO-IQeIWEZxtHaVZ5UJpQ\" \n                                         alt=\"Goondiwindi 18th July 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLTMKpRArPrkQ\" target=\"_blank\">\n                                    Goondiwindi 18th July 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">5 videos <\/span>\n                                <\/div>\n                                                    <\/div>\n                                                <\/div>\n\n            <style>\n            \/* Base styles for the grid *\/\n            .youtube-video-grid {\n                display: grid;\n                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n                gap: 20px;\n                margin-bottom: 30px;\n            }\n            \n            .youtube-video-card {\n                border-radius: 8px;\n                overflow: hidden;\n                box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n                transition: transform 0.2s ease, box-shadow 0.2s ease;\n                background: #fff;\n                position: relative;\n            }\n            \n            .youtube-video-card:hover {\n                transform: translateY(-5px);\n                box-shadow: 0 5px 15px rgba(0,0,0,0.15);\n            }\n            \n            \/* Critical thumbnail fixes *\/\n            .video-thumbnail {\n                position: relative !important;\n                padding-top: 56.25% !important; \/* 16:9 aspect ratio *\/\n                overflow: hidden !important;\n                background-color: #f0f0f0 !important;\n                z-index: 1 !important;\n            }\n            \n            .video-thumbnail a {\n                display: block !important;\n                width: 100% !important;\n                height: 100% !important;\n                position: absolute !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 2 !important;\n            }\n            \n            .video-thumbnail img {\n                position: absolute !important;\n                top: 0 !important;\n                left: 0 !important;\n                width: 100% !important;\n                height: 100% !important;\n                object-fit: cover !important;\n                transition: transform 0.3s ease !important;\n                opacity: 1 !important;\n                visibility: visible !important;\n                display: block !important;\n                z-index: 1 !important;\n            }\n            \n            .youtube-video-card:hover .video-thumbnail img {\n                transform: scale(1.05);\n            }\n            \n            .video-title {\n                padding: 15px 15px 10px;\n                font-size: 16px;\n                font-weight: 500;\n                line-height: 1.4;\n                height: 80px;\n                overflow: hidden;\n                display: -webkit-box;\n                -webkit-line-clamp: 3;\n                -webkit-box-orient: vertical;\n            }\n            \n            .video-title a {\n                color: #333;\n                text-decoration: none;\n            }\n            \n            .video-title a:hover {\n                color: #0073aa;\n            }\n            \n            .video-meta {\n                padding: 0 15px 15px;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                font-size: 14px;\n                color: #666;\n            }\n            \n            .video-date, .playlist-count {\n                margin-right: auto;\n            }\n            \n            .video-views, .playlist-type {\n                margin-left: 10px;\n                padding-left: 10px;\n                border-left: 1px solid #eee;\n                white-space: nowrap;\n            }\n            \n            .playlist-type {\n                background-color: #f0f0f0;\n                padding: 3px 8px;\n                border-radius: 4px;\n                font-size: 12px;\n                font-weight: 500;\n                color: #555;\n                border-left: none;\n            }\n            \n            @media (max-width: 767px) {\n                .youtube-video-grid {\n                    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n                }\n                \n                .video-title {\n                    font-size: 14px;\n                    height: 60px;\n                }\n                \n                .video-meta {\n                    font-size: 12px;\n                }\n            }\n            <\/style>\n            \n            <script>\n            document.addEventListener('DOMContentLoaded', function() {\n                \/\/ Force reload of images to ensure they display properly\n                setTimeout(function() {\n                    const thumbnails = document.querySelectorAll('.video-thumbnail img');\n                    thumbnails.forEach(img => {\n                        \/\/ Store original src\n                        const originalSrc = img.getAttribute('src');\n                        \n                        \/\/ Create a new image to preload\n                        const preloadImg = new Image();\n                        preloadImg.onload = function() {\n                            \/\/ Once preloaded, set back to the element\n                            img.src = originalSrc;\n                        };\n                        \n                        \/\/ Start preloading\n                        preloadImg.src = originalSrc;\n                        \n                        \/\/ Add error handling\n                        img.onerror = function() {\n                            this.onerror = null;\n                            this.src = 'data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iOTAiIGZpbGw9IiNlZWUiLz48dGV4dCB4PSI2MCIgeT0iNDUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzk5OSI+VGh1bWJuYWlsPC90ZXh0Pjwvc3ZnPg==';\n                        };\n                    });\n                }, 100);\n            });\n            <\/script>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-185","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kishaw.io\/index.php?rest_route=\/wp\/v2\/pages\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kishaw.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kishaw.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kishaw.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kishaw.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=185"}],"version-history":[{"count":1,"href":"https:\/\/kishaw.io\/index.php?rest_route=\/wp\/v2\/pages\/185\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/kishaw.io\/index.php?rest_route=\/wp\/v2\/pages\/185\/revisions\/186"}],"wp:attachment":[{"href":"https:\/\/kishaw.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}