Streamable Clone

Streamable Clone

body { font-family: Arial, sans-serif; margin: 20px; background: #f9f9f9; } h1 { text-align: center; } .upload-section { display: flex; justify-content: center; margin-bottom: 20px; } #videoInput { margin-right: 10px; } #videoList { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .video-container { background: #fff; padding: 10px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 300px; } video { width: 100%; border-radius: 4px; } const videoInput = document.getElementById('videoInput'); const uploadBtn = document.getElementById('uploadBtn'); const videoList = document.getElementById('videoList'); const videos = []; uploadBtn.addEventListener('click', () => { const file = videoInput.files[0]; if (!file) { alert('Please select a video file.'); return; } const url = URL.createObjectURL(file); videos.push({ url, name: file.name }); renderVideos(); videoInput.value = ''; }); function renderVideos() { videoList.innerHTML = ''; videos.forEach(video => { const container = document.createElement('div'); container.className = 'video-container'; const videoEl = document.createElement('video'); videoEl.src = video.url; videoEl.controls = true; const title = document.createElement('p'); title.textContent = video.name; container.appendChild(videoEl); container.appendChild(title); videoList.appendChild(container); }); }