Smart Video Carousel<\/title>\r\n <style>\r\n .custom-carousel-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 500px;\r\n }\r\n\r\n .custom-video-container {\r\n position: relative;\r\n width: 100%;\r\n height: calc(100% - 40px);\r\n overflow: hidden;\r\n }\r\n\r\n .custom-video-item {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n\r\n .custom-video-item.active {\r\n opacity: 1;\r\n z-index: 1;\r\n }\r\n\r\n .custom-controls-container {\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n padding: 10px 20px;\r\n background-color: #fff;\r\n width: 100%;\r\n justify-content: center;\r\n height: 40px;\r\n box-sizing: border-box;\r\n }\r\n\r\n .custom-dots-container {\r\n display: flex;\r\n gap: 15px;\r\n }\r\n\r\n .custom-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n border: 0.5px solid #000;\r\n background-color: transparent;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-sizing: border-box;\r\n }\r\n\r\n .custom-dot.active {\r\n background-color: #000;\r\n border-color: #000;\r\n }\r\n\r\n .custom-dot:hover {\r\n transform: scale(1.2);\r\n }\r\n\r\n .custom-play-pause-btn {\r\n width: 15px;\r\n height: 15px;\r\n background-color: transparent !important;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .custom-play-pause-btn svg {\r\n width: 100%;\r\n height: 100%;\r\n fill: #000;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"custom-carousel-wrapper\">\r\n <div class=\"custom-video-container\">\r\n <video class=\"custom-video-item\" autoplay muted playsinline loop>\r\n <source src=\"https:\/\/pocketshop.shop\/wp-content\/uploads\/2025\/05\/50913f10-5790-4a37-842d-8560d4ec9ce8.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <video class=\"custom-video-item\" muted playsinline loop>\r\n <source src=\"https:\/\/slategrey-otter-684018.hostingersite.com\/wp-content\/uploads\/2025\/04\/977406f43cf54dcf8d60edd6500d1a6f.HD-1080p-3.3Mbps-25526291.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n\r\n <div class=\"custom-controls-container\">\r\n <div class=\"custom-dots-container\">\r\n <div class=\"custom-dot active\" data-index=\"0\"><\/div>\r\n <div class=\"custom-dot\" data-index=\"1\"><\/div>\r\n <\/div>\r\n <button class=\"custom-play-pause-btn\" aria-label=\"Play\/Pause\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path id=\"pause-icon\" d=\"M14,19H18V5H14M6,19H10V5H6V19Z\"\/>\r\n <path id=\"play-icon\" d=\"M8,5.14V19.14L19,12.14L8,5.14Z\" style=\"display:none\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', async () => {\r\n const videos = document.querySelectorAll('.custom-video-item');\r\n const dots = document.querySelectorAll('.custom-dot');\r\n const playPauseBtn = document.querySelector('.custom-play-pause-btn');\r\n const pauseIcon = document.getElementById('pause-icon');\r\n const playIcon = document.getElementById('play-icon');\r\n\r\n let currentIndex = 0;\r\n let isPlaying = true;\r\n let videoTimeout;\r\n\r\n async function getDuration(video) {\r\n return new Promise((resolve) => {\r\n if (!isNaN(video.duration) && video.duration > 0) {\r\n resolve(video.duration);\r\n } else {\r\n video.addEventListener('loadedmetadata', () => {\r\n resolve(video.duration);\r\n }, { once: true });\r\n }\r\n });\r\n }\r\n\r\n async function scheduleNextVideo() {\r\n clearTimeout(videoTimeout);\r\n const currentVideo = videos[currentIndex];\r\n const duration = await getDuration(currentVideo);\r\n\r\n if (isPlaying && duration > 0) {\r\n videoTimeout = setTimeout(() => {\r\n switchVideo();\r\n }, duration * 1000);\r\n }\r\n }\r\n\r\n async function switchVideo(newIndex) {\r\n const nextIndex = typeof newIndex === 'number' ? newIndex : (currentIndex + 1) % videos.length;\r\n\r\n videos[currentIndex].classList.remove('active');\r\n dots[currentIndex].classList.remove('active');\r\n videos[currentIndex].pause();\r\n\r\n currentIndex = nextIndex;\r\n videos[currentIndex].classList.add('active');\r\n dots[currentIndex].classList.add('active');\r\n videos[currentIndex].currentTime = 0;\r\n\r\n if (isPlaying) {\r\n videos[currentIndex].play();\r\n scheduleNextVideo();\r\n }\r\n }\r\n\r\n function togglePlayPause() {\r\n isPlaying = !isPlaying;\r\n if (isPlaying) {\r\n videos[currentIndex].play();\r\n scheduleNextVideo();\r\n pauseIcon.style.display = 'block';\r\n playIcon.style.display = 'none';\r\n } else {\r\n videos[currentIndex].pause();\r\n clearTimeout(videoTimeout);\r\n pauseIcon.style.display = 'none';\r\n playIcon.style.display = 'block';\r\n }\r\n }\r\n\r\n async function init() {\r\n videos.forEach(v => {\r\n v.muted = true;\r\n v.setAttribute('playsinline', '');\r\n });\r\n\r\n videos[currentIndex].classList.add('active');\r\n dots[currentIndex].classList.add('active');\r\n\r\n await getDuration(videos[currentIndex]);\r\n videos[currentIndex].play();\r\n scheduleNextVideo();\r\n }\r\n\r\n dots.forEach(dot => {\r\n dot.addEventListener('click', function () {\r\n const dotIndex = parseInt(this.getAttribute('data-index'));\r\n if (dotIndex !== currentIndex) {\r\n switchVideo(dotIndex);\r\n }\r\n });\r\n });\r\n\r\n playPauseBtn.addEventListener('click', togglePlayPause);\r\n\r\n const wrapper = document.querySelector('.custom-carousel-wrapper');\r\n wrapper.addEventListener('mouseenter', () => {\r\n if (isPlaying) clearTimeout(videoTimeout);\r\n });\r\n wrapper.addEventListener('mouseleave', () => {\r\n if (isPlaying) scheduleNextVideo();\r\n });\r\n\r\n await init();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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<div class=\"elementor-element elementor-element-27b6772 e-flex e-con-boxed e-con e-parent\" data-id=\"27b6772\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"ekit_has_onepagescroll_dot":"yes"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2f67e4 elementor-widget elementor-widget-heading\" data-id=\"e2f67e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b029995 elementor-widget elementor-widget-shortcode\" data-id=\"b029995\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"woocommerce columns-4\"><\/div><\/div>\n\t\t\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<div class=\"elementor-element elementor-element-7543960 e-con-full e-flex e-con e-parent\" data-id=\"7543960\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"ekit_has_onepagescroll_dot":"yes"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-85ad44e elementor-widget elementor-widget-image\" data-id=\"85ad44e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/pocketshop.shop\/wp-content\/uploads\/elementor\/thumbs\/2mom-baby-header-desktop123-123_0021221554_523212333215472-r5zw2fch2je1pls54wqdrs4vl288u1y6df56702a8e.jpg\" title=\"2mom-baby-header-desktop123-123_0021221554_523212333215472\" alt=\"2mom-baby-header-desktop123-123_0021221554_523212333215472\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Smart Video Carousel Add Your Heading Text Here<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1455","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/pages\/1455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/comments?post=1455"}],"version-history":[{"count":67,"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/pages\/1455\/revisions"}],"predecessor-version":[{"id":1612,"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/pages\/1455\/revisions\/1612"}],"wp:attachment":[{"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/media?parent=1455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Smart Video Carousel<\/title>\r\n <style>\r\n .custom-carousel-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 500px;\r\n }\r\n\r\n .custom-video-container {\r\n position: relative;\r\n width: 100%;\r\n height: calc(100% - 40px);\r\n overflow: hidden;\r\n }\r\n\r\n .custom-video-item {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n\r\n .custom-video-item.active {\r\n opacity: 1;\r\n z-index: 1;\r\n }\r\n\r\n .custom-controls-container {\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n padding: 10px 20px;\r\n background-color: #fff;\r\n width: 100%;\r\n justify-content: center;\r\n height: 40px;\r\n box-sizing: border-box;\r\n }\r\n\r\n .custom-dots-container {\r\n display: flex;\r\n gap: 15px;\r\n }\r\n\r\n .custom-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n border: 0.5px solid #000;\r\n background-color: transparent;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-sizing: border-box;\r\n }\r\n\r\n .custom-dot.active {\r\n background-color: #000;\r\n border-color: #000;\r\n }\r\n\r\n .custom-dot:hover {\r\n transform: scale(1.2);\r\n }\r\n\r\n .custom-play-pause-btn {\r\n width: 15px;\r\n height: 15px;\r\n background-color: transparent !important;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .custom-play-pause-btn svg {\r\n width: 100%;\r\n height: 100%;\r\n fill: #000;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"custom-carousel-wrapper\">\r\n <div class=\"custom-video-container\">\r\n <video class=\"custom-video-item\" autoplay muted playsinline loop>\r\n <source src=\"https:\/\/pocketshop.shop\/wp-content\/uploads\/2025\/05\/50913f10-5790-4a37-842d-8560d4ec9ce8.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <video class=\"custom-video-item\" muted playsinline loop>\r\n <source src=\"https:\/\/slategrey-otter-684018.hostingersite.com\/wp-content\/uploads\/2025\/04\/977406f43cf54dcf8d60edd6500d1a6f.HD-1080p-3.3Mbps-25526291.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n\r\n <div class=\"custom-controls-container\">\r\n <div class=\"custom-dots-container\">\r\n <div class=\"custom-dot active\" data-index=\"0\"><\/div>\r\n <div class=\"custom-dot\" data-index=\"1\"><\/div>\r\n <\/div>\r\n <button class=\"custom-play-pause-btn\" aria-label=\"Play\/Pause\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path id=\"pause-icon\" d=\"M14,19H18V5H14M6,19H10V5H6V19Z\"\/>\r\n <path id=\"play-icon\" d=\"M8,5.14V19.14L19,12.14L8,5.14Z\" style=\"display:none\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', async () => {\r\n const videos = document.querySelectorAll('.custom-video-item');\r\n const dots = document.querySelectorAll('.custom-dot');\r\n const playPauseBtn = document.querySelector('.custom-play-pause-btn');\r\n const pauseIcon = document.getElementById('pause-icon');\r\n const playIcon = document.getElementById('play-icon');\r\n\r\n let currentIndex = 0;\r\n let isPlaying = true;\r\n let videoTimeout;\r\n\r\n async function getDuration(video) {\r\n return new Promise((resolve) => {\r\n if (!isNaN(video.duration) && video.duration > 0) {\r\n resolve(video.duration);\r\n } else {\r\n video.addEventListener('loadedmetadata', () => {\r\n resolve(video.duration);\r\n }, { once: true });\r\n }\r\n });\r\n }\r\n\r\n async function scheduleNextVideo() {\r\n clearTimeout(videoTimeout);\r\n const currentVideo = videos[currentIndex];\r\n const duration = await getDuration(currentVideo);\r\n\r\n if (isPlaying && duration > 0) {\r\n videoTimeout = setTimeout(() => {\r\n switchVideo();\r\n }, duration * 1000);\r\n }\r\n }\r\n\r\n async function switchVideo(newIndex) {\r\n const nextIndex = typeof newIndex === 'number' ? newIndex : (currentIndex + 1) % videos.length;\r\n\r\n videos[currentIndex].classList.remove('active');\r\n dots[currentIndex].classList.remove('active');\r\n videos[currentIndex].pause();\r\n\r\n currentIndex = nextIndex;\r\n videos[currentIndex].classList.add('active');\r\n dots[currentIndex].classList.add('active');\r\n videos[currentIndex].currentTime = 0;\r\n\r\n if (isPlaying) {\r\n videos[currentIndex].play();\r\n scheduleNextVideo();\r\n }\r\n }\r\n\r\n function togglePlayPause() {\r\n isPlaying = !isPlaying;\r\n if (isPlaying) {\r\n videos[currentIndex].play();\r\n scheduleNextVideo();\r\n pauseIcon.style.display = 'block';\r\n playIcon.style.display = 'none';\r\n } else {\r\n videos[currentIndex].pause();\r\n clearTimeout(videoTimeout);\r\n pauseIcon.style.display = 'none';\r\n playIcon.style.display = 'block';\r\n }\r\n }\r\n\r\n async function init() {\r\n videos.forEach(v => {\r\n v.muted = true;\r\n v.setAttribute('playsinline', '');\r\n });\r\n\r\n videos[currentIndex].classList.add('active');\r\n dots[currentIndex].classList.add('active');\r\n\r\n await getDuration(videos[currentIndex]);\r\n videos[currentIndex].play();\r\n scheduleNextVideo();\r\n }\r\n\r\n dots.forEach(dot => {\r\n dot.addEventListener('click', function () {\r\n const dotIndex = parseInt(this.getAttribute('data-index'));\r\n if (dotIndex !== currentIndex) {\r\n switchVideo(dotIndex);\r\n }\r\n });\r\n });\r\n\r\n playPauseBtn.addEventListener('click', togglePlayPause);\r\n\r\n const wrapper = document.querySelector('.custom-carousel-wrapper');\r\n wrapper.addEventListener('mouseenter', () => {\r\n if (isPlaying) clearTimeout(videoTimeout);\r\n });\r\n wrapper.addEventListener('mouseleave', () => {\r\n if (isPlaying) scheduleNextVideo();\r\n });\r\n\r\n await init();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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<div class=\"elementor-element elementor-element-27b6772 e-flex e-con-boxed e-con e-parent\" data-id=\"27b6772\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"ekit_has_onepagescroll_dot":"yes"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2f67e4 elementor-widget elementor-widget-heading\" data-id=\"e2f67e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b029995 elementor-widget elementor-widget-shortcode\" data-id=\"b029995\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"woocommerce columns-4\"><\/div><\/div>\n\t\t\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<div class=\"elementor-element elementor-element-7543960 e-con-full e-flex e-con e-parent\" data-id=\"7543960\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"ekit_has_onepagescroll_dot":"yes"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-85ad44e elementor-widget elementor-widget-image\" data-id=\"85ad44e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/pocketshop.shop\/wp-content\/uploads\/elementor\/thumbs\/2mom-baby-header-desktop123-123_0021221554_523212333215472-r5zw2fch2je1pls54wqdrs4vl288u1y6df56702a8e.jpg\" title=\"2mom-baby-header-desktop123-123_0021221554_523212333215472\" alt=\"2mom-baby-header-desktop123-123_0021221554_523212333215472\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Smart Video Carousel Add Your Heading Text Here<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1455","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/pages\/1455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/comments?post=1455"}],"version-history":[{"count":67,"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/pages\/1455\/revisions"}],"predecessor-version":[{"id":1612,"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/pages\/1455\/revisions\/1612"}],"wp:attachment":[{"href":"https:\/\/pocketshop.shop\/de\/wp-json\/wp\/v2\/media?parent=1455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}