YouTube Playlist Widget - English<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: #f8f9fa;\r\n padding: 20px;\r\n }\r\n \r\n .playlist-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: white;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.08);\r\n overflow: hidden;\r\n }\r\n \r\n .playlist-content {\r\n display: flex;\r\n height: 500px;\r\n }\r\n \r\n .playlist-sidebar {\r\n flex: 1;\r\n background: #f8f9fa;\r\n border-right: 1px solid #e9ecef;\r\n height: 500px;\r\n overflow-y: auto;\r\n }\r\n \r\n .video-player {\r\n flex: 2;\r\n background: #f8f9fa;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 20px 22px 22px 20px;\r\n }\r\n \r\n .video-container {\r\n width: 100%;\r\n position: relative;\r\n background: #000;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.15);\r\n }\r\n \r\n .video-container::before {\r\n content: \"\";\r\n display: block;\r\n padding-top: 56.25%; \/* 16:9 Aspect Ratio *\/\r\n }\r\n \r\n .video-frame {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n }\r\n \r\n .video-placeholder {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n color: white;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 40px;\r\n }\r\n \r\n .preview-thumbnail {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n cursor: pointer;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n }\r\n \r\n .play-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(0,0,0,0.3);\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .preview-thumbnail:hover .play-overlay {\r\n background: rgba(0,0,0,0.5);\r\n }\r\n \r\n .play-button {\r\n width: 80px;\r\n height: 80px;\r\n background: rgba(30,170,247,0.9);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 32px;\r\n color: white;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .preview-thumbnail:hover .play-button {\r\n background: #1EAAF7;\r\n transform: scale(1.1);\r\n }\r\n \r\n .initial-message {\r\n text-align: center;\r\n }\r\n \r\n .playlist-title {\r\n padding: 20px;\r\n background: linear-gradient(135deg, #1FADF7 0%, #28E3FA 100%);\r\n color: white;\r\n border-bottom: 1px solid #e9ecef;\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n \r\n .playlist-title h3 {\r\n color: white;\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin: 0;\r\n }\r\n \r\n .playlist-counter {\r\n color: rgba(255, 255, 255, 0.9);\r\n font-size: 14px;\r\n }\r\n \r\n .playlist-items {\r\n padding: 10px;\r\n }\r\n \r\n .playlist-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 12px;\r\n margin-bottom: 8px;\r\n background: white;\r\n border-radius: 12px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: 2px solid transparent;\r\n }\r\n \r\n .playlist-item:hover {\r\n background: #f8f9fa;\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n }\r\n \r\n .playlist-item.active {\r\n background: #e3f2fd;\r\n border-color: #1EAAF7;\r\n box-shadow: 0 4px 12px rgba(30,170,247,0.2);\r\n }\r\n \r\n .item-thumbnail {\r\n width: 80px;\r\n height: 45px;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n position: relative;\r\n background: white;\r\n }\r\n \r\n .item-thumbnail img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n .item-number {\r\n position: absolute;\r\n top: 2px;\r\n left: 2px;\r\n background: rgba(0,0,0,0.8);\r\n color: white;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 10px;\r\n font-weight: 600;\r\n }\r\n \r\n .playlist-item.active .item-number {\r\n background: #1EAAF7;\r\n }\r\n \r\n .item-content {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n \r\n .item-title {\r\n font-weight: 600;\r\n color: #343a40;\r\n font-size: 14px;\r\n margin-bottom: 4px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n \r\n .item-duration {\r\n font-size: 12px;\r\n color: #6c757d;\r\n }\r\n \r\n .playing-indicator {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-top: 8px;\r\n }\r\n \r\n .playing-bars {\r\n display: flex;\r\n gap: 2px;\r\n align-items: end;\r\n }\r\n \r\n .bar {\r\n width: 2px;\r\n height: 8px;\r\n background: #1EAAF7;\r\n animation: bounce 1.4s infinite ease-in-out;\r\n }\r\n \r\n .bar:nth-child(2) { animation-delay: -1.1s; }\r\n .bar:nth-child(3) { animation-delay: -0.9s; }\r\n \r\n @keyframes bounce {\r\n 0%, 80%, 100% { transform: scaleY(0.4); }\r\n 40% { transform: scaleY(1); }\r\n }\r\n \r\n \/* Responsive Design *\/\r\n @media (max-width: 1024px) {\r\n .playlist-container {\r\n margin: 10px;\r\n border-radius: 12px;\r\n }\r\n \r\n .playlist-content {\r\n height: auto;\r\n min-height: 400px;\r\n }\r\n \r\n .playlist-sidebar {\r\n height: auto;\r\n max-height: 500px;\r\n }\r\n \r\n .video-player {\r\n padding: 15px;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n body {\r\n padding: 10px;\r\n }\r\n \r\n .playlist-content {\r\n flex-direction: column;\r\n height: auto;\r\n }\r\n \r\n .playlist-sidebar {\r\n max-height: 400px;\r\n border-right: none;\r\n border-top: 1px solid #e9ecef;\r\n order: 2;\r\n height: auto;\r\n }\r\n \r\n .video-player {\r\n order: 1;\r\n padding: 15px;\r\n }\r\n \r\n .playlist-title {\r\n padding: 15px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 5px;\r\n }\r\n \r\n .playlist-title h3 {\r\n font-size: 16px;\r\n }\r\n \r\n .playlist-counter {\r\n font-size: 13px;\r\n }\r\n \r\n .item-thumbnail {\r\n width: 60px;\r\n height: 34px;\r\n }\r\n \r\n .item-title {\r\n font-size: 13px;\r\n }\r\n \r\n .item-duration {\r\n font-size: 11px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n body {\r\n padding: 5px;\r\n }\r\n \r\n .playlist-container {\r\n border-radius: 8px;\r\n }\r\n \r\n .playlist-content {\r\n height: auto;\r\n }\r\n \r\n .playlist-sidebar {\r\n max-height: 350px;\r\n }\r\n \r\n .video-player {\r\n padding: 10px;\r\n }\r\n \r\n .playlist-title {\r\n padding: 12px;\r\n }\r\n \r\n .playlist-title h3 {\r\n font-size: 15px;\r\n }\r\n \r\n .playlist-counter {\r\n font-size: 12px;\r\n }\r\n \r\n .playlist-items {\r\n padding: 8px;\r\n }\r\n \r\n .playlist-item {\r\n padding: 8px;\r\n margin-bottom: 6px;\r\n border-radius: 8px;\r\n }\r\n \r\n .item-thumbnail {\r\n width: 50px;\r\n height: 28px;\r\n margin-right: 8px;\r\n }\r\n \r\n .item-number {\r\n width: 16px;\r\n height: 16px;\r\n font-size: 9px;\r\n }\r\n \r\n .item-title {\r\n font-size: 12px;\r\n line-height: 1.3;\r\n }\r\n \r\n .item-duration {\r\n font-size: 10px;\r\n margin-top: 2px;\r\n }\r\n \r\n .video-container {\r\n border-radius: 8px;\r\n }\r\n \r\n .play-button {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 24px;\r\n }\r\n }\r\n \r\n @media (max-width: 360px) {\r\n .playlist-sidebar {\r\n max-height: 300px;\r\n }\r\n \r\n .playlist-title {\r\n padding: 10px;\r\n }\r\n \r\n .playlist-title h3 {\r\n font-size: 14px;\r\n }\r\n \r\n .playlist-counter {\r\n font-size: 11px;\r\n }\r\n \r\n .playlist-items {\r\n padding: 6px;\r\n }\r\n \r\n .playlist-item {\r\n padding: 6px;\r\n margin-bottom: 4px;\r\n }\r\n \r\n .item-thumbnail {\r\n width: 45px;\r\n height: 25px;\r\n margin-right: 6px;\r\n }\r\n \r\n .item-title {\r\n font-size: 11px;\r\n }\r\n \r\n .item-duration {\r\n font-size: 9px;\r\n }\r\n \r\n .play-button {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 20px;\r\n }\r\n }\r\n \r\n \/* Scrollbar Styling *\/\r\n .playlist-sidebar::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n \r\n .playlist-sidebar::-webkit-scrollbar-track {\r\n background: #f1f3f4;\r\n }\r\n \r\n .playlist-sidebar::-webkit-scrollbar-thumb {\r\n background: #1EAAF7;\r\n border-radius: 3px;\r\n }\r\n \r\n .playlist-sidebar::-webkit-scrollbar-thumb:hover {\r\n background: #1890d1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"playlist-container\">\r\n <div class=\"playlist-content\">\r\n <div class=\"playlist-sidebar\">\r\n <div class=\"playlist-title\">\r\n <h3>Playlist<\/h3>\r\n <div class=\"playlist-counter\">\r\n <span id=\"currentIndex\">1<\/span> of <span id=\"totalVideos\">23<\/span> Videos\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"playlist-items\" id=\"playlistItems\">\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"video-player\">\r\n <div class=\"video-container\">\r\n <div class=\"video-placeholder\" id=\"videoPlaceholder\">\r\n <div class=\"preview-thumbnail\" id=\"previewThumbnail\" style=\"display: none;\">\r\n <img decoding=\"async\" id=\"previewImage\" src=\"\" alt=\"\" style=\"width: 100%; height: 100%; object-fit: cover; border-radius: 8px;\">\r\n <div class=\"play-overlay\">\r\n <div class=\"play-button\">\u25b6<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"initial-message\" id=\"initialMessage\">\r\n <h3>Select a video from the playlist<\/h3>\r\n <p>Click on a video in the list to play it<\/p>\r\n <\/div>\r\n <\/div>\r\n <iframe class=\"video-frame\" id=\"mainVideoFrame\" style=\"display: none;\" allowfullscreen><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ English video data for plemeo.ai\r\n const videos = [\r\n { id: '8CFzsFfvm9M', title: 'Welcome to plemeo.ai', duration: '2:30' },\r\n { id: 'u_n9G9ilSaA', title: 'About plemeo.ai', duration: '4:15' },\r\n { id: 'dtsNBEQvq4k', title: 'First steps with plemeo.ai', duration: '6:22' },\r\n { id: 'omNzY8jD6UE', title: 'OpenAI configuration', duration: '3:48' },\r\n { id: '9wiOeC5kzR0', title: 'AI configuration & prompting', duration: '5:31' },\r\n { id: 'b_fXpJRINKw', title: 'Azure configuration', duration: '4:42' },\r\n { id: '-or2ysu-bQU', title: 'Google Drive configuration', duration: '4:03' },\r\n { id: 'v-kh3pNdnfM', title: 'Dropbox configuration', duration: '3:35' },\r\n { id: '0RsRFTMUrAQ', title: 'The plemeo.ai chat function', duration: '5:47' },\r\n { id: '1gGIjh3Qwc4', title: 'Chat commands', duration: '4:28' },\r\n { id: 'riacYiiwNVU', title: 'Basic functions', duration: '6:41' },\r\n { id: 'hWWik7TaVYo', title: 'E-Mail configuration', duration: '4:56' },\r\n { id: 'fVL_XZ0h3I0', title: 'Transcribe', duration: '3:52' },\r\n { id: 'GCRPRHTBOX4', title: 'PDF Fill Feature', duration: '5:13' },\r\n { id: 'sv1XJh3cZw8', title: 'AI Agents', duration: '7:29' },\r\n { id: 'O0VxA18LGaY', title: 'AI calls with Twilio', duration: '6:18' },\r\n { id: 'Y3D-8zQWwKQ', title: 'Twilio usecase', duration: '4:51' },\r\n { id: 'w8Pp3ZZinRE', title: 'LLM Selection', duration: '3:42' },\r\n { id: 'ApkNeXPKxfE', title: 'Whatsapp integration 1', duration: '5:58' },\r\n { id: 'Em5ZcU_IFEg', title: 'Whatsapp integration 2', duration: '4:33' },\r\n { id: '35A1s0wFAOQ', title: 'App store', duration: '3:24' },\r\n { id: 'mDNX6mcnfZw', title: 'OCR function', duration: '4:07' },\r\n { id: 'Z1NKKRVxUo0', title: 'Meta insights', duration: '5:38' }\r\n ];\r\n\r\n let activeVideoIndex = -1;\r\n\r\n \/\/ DOM Elements\r\n const mainFrame = document.getElementById('mainVideoFrame');\r\n const placeholder = document.getElementById('videoPlaceholder');\r\n const thumbnail = document.getElementById('previewThumbnail');\r\n const thumbImage = document.getElementById('previewImage');\r\n const message = document.getElementById('initialMessage');\r\n const itemsContainer = document.getElementById('playlistItems');\r\n const indexSpan = document.getElementById('currentIndex');\r\n const totalSpan = document.getElementById('totalVideos');\r\n\r\n \/\/ Build playlist\r\n function buildPlaylist() {\r\n totalSpan.textContent = videos.length;\r\n \r\n videos.forEach((video, index) => {\r\n const item = document.createElement('div');\r\n item.className = 'playlist-item';\r\n item.dataset.index = index;\r\n \r\n item.innerHTML = `\r\n <div class=\"item-thumbnail\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/${video.id}\/mqdefault.jpg\" alt=\"${video.title}\" loading=\"lazy\">\r\n <div class=\"item-number\">${index + 1}<\/div>\r\n <\/div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">${video.title}<\/div>\r\n <div class=\"item-duration\">${video.duration}<\/div>\r\n <\/div>\r\n <div class=\"playing-indicator\" style=\"display: none;\">\r\n <div class=\"playing-bars\">\r\n <div class=\"bar\"><\/div>\r\n <div class=\"bar\"><\/div>\r\n <div class=\"bar\"><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n item.addEventListener('click', () => startVideo(index));\r\n itemsContainer.appendChild(item);\r\n });\r\n \r\n \/\/ Setup first video\r\n setupFirstVideo();\r\n }\r\n\r\n \/\/ First video as preview\r\n function setupFirstVideo() {\r\n if (videos.length > 0) {\r\n \/\/ Load first video directly but paused\r\n const firstVideo = videos[0];\r\n const url = `https:\/\/www.youtube.com\/embed\/${firstVideo.id}?autoplay=0&enablejsapi=1&rel=0&modestbranding=1&controls=1&vq=hd720`;\r\n \r\n mainFrame.src = url;\r\n mainFrame.style.display = 'block';\r\n placeholder.style.display = 'none';\r\n \r\n \/\/ Set UI for first video\r\n updateUI(0);\r\n activeVideoIndex = 0;\r\n }\r\n }\r\n\r\n \/\/ Start video\r\n function startVideo(index) {\r\n if (index < 0 || index >= videos.length) return;\r\n \r\n const video = videos[index];\r\n const url = `https:\/\/www.youtube.com\/embed\/${video.id}?autoplay=1&enablejsapi=1&rel=0&modestbranding=1&controls=1&vq=hd720`;\r\n \r\n mainFrame.src = url;\r\n mainFrame.style.display = 'block';\r\n placeholder.style.display = 'none';\r\n \r\n updateUI(index);\r\n activeVideoIndex = index;\r\n }\r\n\r\n \/\/ Update UI\r\n function updateUI(activeIndex) {\r\n const items = document.querySelectorAll('.playlist-item');\r\n items.forEach((item, index) => {\r\n const indicator = item.querySelector('.playing-indicator');\r\n if (index === activeIndex) {\r\n \/\/ Active video\r\n item.classList.add('active');\r\n item.style.background = '#e3f2fd';\r\n item.style.borderColor = '#1EAAF7';\r\n indicator.style.display = 'flex';\r\n } else {\r\n \/\/ Non-active videos\r\n item.classList.remove('active');\r\n item.style.background = 'white';\r\n item.style.borderColor = 'transparent';\r\n indicator.style.display = 'none';\r\n }\r\n });\r\n \r\n indexSpan.textContent = activeIndex + 1;\r\n }\r\n\r\n \/\/ Initialize\r\n buildPlaylist();\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\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>","protected":false},"excerpt":{"rendered":"<p>Library Entdecken Sie eine Auswahl an Videos, die Ihnen Schritt f\u00fcr Schritt die Einrichtung und Anwendung von plemeo.ai erleichtern! YouTube Playlist Widget Playlist 1 von 23 Videos \u25b6 W\u00e4hlen Sie ein Video aus der Playlist Klicken Sie auf ein Video in der Liste, um es abzuspielen YouTube Playlist Widget – English Playlist 1 of 23 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1160","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/plemeo.ai\/en_gb\/wp-json\/wp\/v2\/pages\/1160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/plemeo.ai\/en_gb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/plemeo.ai\/en_gb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/plemeo.ai\/en_gb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plemeo.ai\/en_gb\/wp-json\/wp\/v2\/comments?post=1160"}],"version-history":[{"count":426,"href":"https:\/\/plemeo.ai\/en_gb\/wp-json\/wp\/v2\/pages\/1160\/revisions"}],"predecessor-version":[{"id":2959,"href":"https:\/\/plemeo.ai\/en_gb\/wp-json\/wp\/v2\/pages\/1160\/revisions\/2959"}],"wp:attachment":[{"href":"https:\/\/plemeo.ai\/en_gb\/wp-json\/wp\/v2\/media?parent=1160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}