{"id":1839,"date":"2024-07-02T23:20:53","date_gmt":"2024-07-02T23:20:53","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=1839"},"modified":"2024-07-12T16:46:09","modified_gmt":"2024-07-12T16:46:09","slug":"videotest2","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/videotest2\/","title":{"rendered":"videotest2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1839\" class=\"elementor elementor-1839\">\n\t\t\t\t<div class=\"elementor-element elementor-element-860c09b e-flex e-con-boxed e-con e-parent\" data-id=\"860c09b\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc05e5c elementor-widget elementor-widget-html\" data-id=\"cc05e5c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"position: relative; width: 1080px; height: 720px; overflow: hidden;\">\n    <iframe id=\"layer1\" width=\"1080\" height=\"720\" src=\"https:\/\/www.youtube.com\/embed\/iUrzicaiRLU?autoplay=1&loop=1&mute=1&playlist=iUrzicaiRLU\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" style=\"position: absolute; top: 0; left: 0;\"><\/iframe>\n    <iframe id=\"layer2\" width=\"1080\" height=\"720\" src=\"https:\/\/www.youtube.com\/embed\/TL0EoXdpOqg?autoplay=1&loop=1&mute=1&playlist=TL0EoXdpOqg\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" style=\"position: absolute; top: 0; left: 0; opacity: 0;\"><\/iframe>\n<\/div>\n<div style=\"width: 1080px; margin: 20px auto; text-align: center;\">\n    <button id=\"playPauseButton\">Pause<\/button>\n    <br><br>\n    <label for=\"opacitySlider\">Opacity:<\/label>\n    <input type=\"range\" id=\"opacitySlider\" min=\"0\" max=\"100\" value=\"0\" style=\"width: 50%;\">\n    <br><br>\n    <label for=\"brightnessSlider\">Brightness:<\/label>\n    <input type=\"range\" id=\"brightnessSlider\" min=\"0\" max=\"200\" value=\"100\" style=\"width: 50%;\">\n    <br><br>\n    <label for=\"contrastSlider\">Contrast:<\/label>\n    <input type=\"range\" id=\"contrastSlider\" min=\"0\" max=\"200\" value=\"100\" style=\"width: 50%;\">\n    <br><br>\n    <label for=\"saturationSlider\">Saturation:<\/label>\n    <input type=\"range\" id=\"saturationSlider\" min=\"0\" max=\"200\" value=\"100\" style=\"width: 50%;\">\n    <br><br>\n    <label for=\"hueRotateSlider\">Hue Rotate:<\/label>\n    <input type=\"range\" id=\"hueRotateSlider\" min=\"0\" max=\"360\" value=\"0\" style=\"width: 50%;\">\n    <br><br>\n    <label for=\"blurSlider\">Blur:<\/label>\n    <input type=\"range\" id=\"blurSlider\" min=\"0\" max=\"20\" value=\"0\" style=\"width: 50%;\">\n<\/div>\n\n<script>\n    const layer1 = document.getElementById('layer1');\n    const layer2 = document.getElementById('layer2');\n    const playPauseButton = document.getElementById('playPauseButton');\n    const opacitySlider = document.getElementById('opacitySlider');\n    const brightnessSlider = document.getElementById('brightnessSlider');\n    const contrastSlider = document.getElementById('contrastSlider');\n    const saturationSlider = document.getElementById('saturationSlider');\n    const hueRotateSlider = document.getElementById('hueRotateSlider');\n    const blurSlider = document.getElementById('blurSlider');\n\n    let isPlaying = true;\n\n    playPauseButton.addEventListener('click', () => {\n        const method = isPlaying ? 'pauseVideo' : 'playVideo';\n        layer1.contentWindow.postMessage(`{\"event\":\"command\",\"func\":\"${method}\",\"args\":\"\"}`, '*');\n        layer2.contentWindow.postMessage(`{\"event\":\"command\",\"func\":\"${method}\",\"args\":\"\"}`, '*');\n        playPauseButton.textContent = isPlaying ? 'Play' : 'Pause';\n        isPlaying = !isPlaying;\n    });\n\n    opacitySlider.addEventListener('input', () => {\n        const opacity = opacitySlider.value \/ 100;\n        layer2.style.opacity = opacity;\n    });\n\n    brightnessSlider.addEventListener('input', updateFilters);\n    contrastSlider.addEventListener('input', updateFilters);\n    saturationSlider.addEventListener('input', updateFilters);\n    hueRotateSlider.addEventListener('input', updateFilters);\n    blurSlider.addEventListener('input', updateFilters);\n\n    function updateFilters() {\n        const brightness = brightnessSlider.value \/ 100;\n        const contrast = contrastSlider.value \/ 100;\n        const saturation = saturationSlider.value \/ 100;\n        const hueRotate = hueRotateSlider.value;\n        const blur = blurSlider.value + 'px';\n        const filter = `\n            brightness(${brightness})\n            contrast(${contrast})\n            saturate(${saturation})\n            hue-rotate(${hueRotate}deg)\n            blur(${blur})\n        `;\n        layer1.style.filter = filter;\n        layer2.style.filter = filter;\n    }\n\n    \/\/ Ensure videos loop (not needed for YouTube if &loop=1 and playlist parameter are used)\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pause Opacity: Brightness: Contrast: Saturation: Hue Rotate: Blur:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-1839","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=1839"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1839\/revisions"}],"predecessor-version":[{"id":3514,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1839\/revisions\/3514"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}