{"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=PLKmny9LihO0w\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/ryyIR2O99jA\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBaKFcwDw==&#038;rs=AOn4CLBayVGYsFrqT7Bgi81Hu_rqYc6W3g\" \n                                         alt=\"Moranbah 7th Nov 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLKmny9LihO0w\" target=\"_blank\">\n                                    Moranbah 7th Nov 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">3 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=PLHOJtQFKnQ_Y\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/fvRbHfCIIGc\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBgKDUwDw==&#038;rs=AOn4CLDFhge_G40BUmVJVCM1FJE8T8xnoQ\" \n                                         alt=\"Cooktown 7th Nov 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLHOJtQFKnQ_Y\" target=\"_blank\">\n                                    Cooktown 7th Nov 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=PLLV7srTmRf5Y\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/FeOjrHRdmdw\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYWyBlKEAwDw==&#038;rs=AOn4CLDjHSTDmePmR89xGfpoCYivzC7XVw\" \n                                         alt=\"Esk 7th Nov 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLLV7srTmRf5Y\" target=\"_blank\">\n                                    Esk 7th Nov 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=PLanjMnvbqd5s\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/-axDixU2jyM\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYQSBTKGUwDw==&#038;rs=AOn4CLBBHcBgsGfbYRgq7Lb1Gtcw3czseQ\" \n                                         alt=\"Longreach 7 Nov 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLanjMnvbqd5s\" target=\"_blank\">\n                                    Longreach 7 Nov 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=PLb86cp-TGfdw\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/rkIqWDECnXs\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBkKEYwDw==&#038;rs=AOn4CLBVF2tdBHesW7XkhwFKlLf3htLzJg\" \n                                         alt=\"Rockhamton 3 Nov 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLb86cp-TGfdw\" target=\"_blank\">\n                                    Rockhamton 3 Nov 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=PLdBb8Npb3K4w\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/xp5HkA1TuLg\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBYKEowDw==&#038;rs=AOn4CLCAI88eDz5XCZZLb-5V0P49TxPAKg\" \n                                         alt=\"Charleville 3 Nov 2026 Melb Cup Day\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLdBb8Npb3K4w\" target=\"_blank\">\n                                    Charleville 3 Nov 2026 Melb Cup Day                                <\/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=PLKhwoWHJEG7Q\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/haGicIk2dcs\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBWKEcwDw==&#038;rs=AOn4CLChdi30XdS55gegMv1X47sWm6p6hg\" \n                                         alt=\"Townsville 3rd Nov 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLKhwoWHJEG7Q\" target=\"_blank\">\n                                    Townsville 3rd Nov 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=PLSXXeqHx1uBA\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/yd2RjX0tZd4\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYXiBlKEMwDw==&#038;rs=AOn4CLCGujWyJA4SD_G_vgy0F7RQbuZjzA\" \n                                         alt=\"Kumbia 3rd Nov 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLSXXeqHx1uBA\" target=\"_blank\">\n                                    Kumbia 3rd Nov 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">7 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=PLEVRiaE7MU98\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/o5iRyUI-uT8\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZiBmKGYwDw==&#038;rs=AOn4CLAcUV4p7Qi5CHL27iXzUOXir42EXw\" \n                                         alt=\"Bundaberg 3rd Nov 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLEVRiaE7MU98\" target=\"_blank\">\n                                    Bundaberg 3rd Nov 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=PLALf7T_poa5g\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/wRYLmIaUvhs\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYWyBlKDowDw==&#038;rs=AOn4CLDN_i1kfDfBApaxsmYqMNb9oQhpgg\" \n                                         alt=\"Toowoomba 3rd Nov 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLALf7T_poa5g\" target=\"_blank\">\n                                    Toowoomba 3rd Nov 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">2 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=PLHgnA-oXnOyo\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/xE3J4G6n2AI\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYVyBlKDQwDw==&#038;rs=AOn4CLA-0jpjzRTzbE8IvkvSEsQs66OCsA\" \n                                         alt=\"Barcaldine 31st Oct 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLHgnA-oXnOyo\" target=\"_blank\">\n                                    Barcaldine 31st Oct 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">7 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=PLXtHVWg7FH6U\" target=\"_blank\">\n                                    <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/9vMKCXGKdc4\/hqdefault.jpg?sqp=-oaymwExCOADEI4CSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYYCBlKD0wDw==&#038;rs=AOn4CLA4v1DfYvQbH3eR7ibi-F6vSXGzCg\" \n                                         alt=\"Home Hill 31st Oct 2026\">\n                                <\/a>\n                            <\/div>\n                            <h3 class=\"video-title\">\n                                <a href=\"https:\/\/www.youtube.com\/playlist?list=PLXtHVWg7FH6U\" target=\"_blank\">\n                                    Home Hill 31st Oct 2026                                <\/a>\n                            <\/h3>\n                                                            <div class=\"video-meta\">\n                                    <span class=\"playlist-count\">6 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}]}}