{"id":1079,"date":"2025-03-25T14:53:54","date_gmt":"2025-03-25T12:53:54","guid":{"rendered":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/?page_id=1079"},"modified":"2025-05-21T09:46:08","modified_gmt":"2025-05-21T07:46:08","slug":"videos","status":"publish","type":"page","link":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/videos\/","title":{"rendered":"Videos"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Search&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_search placeholder=&#8221;Search Holts&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_search][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px||||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>Videos<\/h1>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]    <div class=\"video-gallery\" id=\"video-gallery-1079\">\n        <div class=\"video-grid\">\n                            <div class=\"video-item\" data-video-id=\"0\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.41.02.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Trust Holts Tyreweld \u2013 Emergency Puncture Repair<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"1\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/03\/Exhaust-Repair.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Holts Gun Gum Silencerbox<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"2\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.39.15.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Redex Diesel System Cleaner<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"3\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.37.08.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Holts Tyreweld Emergency Puncture Repair<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"4\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/03\/Engine-Care-and-Maintenance.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Prestone Antifreeze\/Coolant<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"5\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.45.39.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Holts Gun Gum Exhaust Repair<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"6\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.48.26.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Holts Radweld<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                    <\/div>\n    <\/div>\n\n    <!-- Video Modal -->\n    <div id=\"video-modal\" class=\"video-modal\">\n        <div class=\"video-modal-content\">\n            <span class=\"video-modal-close\">&times;<\/span>\n            <div class=\"video-modal-iframe-container\"><\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        .video-gallery {\n            width: 100%;\n        }\n\n        .video-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));\n            gap: 30px 20px;\n        }\n\n        .video-thumbnail {\n            position: relative;\n            width: 100%;\n            padding-top: 56.25%;\n            background-size: cover;\n            background-position: center;\n            cursor: pointer;\n            overflow: hidden;\n            border-radius: 12px;\n        }\n\n        .video-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0,0,0,0.4);\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            transition: background 0.3s ease;\n        }\n\n        .video-overlay:hover {\n            background: rgba(0,0,0,0.6);\n        }\n\n        .video-title {\n            color: white;\n            text-align: center;\n            padding: 0 15px;\n            margin-bottom: 10px;\n            font-weight: bold;\n            line-height: 1.7rem;\n            font-size: 1.3rem;\n        }\n\n        .play-icon {\n            opacity: 0.8;\n            transition: opacity 0.3s ease;\n        }\n\n        .video-overlay:hover .play-icon {\n            opacity: 1;\n        }\n\n        .video-modal {\n            display: none;\n            position: fixed;\n            z-index: 1000;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n            overflow: auto;\n            background-color: rgba(0,0,0,0.9);\n        }\n\n        .video-modal-content {\n            position: relative;\n            margin: 15% auto;\n            width: 90%;\n            max-width: 800px;\n        }\n\n        .video-modal-close {\n            color: #f1f1f1;\n            position: absolute;\n            top: -40px;\n            right: 0;\n            font-size: 40px;\n            font-weight: bold;\n            cursor: pointer;\n        }\n\n        .video-modal-iframe-container {\n            position: relative;\n            padding-top: 56.25%; \/* 16:9 aspect ratio *\/\n        }\n\n        .video-modal-iframe-container iframe {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n        }\n        \n        .play-icon svg {\n            height: 20px;\n            width: 16px;\n        }\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const videoItems = document.querySelectorAll('.video-item');\n        const modal = document.getElementById('video-modal');\n        const modalClose = document.querySelector('.video-modal-close');\n        const modalIframeContainer = document.querySelector('.video-modal-iframe-container');\n        \n        \/\/ Store video data in a safe format for JS\n        const videoData = [{\"id\":0,\"iframe\":\"<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/dKWOlc-R2tk?si=EFLSY22CpnRioXBH\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Trust Holts Tyreweld \\u2013 Emergency Puncture Repair\"},{\"id\":1,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/81yyEMenIHY?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Holts Gun Gum Silencerbox\"},{\"id\":2,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/GZxICSfkMAM?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Redex Diesel System Cleaner\"},{\"id\":3,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/zHssIQMC_ms?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Holts Tyreweld Emergency Puncture Repair\"},{\"id\":4,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/LRmbGGNi29I?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Prestone Antifreeze\\\/Coolant\"},{\"id\":5,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/mWlz4X4ozc4?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Holts Gun Gum Exhaust Repair\"},{\"id\":6,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/XaFlZ5FyZ2g?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Holts Radweld\"}];\n\n        \/\/ Open modal with video\n        videoItems.forEach(item => {\n            item.addEventListener('click', function() {\n                const videoId = parseInt(this.getAttribute('data-video-id'));\n                const video = videoData.find(v => v.id === videoId);\n                \n                if (video) {\n                    \/\/ Clear previous iframe\n                    modalIframeContainer.innerHTML = '';\n                    \n                    \/\/ Insert iframe HTML directly\n                    \/\/ Using this approach to maintain iframe integrity\n                    modalIframeContainer.innerHTML = video.iframe;\n                    \n                    \/\/ Show modal\n                    modal.style.display = 'block';\n                }\n            });\n        });\n\n        \/\/ Close modal\n        modalClose.addEventListener('click', function() {\n            modal.style.display = 'none';\n            \/\/ Clear iframe to stop video\n            modalIframeContainer.innerHTML = '';\n        });\n\n        \/\/ Close modal when clicking outside\n        window.addEventListener('click', function(event) {\n            if (event.target === modal) {\n                modal.style.display = 'none';\n                modalIframeContainer.innerHTML = '';\n            }\n        });\n    });\n    <\/script>\n    [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Videos    <div class=\"video-gallery\" id=\"video-gallery-1079\">\n        <div class=\"video-grid\">\n                            <div class=\"video-item\" data-video-id=\"0\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.41.02.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Trust Holts Tyreweld \u2013 Emergency Puncture Repair<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"1\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/03\/Exhaust-Repair.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Holts Gun Gum Silencerbox<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"2\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.39.15.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Redex Diesel System Cleaner<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"3\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.37.08.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Holts Tyreweld Emergency Puncture Repair<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"4\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/03\/Engine-Care-and-Maintenance.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Prestone Antifreeze\/Coolant<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"5\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.45.39.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Holts Gun Gum Exhaust Repair<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                            <div class=\"video-item\" data-video-id=\"6\">\n                                            <div class=\"video-thumbnail\" style=\"background-image: url('https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-20-at-12.48.26.png')\">\n                            <div class=\"video-overlay\">\n                                <span class=\"video-title\">Holts Radweld<\/span>\n                                <div class=\"play-icon\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                    <\/div>\n    <\/div>\n\n    <!-- Video Modal -->\n    <div id=\"video-modal\" class=\"video-modal\">\n        <div class=\"video-modal-content\">\n            <span class=\"video-modal-close\">&times;<\/span>\n            <div class=\"video-modal-iframe-container\"><\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        .video-gallery {\n            width: 100%;\n        }\n\n        .video-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));\n            gap: 30px 20px;\n        }\n\n        .video-thumbnail {\n            position: relative;\n            width: 100%;\n            padding-top: 56.25%;\n            background-size: cover;\n            background-position: center;\n            cursor: pointer;\n            overflow: hidden;\n            border-radius: 12px;\n        }\n\n        .video-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0,0,0,0.4);\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            transition: background 0.3s ease;\n        }\n\n        .video-overlay:hover {\n            background: rgba(0,0,0,0.6);\n        }\n\n        .video-title {\n            color: white;\n            text-align: center;\n            padding: 0 15px;\n            margin-bottom: 10px;\n            font-weight: bold;\n            line-height: 1.7rem;\n            font-size: 1.3rem;\n        }\n\n        .play-icon {\n            opacity: 0.8;\n            transition: opacity 0.3s ease;\n        }\n\n        .video-overlay:hover .play-icon {\n            opacity: 1;\n        }\n\n        .video-modal {\n            display: none;\n            position: fixed;\n            z-index: 1000;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n            overflow: auto;\n            background-color: rgba(0,0,0,0.9);\n        }\n\n        .video-modal-content {\n            position: relative;\n            margin: 15% auto;\n            width: 90%;\n            max-width: 800px;\n        }\n\n        .video-modal-close {\n            color: #f1f1f1;\n            position: absolute;\n            top: -40px;\n            right: 0;\n            font-size: 40px;\n            font-weight: bold;\n            cursor: pointer;\n        }\n\n        .video-modal-iframe-container {\n            position: relative;\n            padding-top: 56.25%; \/* 16:9 aspect ratio *\/\n        }\n\n        .video-modal-iframe-container iframe {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n        }\n        \n        .play-icon svg {\n            height: 20px;\n            width: 16px;\n        }\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const videoItems = document.querySelectorAll('.video-item');\n        const modal = document.getElementById('video-modal');\n        const modalClose = document.querySelector('.video-modal-close');\n        const modalIframeContainer = document.querySelector('.video-modal-iframe-container');\n        \n        \/\/ Store video data in a safe format for JS\n        const videoData = [{\"id\":0,\"iframe\":\"<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/dKWOlc-R2tk?si=EFLSY22CpnRioXBH\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Trust Holts Tyreweld \\u2013 Emergency Puncture Repair\"},{\"id\":1,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/81yyEMenIHY?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Holts Gun Gum Silencerbox\"},{\"id\":2,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/GZxICSfkMAM?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Redex Diesel System Cleaner\"},{\"id\":3,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/zHssIQMC_ms?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Holts Tyreweld Emergency Puncture Repair\"},{\"id\":4,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/LRmbGGNi29I?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Prestone Antifreeze\\\/Coolant\"},{\"id\":5,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/mWlz4X4ozc4?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Holts Gun Gum Exhaust Repair\"},{\"id\":6,\"iframe\":\"<iframe width=\\\"100%\\\" height=\\\"315\\\" src=\\\"https:\\\/\\\/www.youtube.com\\\/embed\\\/XaFlZ5FyZ2g?rel=0\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; encrypted-media\\\" allowfullscreen><\\\/iframe>\",\"title\":\"Holts Radweld\"}];\n\n        \/\/ Open modal with video\n        videoItems.forEach(item => {\n            item.addEventListener('click', function() {\n                const videoId = parseInt(this.getAttribute('data-video-id'));\n                const video = videoData.find(v => v.id === videoId);\n                \n                if (video) {\n                    \/\/ Clear previous iframe\n                    modalIframeContainer.innerHTML = '';\n                    \n                    \/\/ Insert iframe HTML directly\n                    \/\/ Using this approach to maintain iframe integrity\n                    modalIframeContainer.innerHTML = video.iframe;\n                    \n                    \/\/ Show modal\n                    modal.style.display = 'block';\n                }\n            });\n        });\n\n        \/\/ Close modal\n        modalClose.addEventListener('click', function() {\n            modal.style.display = 'none';\n            \/\/ Clear iframe to stop video\n            modalIframeContainer.innerHTML = '';\n        });\n\n        \/\/ Close modal when clicking outside\n        window.addEventListener('click', function(event) {\n            if (event.target === modal) {\n                modal.style.display = 'none';\n                modalIframeContainer.innerHTML = '';\n            }\n        });\n    });\n    <\/script>\n    <\/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,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-1079","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-json\/wp\/v2\/pages\/1079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-json\/wp\/v2\/comments?post=1079"}],"version-history":[{"count":16,"href":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-json\/wp\/v2\/pages\/1079\/revisions"}],"predecessor-version":[{"id":1928,"href":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-json\/wp\/v2\/pages\/1079\/revisions\/1928"}],"wp:attachment":[{"href":"https:\/\/ptdevelopment.co\/69680_HOLTS_Website_2025\/wp-json\/wp\/v2\/media?parent=1079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}