YouTube Video Sharing App
About this app
A vibrant YouTube video sharing app that allows users to upload, share and easily manage their videos, including takedown features.
YouTube Video Sharing App YouTube Video Sharing App Video Title Video URL Upload Video Uploaded Videos
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>YouTube Video Sharing App</title>
<meta name="description" content="A vibrant YouTube video sharing app that allows users to upload, share and easily manage their videos, including takedown features.">
<meta name="keywords" content="YouTube, video sharing, upload, takedown features, responsive app">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
let videos = [];
document.addEventListener("DOMContentLoaded", function() {
const uploadForm = document.getElementById('uploadForm');
const videoList = document.getElementById('videoList');
uploadForm.addEventListener('submit', function(event) {
event.preventDefault();
const videoURL = document.getElementById('videoURL').value;
const videoTitle = document.getElementById('videoTitle').value;
if (videoURL && videoTitle) {
const video = {
id: videos.length,
title: videoTitle,
url: videoURL
};
videos.push(video);
displayVideos();
uploadForm.reset();
}
});
function displayVideos() {
videoList.innerHTML = '';
videos.forEach(video => {
const videoItem = document.createElement('div');
videoItem.className = 'video-item';
videoItem.classList.add('shadow', 'p-3', 'mb-3', 'bg-light');
videoItem.innerHTML = `
<h5>${video.title}</h5>
<iframe width="100%" height="315" src="${video.url}" frameborder="0" allowfullscreen></iframe>
<button class="btn btn-danger mt-2" onclick="removeVideo(${video.id})">Remove Video</button>
`;
videoList.appendChild(videoItem);
});
}
window.removeVideo = function(id) {
videos = videos.filter(video => video.id !== id);
displayVideos();
}
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: #343a40;
}
#main-container {
margin-top: 20px;
padding: 20px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.video-item h5 {
color: #007bff;
}
.btn-danger {
background-color: #ff4d4d;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center">YouTube Video Sharing App</h1>
<form id="uploadForm" class="mb-4">
<div class="mb-3">
<label for="videoTitle" class="form-label">Video Title</label>
<input type="text" id="videoTitle" class="form-control" required>
</div>
<div class="mb-3">
<label for="videoURL" class="form-label">Video URL</label>
<input type="url" id="videoURL" class="form-control" placeholder="https://www.youtube.com/watch?v=..." required>
</div>
<button type="submit" class="btn btn-success">Upload Video</button>
</form>
<h3>Uploaded Videos</h3>
<div id="videoList"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!