Text Partial Video App
About this app
An interactive web application that lets users add text overlays to video clips for dynamic presentations.
Text Partial Video App Text Partial Video App Your browser does not support the video tag. Add Text to Video Add Text
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>Text Partial Video App</title>
<meta name="description" content="An interactive web application that lets users add text overlays to video clips for dynamic presentations.">
<meta name="keywords" content="Video, Text Overlay, Presentation, Interactive 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 {
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
const video = document.getElementById('video');
const textInput = document.getElementById('text-input');
const submitButton = document.getElementById('submit-text');
const textContainer = document.getElementById('text-container');
submitButton.addEventListener('click', function() {
const textValue = textInput.value;
if(textValue) {
const textElement = document.createElement('div');
textElement.className = 'overlay-text';
textElement.innerText = textValue;
textElement.style.left = `${Math.random() * 80}vw`;
textElement.style.top = `${Math.random() * 80}vh`;
textContainer.appendChild(textElement);
textInput.value = '';
}
});
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(135deg, #74ebd5, #acb6e5);
color: #333;
font-family: 'Arial', sans-serif;
overflow: hidden;
}
#main-container {
text-align: center;
padding: 20px;
}
video {
width: 80%;
border: 5px solid #fff;
border-radius: 10px;
}
.overlay-text {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #333;
border-radius: 5px;
padding: 5px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
animation: fadeIn 1s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="mb-4">Text Partial Video App</h1>
<video id="video" controls>
<source src="your-video-url.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="text-container" style="position: relative; height: 400px;">
<h2>Add Text to Video</h2>
<input type="text" id="text-input" class="form-control mb-2" placeholder="Enter your text">
<button id="submit-text" class="btn btn-primary">Add Text</button>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!