function processImage(originalImg, videoUrl = "https://www.w3schools.com/html/mov_bbb.mp4", controls = "true", autoplay = "false", loop = "false", muted = "false") {
// Create a wrapper container for nice displaying
const wrapper = document.createElement("div");
wrapper.style.display = "flex";
wrapper.style.justifyContent = "center";
wrapper.style.alignItems = "center";
wrapper.style.width = "100%";
wrapper.style.backgroundColor = "#000";
wrapper.style.borderRadius = "8px";
wrapper.style.overflow = "hidden";
// Create the video element
const video = document.createElement("video");
video.src = videoUrl;
// Utilize the provided original image as the video thumbnail/poster
video.poster = originalImg.src;
video.controls = controls === "true";
video.autoplay = autoplay === "true";
video.loop = loop === "true";
video.muted = muted === "true";
// Ensure the video scales responsibly inside its container
video.style.maxWidth = "100%";
video.style.maxHeight = "80vh";
video.style.objectFit = "contain";
// Most browsers require videos to be muted to allow autoplay
if (video.autoplay) {
video.muted = true;
}
wrapper.appendChild(video);
return wrapper;
}This tool provides a way to integrate and display video content with a custom image thumbnail. It allows users to set a specific image as a poster to be shown before the video plays, and offers customizable playback settings such as autoplay, looping, muting, and playback controls. This is useful for web developers or content creators looking to create engaging media players for websites, online portfolios, or digital presentations.