1 Million Times Meme Video Generator
About this app
Create hilarious million times meme videos by putting in your favorite text and images. Make shareable content for social media now!
1 Million Times Meme Video Generator Create Your Meme Video! Generate Meme Video
Related apps
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>1 Million Times Meme Video Generator</title>
<meta name="description" content="Create hilarious million times meme videos by putting in your favorite text and images. Make shareable content for social media now!">
<meta name="keywords" content="meme generator, video generator, funny memes, social media, create videos, emojis, shareable content">
<!-- 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.
document.addEventListener("DOMContentLoaded", function() {
const generateButton = document.getElementById("generate-button");
const videoContainer = document.getElementById("video-container");
const memeTextInput = document.getElementById("meme-text");
generateButton.addEventListener("click", function() {
const memeText = memeTextInput.value;
if (memeText.trim() === "") {
alert("Please enter some text for the meme.");
return;
}
videoContainer.innerHTML = `<div class="text-center" style="position: relative; overflow: hidden; height: 500px; background: linear-gradient(to bottom right, #f0c27b, #4b1248);">
<h1 id="meme-output" class="display-1" style="color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">${memeText}</h1>
<video id="meme-video" controls autoplay loop style="display: none;">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>`;
const animationTime = 5000; // 5 seconds
setTimeout(() => {
const video = document.getElementById("meme-video");
video.style.display = "block";
}, animationTime);
});
});
} catch (error) {
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #FFEE99;
}
#main-container {
text-align: center;
margin-top: 50px;
}
#meme-text {
width: 80%;
margin: 20px auto;
}
#generate-button {
background: linear-gradient(45deg, #ff416c, #ff4b2b);
color: white;
border: none;
}
#generate-button:hover {
background: linear-gradient(45deg, #ff4b2b, #ff416c);
transition: 0.3s;
}
h1 {
animation: fadeIn 1.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Create Your Meme Video!</h1>
<input type="text" id="meme-text" class="form-control" placeholder="Enter your meme text here..." required>
<button id="generate-button" class="btn btn-lg">Generate Meme Video</button>
<div id="video-container" class="mt-4"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!