Carrossel de V\u00eddeos do YouTube<\/title>\n <style>\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f5f5f7;\n color: #1d1d1f;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n .carousel-container {\n max-width: 1200px;\n width: 100%;\n position: relative;\n overflow: hidden;\n padding: 0 60px;\n background-color: transparent;\n border-radius: 12px;\n }\n .carousel {\n display: flex;\n transition: transform 0.5s ease;\n }\n .carousel-item {\n flex: 0 0 33.333%;\n padding: 0 10px;\n box-sizing: border-box;\n }\n .video-container {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%; \/* 16:9 aspect ratio *\/\n height: 0;\n overflow: hidden;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n }\n .video-thumbnail {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 12px;\n }\n .play-button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 60px;\n height: 60px;\n background-color: rgba(0, 0, 0, 0.7);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .play-button::after {\n content: '';\n width: 0;\n height: 0;\n border-top: 15px solid transparent;\n border-bottom: 15px solid transparent;\n border-left: 20px solid #fff;\n margin-left: 5px;\n }\n .arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\n height: 40px;\n background-color: #1d1d1f;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: background-color 0.3s ease;\n z-index: 10;\n }\n .arrow:hover {\n background-color: #2d2d2f;\n }\n .arrow-left {\n left: 10px;\n }\n .arrow-right {\n right: 10px;\n }\n .arrow::before {\n content: '';\n width: 10px;\n height: 10px;\n border-top: 2px solid #ffffff;\n border-right: 2px solid #ffffff;\n display: inline-block;\n }\n .arrow-left::before {\n transform: rotate(-135deg);\n }\n .arrow-right::before {\n transform: rotate(45deg);\n }\n .popup-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 1000;\n justify-content: center;\n align-items: center;\n }\n .popup-content {\n position: relative;\n width: 80%;\n max-width: 900px;\n background-color: transparent;\n border-radius: 12px;\n padding: 20px;\n }\n .close-popup {\n position: absolute;\n top: -40px;\n right: -40px;\n font-size: 36px;\n cursor: pointer;\n color: #ffffff;\n background-color: rgba(0, 0, 0, 0.5);\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n }\n #popup-video-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"carousel-container\">\n <div class=\"carousel\" id=\"video-carousel\">\n \n <\/div>\n <div class=\"arrow arrow-left\" onclick=\"moveCarousel(-1)\"><\/div>\n <div class=\"arrow arrow-right\" onclick=\"moveCarousel(1)\"><\/div>\n <\/div>\n\n <div class=\"popup-overlay\" id=\"popup-overlay\">\n <div class=\"popup-content\">\n <span class=\"close-popup\" onclick=\"closePopup()\">×<\/span>\n <div id=\"popup-video-container\"><\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/www.youtube.com\/iframe_api\"><\/script>\n <script>\n const videoIds = ['b_vTw8mIciU', 'K1wV9Q7K0oc', 'MVxDFDLu6Bo', 'jlJV57sGyhE', 'Q7tYuYg6Ias'];\n const carousel = document.getElementById('video-carousel');\n let currentIndex = 0;\n let popupPlayer;\n\n function createVideoItem(videoId) {\n const item = document.createElement('div');\n item.className = 'carousel-item';\n item.innerHTML = `\n <div class=\"video-container\" onclick=\"openPopup('${videoId}')\">\n <img src=\"https:\/\/img.youtube.com\/vi\/${videoId}\/0.jpg\" alt=\"Video thumbnail\" class=\"video-thumbnail\">\n <div class=\"play-button\"><\/div>\n <\/div>\n `;\n return item;\n }\n\n function initCarousel() {\n videoIds.forEach(videoId => {\n carousel.appendChild(createVideoItem(videoId));\n });\n updateCarousel();\n }\n\n function moveCarousel(direction) {\n currentIndex += direction;\n if (currentIndex < 0) currentIndex = 0;\n if (currentIndex > videoIds.length - 3) currentIndex = videoIds.length - 3;\n updateCarousel();\n }\n\n function updateCarousel() {\n const offset = -currentIndex * 33.333;\n carousel.style.transform = `translateX(${offset}%)`;\n updateArrowVisibility();\n }\n\n function updateArrowVisibility() {\n const leftArrow = document.querySelector('.arrow-left');\n const rightArrow = document.querySelector('.arrow-right');\n leftArrow.style.display = currentIndex === 0 ? 'none' : 'flex';\n rightArrow.style.display = currentIndex >= videoIds.length - 3 ? 'none' : 'flex';\n }\n\n function openPopup(videoId) {\n const popupOverlay = document.getElementById('popup-overlay');\n const popupVideoContainer = document.getElementById('popup-video-container');\n popupOverlay.style.display = 'flex';\n popupVideoContainer.innerHTML = `<div id=\"popup-player\"><\/div>`;\n\n popupPlayer = new YT.Player('popup-player', {\n height: '360',\n width: '640',\n videoId: videoId,\n playerVars: {\n 'autoplay': 1,\n 'controls': 1,\n 'rel': 0,\n 'showinfo': 0\n },\n events: {\n 'onReady': onPlayerReady\n }\n });\n\n popupOverlay.addEventListener('click', function(event) {\n if (event.target === popupOverlay) {\n closePopup();\n }\n });\n }\n\n function onPlayerReady(event) {\n event.target.playVideo();\n }\n\n function closePopup() {\n const popupOverlay = document.getElementById('popup-overlay');\n popupOverlay.style.display = 'none';\n if (popupPlayer) {\n popupPlayer.destroy();\n }\n }\n\n function addVideo(videoId) {\n videoIds.push(videoId);\n carousel.appendChild(createVideoItem(videoId));\n updateCarousel();\n }\n\n \/\/ Initialize the carousel\n initCarousel();\n\n \/\/ Example of how to add a new video:\n \/\/ addVideo('JGwWNGJdvx8');\n <\/script>\n<\/body>\n<\/html>"}

{"content":"\n\n\n \n \n Carrossel de V\u00eddeos do YouTube<\/title>\n <style>\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f5f5f7;\n color: #1d1d1f;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n .carousel-container {\n max-width: 1200px;\n width: 100%;\n position: relative;\n overflow: hidden;\n padding: 0 60px;\n background-color: transparent;\n border-radius: 12px;\n }\n .carousel {\n display: flex;\n transition: transform 0.5s ease;\n }\n .carousel-item {\n flex: 0 0 33.333%;\n padding: 0 10px;\n box-sizing: border-box;\n }\n .video-container {\n position: relative;\n width: 100%;\n padding-bottom: 56.25%; \/* 16:9 aspect ratio *\/\n height: 0;\n overflow: hidden;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n }\n .video-thumbnail {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 12px;\n }\n .play-button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 60px;\n height: 60px;\n background-color: rgba(0, 0, 0, 0.7);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .play-button::after {\n content: '';\n width: 0;\n height: 0;\n border-top: 15px solid transparent;\n border-bottom: 15px solid transparent;\n border-left: 20px solid #fff;\n margin-left: 5px;\n }\n .arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\n height: 40px;\n background-color: #1d1d1f;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: background-color 0.3s ease;\n z-index: 10;\n }\n .arrow:hover {\n background-color: #2d2d2f;\n }\n .arrow-left {\n left: 10px;\n }\n .arrow-right {\n right: 10px;\n }\n .arrow::before {\n content: '';\n width: 10px;\n height: 10px;\n border-top: 2px solid #ffffff;\n border-right: 2px solid #ffffff;\n display: inline-block;\n }\n .arrow-left::before {\n transform: rotate(-135deg);\n }\n .arrow-right::before {\n transform: rotate(45deg);\n }\n .popup-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 1000;\n justify-content: center;\n align-items: center;\n }\n .popup-content {\n position: relative;\n width: 80%;\n max-width: 900px;\n background-color: transparent;\n border-radius: 12px;\n padding: 20px;\n }\n .close-popup {\n position: absolute;\n top: -40px;\n right: -40px;\n font-size: 36px;\n cursor: pointer;\n color: #ffffff;\n background-color: rgba(0, 0, 0, 0.5);\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n }\n #popup-video-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"carousel-container\">\n <div class=\"carousel\" id=\"video-carousel\">\n \n <\/div>\n <div class=\"arrow arrow-left\" onclick=\"moveCarousel(-1)\"><\/div>\n <div class=\"arrow arrow-right\" onclick=\"moveCarousel(1)\"><\/div>\n <\/div>\n\n <div class=\"popup-overlay\" id=\"popup-overlay\">\n <div class=\"popup-content\">\n <span class=\"close-popup\" onclick=\"closePopup()\">×<\/span>\n <div id=\"popup-video-container\"><\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/www.youtube.com\/iframe_api\"><\/script>\n <script>\n const videoIds = ['b_vTw8mIciU', 'K1wV9Q7K0oc', 'MVxDFDLu6Bo', 'jlJV57sGyhE', 'Q7tYuYg6Ias'];\n const carousel = document.getElementById('video-carousel');\n let currentIndex = 0;\n let popupPlayer;\n\n function createVideoItem(videoId) {\n const item = document.createElement('div');\n item.className = 'carousel-item';\n item.innerHTML = `\n <div class=\"video-container\" onclick=\"openPopup('${videoId}')\">\n <img src=\"https:\/\/img.youtube.com\/vi\/${videoId}\/0.jpg\" alt=\"Video thumbnail\" class=\"video-thumbnail\">\n <div class=\"play-button\"><\/div>\n <\/div>\n `;\n return item;\n }\n\n function initCarousel() {\n videoIds.forEach(videoId => {\n carousel.appendChild(createVideoItem(videoId));\n });\n updateCarousel();\n }\n\n function moveCarousel(direction) {\n currentIndex += direction;\n if (currentIndex < 0) currentIndex = 0;\n if (currentIndex > videoIds.length - 3) currentIndex = videoIds.length - 3;\n updateCarousel();\n }\n\n function updateCarousel() {\n const offset = -currentIndex * 33.333;\n carousel.style.transform = `translateX(${offset}%)`;\n updateArrowVisibility();\n }\n\n function updateArrowVisibility() {\n const leftArrow = document.querySelector('.arrow-left');\n const rightArrow = document.querySelector('.arrow-right');\n leftArrow.style.display = currentIndex === 0 ? 'none' : 'flex';\n rightArrow.style.display = currentIndex >= videoIds.length - 3 ? 'none' : 'flex';\n }\n\n function openPopup(videoId) {\n const popupOverlay = document.getElementById('popup-overlay');\n const popupVideoContainer = document.getElementById('popup-video-container');\n popupOverlay.style.display = 'flex';\n popupVideoContainer.innerHTML = `<div id=\"popup-player\"><\/div>`;\n\n popupPlayer = new YT.Player('popup-player', {\n height: '360',\n width: '640',\n videoId: videoId,\n playerVars: {\n 'autoplay': 1,\n 'controls': 1,\n 'rel': 0,\n 'showinfo': 0\n },\n events: {\n 'onReady': onPlayerReady\n }\n });\n\n popupOverlay.addEventListener('click', function(event) {\n if (event.target === popupOverlay) {\n closePopup();\n }\n });\n }\n\n function onPlayerReady(event) {\n event.target.playVideo();\n }\n\n function closePopup() {\n const popupOverlay = document.getElementById('popup-overlay');\n popupOverlay.style.display = 'none';\n if (popupPlayer) {\n popupPlayer.destroy();\n }\n }\n\n function addVideo(videoId) {\n videoIds.push(videoId);\n carousel.appendChild(createVideoItem(videoId));\n updateCarousel();\n }\n\n \/\/ Initialize the carousel\n initCarousel();\n\n \/\/ Example of how to add a new video:\n \/\/ addVideo('JGwWNGJdvx8');\n <\/script>\n<\/body>\n<\/html>"}