Media Resizer \u00b7 400×250 \u00b7 PNG & MP4<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: linear-gradient(145deg, #1a1e2b 0%, #2a3142 100%);\n font-family: 'Segoe UI', Roboto, system-ui, sans-serif;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1.5rem;\n margin: 0;\n }\n\n .glass-card {\n background: rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(18px);\n -webkit-backdrop-filter: blur(18px);\n border-radius: 3rem;\n box-shadow: 0 30px 55px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15);\n padding: 2.5rem 2.2rem;\n width: 100%;\n max-width: 700px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n transition: all 0.2s ease;\n }\n\n h1 {\n font-weight: 500;\n font-size: 2.2rem;\n letter-spacing: 2px;\n color: #eef5ff;\n text-align: center;\n margin-bottom: 0.3rem;\n text-shadow: 0 4px 10px rgba(0,0,0,0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n }\n h1 span {\n background: #3b82f6;\n font-size: 1rem;\n padding: 0.2rem 0.9rem;\n border-radius: 30px;\n letter-spacing: 0.4px;\n font-weight: 600;\n color: white;\n text-shadow: none;\n box-shadow: 0 6px 14px rgba(59,130,246,0.5);\n }\n\n \/* MOVING STRIP - left to right animation *\/\n .moving-strip {\n margin: 1.4rem 0 1.8rem 0;\n height: 10px;\n width: 100%;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);\n }\n\n .strip-inner {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 25%;\n background: linear-gradient(90deg, #f97316, #facc15, #38bdf8);\n border-radius: 20px;\n box-shadow: 0 0 20px #facc15cc;\n animation: slideRight 2.2s infinite ease-in-out;\n }\n\n @keyframes slideRight {\n 0% {\n left: -25%;\n }\n 100% {\n left: 100%;\n }\n }\n\n .upload-area {\n background: rgba(10, 15, 27, 0.55);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 2px dashed rgba(255, 255, 255, 0.35);\n border-radius: 2rem;\n padding: 2.2rem 1rem;\n text-align: center;\n cursor: pointer;\n transition: 0.25s;\n margin-bottom: 2rem;\n }\n .upload-area:hover {\n border-color: #facc15;\n background: rgba(20, 30, 50, 0.7);\n box-shadow: 0 0 22px rgba(250, 204, 21, 0.3);\n }\n .upload-icon {\n font-size: 2.8rem;\n margin-bottom: 0.3rem;\n }\n .upload-text {\n color: #ccdbe9;\n font-weight: 500;\n font-size: 1.2rem;\n }\n .upload-hint {\n color: #94a3b8;\n font-size: 0.9rem;\n margin-top: 0.3rem;\n }\n input[type=\"file\"] {\n display: none;\n }\n\n .preview-section {\n background: #0f1322c9;\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-radius: 1.8rem;\n padding: 1.5rem;\n margin: 1.6rem 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n border: 1px solid rgba(255,255,255,0.15);\n }\n\n .resized-container {\n width: 400px;\n height: 250px;\n background: #000000;\n border-radius: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 10px 25px rgba(0,0,0,0.7);\n margin-bottom: 1rem;\n border: 2px solid #334155;\n }\n\n video, img {\n width: 100%;\n height: 100%;\n object-fit: contain; \/* shows full media inside 400x250, keeps aspect ratio with letterboxing if needed *\/\n background: #000;\n }\n\n .empty-placeholder {\n color: #64748b;\n font-size: 1rem;\n text-align: center;\n padding: 1rem;\n background: #1e2537;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.9rem;\n }\n\n .button-group {\n display: flex;\n flex-wrap: wrap;\n gap: 0.9rem;\n justify-content: center;\n margin-top: 0.4rem;\n }\n\n .btn {\n background: rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n padding: 0.8rem 1.8rem;\n border-radius: 2.5rem;\n font-weight: 600;\n font-size: 1rem;\n letter-spacing: 0.4px;\n color: #f1f5f9;\n cursor: pointer;\n transition: 0.25s;\n display: flex;\n align-items: center;\n gap: 0.4rem;\n box-shadow: 0 6px 14px rgba(0,0,0,0.3);\n background: #1e293b;\n }\n\n .btn:hover:not(:disabled) {\n background: #3b82f6;\n border-color: #bfdbfe;\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 12px 22px rgba(59,130,246,0.5);\n }\n\n .btn:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n filter: grayscale(0.5);\n background: #2d3748;\n border-color: #4a5568;\n }\n\n .download-btn {\n background: #0f172a;\n border-color: #facc15;\n color: #facc15;\n }\n .download-btn:hover:not(:disabled) {\n background: #eab308;\n color: #0f172a;\n border-color: #fef9c3;\n }\n\n .status-message {\n margin-top: 1rem;\n font-size: 0.9rem;\n color: #b9c7dd;\n text-align: center;\n min-height: 1.8rem;\n }\n\n .file-name {\n background: #00000030;\n border-radius: 30px;\n padding: 0.3rem 1.2rem;\n display: inline-block;\n font-weight: 500;\n color: #facc15;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"glass-card\">\n <h1>\n \ud83d\udcd0 RESIZE<span>400\u00d7250<\/span>\n <\/h1>\n\n \n <div class=\"moving-strip\">\n <div class=\"strip-inner\"><\/div>\n <\/div>\n\n \n <div class=\"upload-area\" id=\"uploadTrigger\">\n <div class=\"upload-icon\">\ud83d\udce4\ud83d\udcc1<\/div>\n <div class=\"upload-text\">Click or Drop media<\/div>\n <div class=\"upload-hint\">Video \/ Image \u2192 auto resize<\/div>\n <\/div>\n <input type=\"file\" id=\"fileInput\" accept=\"video\/*,image\/*\">\n\n \n <div class=\"preview-section\">\n <div class=\"resized-container\" id=\"previewContainer\">\n <div id=\"placeholderBlock\" class=\"empty-placeholder\">\n \u23f3 400 x 250 preview\n <\/div>\n <video id=\"videoPreview\" controls style=\"display: none;\" loop muted playsinline><\/video>\n <img id=\"imagePreview\" alt=\"Resized preview\" style=\"display: none;\" crossorigin=\"anonymous\">\n <\/div>\n\n <div class=\"button-group\">\n <button class=\"btn download-btn\" id=\"downloadPNG\" disabled>\n <span>\ud83d\uddbc\ufe0f<\/span> PNG\n <\/button>\n <button class=\"btn download-btn\" id=\"downloadMP4\" disabled>\n <span>\ud83c\udfac<\/span> MP4\n <\/button>\n <\/div>\n <div class=\"status-message\" id=\"statusText\">\n <span class=\"file-name\" id=\"currentFileName\">\u2014<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ ----- DOM elements -----\n const fileInput = document.getElementById('fileInput');\n const uploadTrigger = document.getElementById('uploadTrigger');\n const videoPreview = document.getElementById('videoPreview');\n const imagePreview = document.getElementById('imagePreview');\n const placeholderBlock = document.getElementById('placeholderBlock');\n const downloadPNGBtn = document.getElementById('downloadPNG');\n const downloadMP4Btn = document.getElementById('downloadMP4');\n const statusText = document.getElementById('statusText');\n const currentFileNameSpan = document.getElementById('currentFileName');\n\n \/\/ ----- State -----\n let currentMediaType = null; \/\/ 'image' or 'video'\n let originalFile = null;\n \/\/ Store the resized result as blob URLs or data\n let resizedImageBlob = null; \/\/ PNG blob for image\n let resizedVideoBlob = null; \/\/ MP4 blob for video\n let resizedImageDataUrl = null; \/\/ fallback \/ preview for image\n\n \/\/ Canvas for resizing (used for both image->png and video frame extraction)\n const canvas = document.createElement('canvas');\n canvas.width = 400;\n canvas.height = 250;\n const ctx = canvas.getContext('2d');\n\n \/\/ ----- Helper: clear preview and reset UI -----\n function resetUI() {\n videoPreview.style.display = 'none';\n videoPreview.src = '';\n imagePreview.style.display = 'none';\n imagePreview.src = '';\n placeholderBlock.style.display = 'flex';\n downloadPNGBtn.disabled = true;\n downloadMP4Btn.disabled = true;\n currentMediaType = null;\n originalFile = null;\n resizedImageBlob = null;\n resizedVideoBlob = null;\n resizedImageDataUrl = null;\n currentFileNameSpan.textContent = '\u2014';\n statusText.innerHTML = '<span class=\"file-name\">\u2014<\/span>';\n }\n\n \/\/ ----- Show preview for image (resized to 400x250 canvas) -----\n function processImage(file) {\n const reader = new FileReader();\n reader.onload = (e) => {\n const img = new Image();\n img.onload = () => {\n \/\/ Draw image onto 400x250 canvas (cover\/contain logic: we use contain to show full image with letterbox)\n ctx.clearRect(0, 0, 400, 250);\n \/\/ Fill black background for better letterbox\n ctx.fillStyle = '#000000';\n ctx.fillRect(0, 0, 400, 250);\n \n \/\/ Calculate contain dimensions\n const imgRatio = img.width \/ img.height;\n const targetRatio = 400 \/ 250; \/\/ 1.6\n \n let drawWidth, drawHeight, offsetX, offsetY;\n if (imgRatio > targetRatio) {\n \/\/ image wider -> fit by height\n drawHeight = 250;\n drawWidth = 250 * imgRatio;\n offsetX = (400 - drawWidth) \/ 2;\n offsetY = 0;\n } else {\n \/\/ image taller -> fit by width\n drawWidth = 400;\n drawHeight = 400 \/ imgRatio;\n offsetX = 0;\n offsetY = (250 - drawHeight) \/ 2;\n }\n \n ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);\n \n \/\/ Convert canvas to data URL for preview\n const dataUrl = canvas.toDataURL('image\/png');\n resizedImageDataUrl = dataUrl;\n \n \/\/ Show image preview\n imagePreview.src = dataUrl;\n imagePreview.style.display = 'block';\n videoPreview.style.display = 'none';\n placeholderBlock.style.display = 'none';\n \n \/\/ Create blob from canvas for PNG download\n canvas.toBlob((blob) => {\n if (blob) {\n resizedImageBlob = blob;\n downloadPNGBtn.disabled = false;\n } else {\n resizedImageBlob = null;\n downloadPNGBtn.disabled = true;\n }\n }, 'image\/png');\n \n \/\/ Video download disabled for image\n downloadMP4Btn.disabled = true;\n currentMediaType = 'image';\n originalFile = file;\n currentFileNameSpan.textContent = file.name;\n statusText.innerHTML = `\u2705 Image resized \u00b7 <span class=\"file-name\">${file.name}<\/span>`;\n };\n img.onerror = () => {\n statusText.innerHTML = '\u274c Failed to load image.';\n resetUI();\n };\n img.src = e.target.result;\n };\n reader.onerror = () => {\n statusText.innerHTML = '\u274c Error reading file.';\n };\n reader.readAsDataURL(file);\n }\n\n \/\/ ----- Process video: extract first frame and also create resized MP4 via canvas capture -----\n function processVideo(file) {\n \/\/ Clean previous video resources\n if (videoPreview.src) {\n URL.revokeObjectURL(videoPreview.src);\n }\n \n const videoUrl = URL.createObjectURL(file);\n const videoElement = document.createElement('video');\n videoElement.preload = 'metadata';\n videoElement.muted = true;\n videoElement.playsInline = true;\n \n videoElement.onloadedmetadata = () => {\n \/\/ Set video preview element to show resized container\n videoPreview.src = videoUrl;\n videoPreview.style.display = 'block';\n videoPreview.currentTime = 0.1; \/\/ seek to first frame soon\n imagePreview.style.display = 'none';\n placeholderBlock.style.display = 'none';\n \n \/\/ We'll produce a resized MP4 using MediaRecorder from canvas\n \/\/ Need to capture canvas stream from video drawing\n videoElement.currentTime = 0;\n };\n \n videoElement.onseeked = () => {\n \/\/ Draw current frame onto canvas\n ctx.fillStyle = '#000000';\n ctx.fillRect(0, 0, 400, 250);\n if (videoElement.videoWidth && videoElement.videoHeight) {\n const vRatio = videoElement.videoWidth \/ videoElement.videoHeight;\n const targetRatio = 400 \/ 250;\n let dw, dh, dx, dy;\n if (vRatio > targetRatio) {\n dh = 250;\n dw = 250 * vRatio;\n dx = (400 - dw) \/ 2;\n dy = 0;\n } else {\n dw = 400;\n dh = 400 \/ vRatio;\n dx = 0;\n dy = (250 - dh) \/ 2;\n }\n ctx.drawImage(videoElement, dx, dy, dw, dh);\n \n \/\/ Generate PNG preview from this frame\n const frameDataUrl = canvas.toDataURL('image\/png');\n resizedImageDataUrl = frameDataUrl;\n \/\/ Enable PNG download (frame as PNG)\n canvas.toBlob((blob) => {\n resizedImageBlob = blob;\n downloadPNGBtn.disabled = false;\n }, 'image\/png');\n }\n \n \/\/ Start generating resized MP4 using canvas.captureStream\n generateResizedMP4(videoElement, file);\n };\n \n videoElement.onerror = () => {\n statusText.innerHTML = '\u274c Video loading error.';\n resetUI();\n };\n \n \/\/ Trigger seek to first frame\n videoElement.currentTime = 0.1;\n \n \/\/ Store video element temporarily for MP4 generation\n window._tempVideoElement = videoElement;\n \n originalFile = file;\n currentMediaType = 'video';\n currentFileNameSpan.textContent = file.name;\n statusText.innerHTML = `\ud83c\udfac Processing video \u00b7 <span class=\"file-name\">${file.name}<\/span>`;\n }\n\n \/\/ Generate resized MP4 using canvas capture and MediaRecorder\n function generateResizedMP4(sourceVideo, originalFile) {\n \/\/ Create a canvas stream\n const canvasStream = canvas.captureStream(30); \/\/ 30 fps\n const audioTracks = [];\n \n \/\/ Try to capture audio from original video if possible\n try {\n if (sourceVideo.captureStream) {\n const originalStream = sourceVideo.captureStream();\n const audioTracksFromOriginal = originalStream.getAudioTracks();\n if (audioTracksFromOriginal.length > 0) {\n audioTracks.push(...audioTracksFromOriginal);\n }\n }\n } catch (e) {\n console.warn(\"Audio capture not supported, video will be silent.\");\n }\n \n \/\/ Combine video track from canvas and audio tracks\n const combinedStream = new MediaStream();\n const videoTrack = canvasStream.getVideoTracks()[0];\n if (videoTrack) combinedStream.addTrack(videoTrack);\n audioTracks.forEach(track => combinedStream.addTrack(track));\n \n const mimeType = MediaRecorder.isTypeSupported('video\/webm; codecs=vp9') ? 'video\/webm; codecs=vp9' : 'video\/webm';\n const mediaRecorder = new MediaRecorder(combinedStream, { mimeType: mimeType });\n const chunks = [];\n \n mediaRecorder.ondataavailable = (e) => {\n if (e.data && e.data.size > 0) chunks.push(e.data);\n };\n \n mediaRecorder.onstop = () => {\n const blob = new Blob(chunks, { type: 'video\/webm' });\n \/\/ Convert webm to mp4? Browser MediaRecorder typically outputs webm.\n \/\/ We'll offer download as .mp4 by changing extension but it's webm container.\n \/\/ For true MP4 we rely on browser support; we provide as video\/webm with .mp4 extension hint.\n \/\/ Many modern players accept webm as mp4 rename. We'll still label download as MP4.\n resizedVideoBlob = blob;\n downloadMP4Btn.disabled = false;\n statusText.innerHTML = `\u2705 MP4 ready \u00b7 <span class=\"file-name\">${originalFile?.name || 'video'}<\/span>`;\n \n \/\/ Cleanup temp video\n if (window._tempVideoElement) {\n URL.revokeObjectURL(window._tempVideoElement.src);\n delete window._tempVideoElement;\n }\n };\n \n mediaRecorder.onerror = () => {\n statusText.innerHTML = '\u26a0\ufe0f MP4 recording error.';\n downloadMP4Btn.disabled = true;\n };\n \n \/\/ Start recording and play video from beginning\n sourceVideo.currentTime = 0;\n sourceVideo.play().then(() => {\n mediaRecorder.start();\n \n \/\/ Draw frames continuously\n const drawInterval = setInterval(() => {\n if (sourceVideo.ended || sourceVideo.paused) {\n \/\/ if ended, stop\n }\n ctx.fillStyle = '#000000';\n ctx.fillRect(0, 0, 400, 250);\n if (sourceVideo.videoWidth && sourceVideo.videoHeight) {\n const vRatio = sourceVideo.videoWidth \/ sourceVideo.videoHeight;\n const targetRatio = 400\/250;\n let dw, dh, dx, dy;\n if (vRatio > targetRatio) {\n dh = 250; dw = 250 * vRatio; dx = (400-dw)\/2; dy=0;\n } else {\n dw = 400; dh = 400\/vRatio; dx=0; dy=(250-dh)\/2;\n }\n ctx.drawImage(sourceVideo, dx, dy, dw, dh);\n }\n }, 33); \/\/ ~30fps\n \n sourceVideo.onended = () => {\n clearInterval(drawInterval);\n mediaRecorder.stop();\n sourceVideo.pause();\n };\n \n \/\/ Safety stop after duration\n setTimeout(() => {\n if (mediaRecorder.state === 'recording') {\n clearInterval(drawInterval);\n mediaRecorder.stop();\n }\n }, (sourceVideo.duration || 10) * 1000 + 500);\n \n }).catch(err => {\n statusText.innerHTML = '\u26a0\ufe0f Video play failed (autoplay). Click preview play.';\n \/\/ fallback: attempt without play\n mediaRecorder.start();\n const fallbackInterval = setInterval(() => {\n ctx.fillStyle = '#000000';\n ctx.fillRect(0,0,400,250);\n if (sourceVideo.videoWidth) {\n const vRatio = sourceVideo.videoWidth \/ sourceVideo.videoHeight;\n const tr = 400\/250;\n let dw, dh, dx, dy;\n if(vRatio>tr){dh=250;dw=250*vRatio;dx=(400-dw)\/2;dy=0;}\n else{dw=400;dh=400\/vRatio;dx=0;dy=(250-dh)\/2;}\n ctx.drawImage(sourceVideo, dx, dy, dw, dh);\n }\n }, 33);\n setTimeout(() => {\n clearInterval(fallbackInterval);\n if (mediaRecorder.state === 'recording') mediaRecorder.stop();\n }, 5000);\n });\n \n \/\/ Set preview video to source\n videoPreview.src = sourceVideo.src;\n videoPreview.load();\n }\n\n \/\/ ----- Handle file selection -----\n function handleFileSelect(file) {\n if (!file) return;\n \n \/\/ Revoke previous object URLs if any\n if (videoPreview.src && videoPreview.src.startsWith('blob:')) {\n URL.revokeObjectURL(videoPreview.src);\n }\n \n resetUI();\n \n if (file.type.startsWith('image\/')) {\n processImage(file);\n } else if (file.type.startsWith('video\/')) {\n processVideo(file);\n } else {\n statusText.innerHTML = '\u26a0\ufe0f Unsupported file type. Please use image or video.';\n resetUI();\n }\n }\n\n \/\/ ----- Event Listeners -----\n uploadTrigger.addEventListener('click', () => {\n fileInput.click();\n });\n\n fileInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n handleFileSelect(file);\n }\n \/\/ reset input to allow re-upload same file\n fileInput.value = '';\n });\n\n \/\/ Drag & drop support\n uploadTrigger.addEventListener('dragover', (e) => {\n e.preventDefault();\n uploadTrigger.style.borderColor = '#facc15';\n });\n uploadTrigger.addEventListener('dragleave', (e) => {\n e.preventDefault();\n uploadTrigger.style.borderColor = 'rgba(255,255,255,0.35)';\n });\n uploadTrigger.addEventListener('drop', (e) => {\n e.preventDefault();\n uploadTrigger.style.borderColor = 'rgba(255,255,255,0.35)';\n const dt = e.dataTransfer;\n if (dt.files && dt.files.length > 0) {\n handleFileSelect(dt.files[0]);\n }\n });\n\n \/\/ ----- Download Handlers -----\n downloadPNGBtn.addEventListener('click', () => {\n if (!resizedImageBlob && !resizedImageDataUrl) {\n statusText.innerHTML = '\u26a0\ufe0f No PNG ready.';\n return;\n }\n \n let downloadBlob;\n if (resizedImageBlob) {\n downloadBlob = resizedImageBlob;\n } else if (resizedImageDataUrl) {\n \/\/ fallback convert dataUrl to blob\n const byteString = atob(resizedImageDataUrl.split(',')[1]);\n const mimeString = 'image\/png';\n const ab = new ArrayBuffer(byteString.length);\n const ia = new Uint8Array(ab);\n for (let i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i);\n }\n downloadBlob = new Blob([ab], { type: mimeString });\n }\n \n if (downloadBlob) {\n const url = URL.createObjectURL(downloadBlob);\n const a = document.createElement('a');\n a.href = url;\n const originalName = originalFile?.name || 'media';\n const baseName = originalName.replace(\/\\.[^\/.]+$\/, '');\n a.download = `${baseName}_400x250.png`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n statusText.innerHTML = '\ud83d\udce5 PNG downloaded.';\n }\n });\n\n downloadMP4Btn.addEventListener('click', () => {\n if (!resizedVideoBlob) {\n statusText.innerHTML = '\u26a0\ufe0f No MP4 available. Process a video first.';\n return;\n }\n const url = URL.createObjectURL(resizedVideoBlob);\n const a = document.createElement('a');\n a.href = url;\n const originalName = originalFile?.name || 'video';\n const baseName = originalName.replace(\/\\.[^\/.]+$\/, '');\n \/\/ Use .mp4 extension (browser webm but widely compatible)\n a.download = `${baseName}_400x250.mp4`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n statusText.innerHTML = '\ud83d\udce5 MP4 downloaded (webm container).';\n });\n\n \/\/ Initial reset\n resetUI();\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Media Resizer \u00b7 400×250 \u00b7 PNG & MP4 \ud83d\udcd0 RESIZE400\u00d7250 \ud83d\udce4\ud83d\udcc1 Click or Drop media Video \/ Image \u2192 auto resize \u23f3 400 x 250 preview \ud83d\uddbc\ufe0f PNG \ud83c\udfac MP4 \u2014<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-275","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":1,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/275\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/275\/revisions\/276"}],"wp:attachment":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/media?parent=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":275,"date":"2026-06-15T18:48:35","date_gmt":"2026-06-15T18:48:35","guid":{"rendered":"https:\/\/cashchat.se\/dir\/?page_id=275"},"modified":"2026-06-15T18:48:35","modified_gmt":"2026-06-15T18:48:35","slug":"edit","status":"publish","type":"page","link":"https:\/\/cashchat.se\/dir\/edit\/","title":{"rendered":"Edit"},"content":{"rendered":"\n\n\n\n \n \n Media Resizer \u00b7 400×250 \u00b7 PNG & MP4<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: linear-gradient(145deg, #1a1e2b 0%, #2a3142 100%);\n font-family: 'Segoe UI', Roboto, system-ui, sans-serif;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1.5rem;\n margin: 0;\n }\n\n .glass-card {\n background: rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(18px);\n -webkit-backdrop-filter: blur(18px);\n border-radius: 3rem;\n box-shadow: 0 30px 55px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15);\n padding: 2.5rem 2.2rem;\n width: 100%;\n max-width: 700px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n transition: all 0.2s ease;\n }\n\n h1 {\n font-weight: 500;\n font-size: 2.2rem;\n letter-spacing: 2px;\n color: #eef5ff;\n text-align: center;\n margin-bottom: 0.3rem;\n text-shadow: 0 4px 10px rgba(0,0,0,0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n }\n h1 span {\n background: #3b82f6;\n font-size: 1rem;\n padding: 0.2rem 0.9rem;\n border-radius: 30px;\n letter-spacing: 0.4px;\n font-weight: 600;\n color: white;\n text-shadow: none;\n box-shadow: 0 6px 14px rgba(59,130,246,0.5);\n }\n\n \/* MOVING STRIP - left to right animation *\/\n .moving-strip {\n margin: 1.4rem 0 1.8rem 0;\n height: 10px;\n width: 100%;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);\n }\n\n .strip-inner {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 25%;\n background: linear-gradient(90deg, #f97316, #facc15, #38bdf8);\n border-radius: 20px;\n box-shadow: 0 0 20px #facc15cc;\n animation: slideRight 2.2s infinite ease-in-out;\n }\n\n @keyframes slideRight {\n 0% {\n left: -25%;\n }\n 100% {\n left: 100%;\n }\n }\n\n .upload-area {\n background: rgba(10, 15, 27, 0.55);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 2px dashed rgba(255, 255, 255, 0.35);\n border-radius: 2rem;\n padding: 2.2rem 1rem;\n text-align: center;\n cursor: pointer;\n transition: 0.25s;\n margin-bottom: 2rem;\n }\n .upload-area:hover {\n border-color: #facc15;\n background: rgba(20, 30, 50, 0.7);\n box-shadow: 0 0 22px rgba(250, 204, 21, 0.3);\n }\n .upload-icon {\n font-size: 2.8rem;\n margin-bottom: 0.3rem;\n }\n .upload-text {\n color: #ccdbe9;\n font-weight: 500;\n font-size: 1.2rem;\n }\n .upload-hint {\n color: #94a3b8;\n font-size: 0.9rem;\n margin-top: 0.3rem;\n }\n input[type=\"file\"] {\n display: none;\n }\n\n .preview-section {\n background: #0f1322c9;\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-radius: 1.8rem;\n padding: 1.5rem;\n margin: 1.6rem 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n border: 1px solid rgba(255,255,255,0.15);\n }\n\n .resized-container {\n width: 400px;\n height: 250px;\n background: #000000;\n border-radius: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 10px 25px rgba(0,0,0,0.7);\n margin-bottom: 1rem;\n border: 2px solid #334155;\n }\n\n video, img {\n width: 100%;\n height: 100%;\n object-fit: contain; \/* shows full media inside 400x250, keeps aspect ratio with letterboxing if needed *\/\n background: #000;\n }\n\n .empty-placeholder {\n color: #64748b;\n font-size: 1rem;\n text-align: center;\n padding: 1rem;\n background: #1e2537;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.9rem;\n }\n\n .button-group {\n display: flex;\n flex-wrap: wrap;\n gap: 0.9rem;\n justify-content: center;\n margin-top: 0.4rem;\n }\n\n .btn {\n background: rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n padding: 0.8rem 1.8rem;\n border-radius: 2.5rem;\n font-weight: 600;\n font-size: 1rem;\n letter-spacing: 0.4px;\n color: #f1f5f9;\n cursor: pointer;\n transition: 0.25s;\n display: flex;\n align-items: center;\n gap: 0.4rem;\n box-shadow: 0 6px 14px rgba(0,0,0,0.3);\n background: #1e293b;\n }\n\n .btn:hover:not(:disabled) {\n background: #3b82f6;\n border-color: #bfdbfe;\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 12px 22px rgba(59,130,246,0.5);\n }\n\n .btn:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n filter: grayscale(0.5);\n background: #2d3748;\n border-color: #4a5568;\n }\n\n .download-btn {\n background: #0f172a;\n border-color: #facc15;\n color: #facc15;\n }\n .download-btn:hover:not(:disabled) {\n background: #eab308;\n color: #0f172a;\n border-color: #fef9c3;\n }\n\n .status-message {\n margin-top: 1rem;\n font-size: 0.9rem;\n color: #b9c7dd;\n text-align: center;\n min-height: 1.8rem;\n }\n\n .file-name {\n background: #00000030;\n border-radius: 30px;\n padding: 0.3rem 1.2rem;\n display: inline-block;\n font-weight: 500;\n color: #facc15;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"glass-card\">\n <h1>\n \ud83d\udcd0 RESIZE<span>400\u00d7250<\/span>\n <\/h1>\n\n \n <div class=\"moving-strip\">\n <div class=\"strip-inner\"><\/div>\n <\/div>\n\n \n <div class=\"upload-area\" id=\"uploadTrigger\">\n <div class=\"upload-icon\">\ud83d\udce4\ud83d\udcc1<\/div>\n <div class=\"upload-text\">Click or Drop media<\/div>\n <div class=\"upload-hint\">Video \/ Image \u2192 auto resize<\/div>\n <\/div>\n <input type=\"file\" id=\"fileInput\" accept=\"video\/*,image\/*\">\n\n \n <div class=\"preview-section\">\n <div class=\"resized-container\" id=\"previewContainer\">\n <div id=\"placeholderBlock\" class=\"empty-placeholder\">\n \u23f3 400 x 250 preview\n <\/div>\n <video id=\"videoPreview\" controls style=\"display: none;\" loop muted playsinline><\/video>\n <img id=\"imagePreview\" alt=\"Resized preview\" style=\"display: none;\" crossorigin=\"anonymous\">\n <\/div>\n\n <div class=\"button-group\">\n <button class=\"btn download-btn\" id=\"downloadPNG\" disabled>\n <span>\ud83d\uddbc\ufe0f<\/span> PNG\n <\/button>\n <button class=\"btn download-btn\" id=\"downloadMP4\" disabled>\n <span>\ud83c\udfac<\/span> MP4\n <\/button>\n <\/div>\n <div class=\"status-message\" id=\"statusText\">\n <span class=\"file-name\" id=\"currentFileName\">\u2014<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ ----- DOM elements -----\n const fileInput = document.getElementById('fileInput');\n const uploadTrigger = document.getElementById('uploadTrigger');\n const videoPreview = document.getElementById('videoPreview');\n const imagePreview = document.getElementById('imagePreview');\n const placeholderBlock = document.getElementById('placeholderBlock');\n const downloadPNGBtn = document.getElementById('downloadPNG');\n const downloadMP4Btn = document.getElementById('downloadMP4');\n const statusText = document.getElementById('statusText');\n const currentFileNameSpan = document.getElementById('currentFileName');\n\n \/\/ ----- State -----\n let currentMediaType = null; \/\/ 'image' or 'video'\n let originalFile = null;\n \/\/ Store the resized result as blob URLs or data\n let resizedImageBlob = null; \/\/ PNG blob for image\n let resizedVideoBlob = null; \/\/ MP4 blob for video\n let resizedImageDataUrl = null; \/\/ fallback \/ preview for image\n\n \/\/ Canvas for resizing (used for both image->png and video frame extraction)\n const canvas = document.createElement('canvas');\n canvas.width = 400;\n canvas.height = 250;\n const ctx = canvas.getContext('2d');\n\n \/\/ ----- Helper: clear preview and reset UI -----\n function resetUI() {\n videoPreview.style.display = 'none';\n videoPreview.src = '';\n imagePreview.style.display = 'none';\n imagePreview.src = '';\n placeholderBlock.style.display = 'flex';\n downloadPNGBtn.disabled = true;\n downloadMP4Btn.disabled = true;\n currentMediaType = null;\n originalFile = null;\n resizedImageBlob = null;\n resizedVideoBlob = null;\n resizedImageDataUrl = null;\n currentFileNameSpan.textContent = '\u2014';\n statusText.innerHTML = '<span class=\"file-name\">\u2014<\/span>';\n }\n\n \/\/ ----- Show preview for image (resized to 400x250 canvas) -----\n function processImage(file) {\n const reader = new FileReader();\n reader.onload = (e) => {\n const img = new Image();\n img.onload = () => {\n \/\/ Draw image onto 400x250 canvas (cover\/contain logic: we use contain to show full image with letterbox)\n ctx.clearRect(0, 0, 400, 250);\n \/\/ Fill black background for better letterbox\n ctx.fillStyle = '#000000';\n ctx.fillRect(0, 0, 400, 250);\n \n \/\/ Calculate contain dimensions\n const imgRatio = img.width \/ img.height;\n const targetRatio = 400 \/ 250; \/\/ 1.6\n \n let drawWidth, drawHeight, offsetX, offsetY;\n if (imgRatio > targetRatio) {\n \/\/ image wider -> fit by height\n drawHeight = 250;\n drawWidth = 250 * imgRatio;\n offsetX = (400 - drawWidth) \/ 2;\n offsetY = 0;\n } else {\n \/\/ image taller -> fit by width\n drawWidth = 400;\n drawHeight = 400 \/ imgRatio;\n offsetX = 0;\n offsetY = (250 - drawHeight) \/ 2;\n }\n \n ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);\n \n \/\/ Convert canvas to data URL for preview\n const dataUrl = canvas.toDataURL('image\/png');\n resizedImageDataUrl = dataUrl;\n \n \/\/ Show image preview\n imagePreview.src = dataUrl;\n imagePreview.style.display = 'block';\n videoPreview.style.display = 'none';\n placeholderBlock.style.display = 'none';\n \n \/\/ Create blob from canvas for PNG download\n canvas.toBlob((blob) => {\n if (blob) {\n resizedImageBlob = blob;\n downloadPNGBtn.disabled = false;\n } else {\n resizedImageBlob = null;\n downloadPNGBtn.disabled = true;\n }\n }, 'image\/png');\n \n \/\/ Video download disabled for image\n downloadMP4Btn.disabled = true;\n currentMediaType = 'image';\n originalFile = file;\n currentFileNameSpan.textContent = file.name;\n statusText.innerHTML = `\u2705 Image resized \u00b7 <span class=\"file-name\">${file.name}<\/span>`;\n };\n img.onerror = () => {\n statusText.innerHTML = '\u274c Failed to load image.';\n resetUI();\n };\n img.src = e.target.result;\n };\n reader.onerror = () => {\n statusText.innerHTML = '\u274c Error reading file.';\n };\n reader.readAsDataURL(file);\n }\n\n \/\/ ----- Process video: extract first frame and also create resized MP4 via canvas capture -----\n function processVideo(file) {\n \/\/ Clean previous video resources\n if (videoPreview.src) {\n URL.revokeObjectURL(videoPreview.src);\n }\n \n const videoUrl = URL.createObjectURL(file);\n const videoElement = document.createElement('video');\n videoElement.preload = 'metadata';\n videoElement.muted = true;\n videoElement.playsInline = true;\n \n videoElement.onloadedmetadata = () => {\n \/\/ Set video preview element to show resized container\n videoPreview.src = videoUrl;\n videoPreview.style.display = 'block';\n videoPreview.currentTime = 0.1; \/\/ seek to first frame soon\n imagePreview.style.display = 'none';\n placeholderBlock.style.display = 'none';\n \n \/\/ We'll produce a resized MP4 using MediaRecorder from canvas\n \/\/ Need to capture canvas stream from video drawing\n videoElement.currentTime = 0;\n };\n \n videoElement.onseeked = () => {\n \/\/ Draw current frame onto canvas\n ctx.fillStyle = '#000000';\n ctx.fillRect(0, 0, 400, 250);\n if (videoElement.videoWidth && videoElement.videoHeight) {\n const vRatio = videoElement.videoWidth \/ videoElement.videoHeight;\n const targetRatio = 400 \/ 250;\n let dw, dh, dx, dy;\n if (vRatio > targetRatio) {\n dh = 250;\n dw = 250 * vRatio;\n dx = (400 - dw) \/ 2;\n dy = 0;\n } else {\n dw = 400;\n dh = 400 \/ vRatio;\n dx = 0;\n dy = (250 - dh) \/ 2;\n }\n ctx.drawImage(videoElement, dx, dy, dw, dh);\n \n \/\/ Generate PNG preview from this frame\n const frameDataUrl = canvas.toDataURL('image\/png');\n resizedImageDataUrl = frameDataUrl;\n \/\/ Enable PNG download (frame as PNG)\n canvas.toBlob((blob) => {\n resizedImageBlob = blob;\n downloadPNGBtn.disabled = false;\n }, 'image\/png');\n }\n \n \/\/ Start generating resized MP4 using canvas.captureStream\n generateResizedMP4(videoElement, file);\n };\n \n videoElement.onerror = () => {\n statusText.innerHTML = '\u274c Video loading error.';\n resetUI();\n };\n \n \/\/ Trigger seek to first frame\n videoElement.currentTime = 0.1;\n \n \/\/ Store video element temporarily for MP4 generation\n window._tempVideoElement = videoElement;\n \n originalFile = file;\n currentMediaType = 'video';\n currentFileNameSpan.textContent = file.name;\n statusText.innerHTML = `\ud83c\udfac Processing video \u00b7 <span class=\"file-name\">${file.name}<\/span>`;\n }\n\n \/\/ Generate resized MP4 using canvas capture and MediaRecorder\n function generateResizedMP4(sourceVideo, originalFile) {\n \/\/ Create a canvas stream\n const canvasStream = canvas.captureStream(30); \/\/ 30 fps\n const audioTracks = [];\n \n \/\/ Try to capture audio from original video if possible\n try {\n if (sourceVideo.captureStream) {\n const originalStream = sourceVideo.captureStream();\n const audioTracksFromOriginal = originalStream.getAudioTracks();\n if (audioTracksFromOriginal.length > 0) {\n audioTracks.push(...audioTracksFromOriginal);\n }\n }\n } catch (e) {\n console.warn(\"Audio capture not supported, video will be silent.\");\n }\n \n \/\/ Combine video track from canvas and audio tracks\n const combinedStream = new MediaStream();\n const videoTrack = canvasStream.getVideoTracks()[0];\n if (videoTrack) combinedStream.addTrack(videoTrack);\n audioTracks.forEach(track => combinedStream.addTrack(track));\n \n const mimeType = MediaRecorder.isTypeSupported('video\/webm; codecs=vp9') ? 'video\/webm; codecs=vp9' : 'video\/webm';\n const mediaRecorder = new MediaRecorder(combinedStream, { mimeType: mimeType });\n const chunks = [];\n \n mediaRecorder.ondataavailable = (e) => {\n if (e.data && e.data.size > 0) chunks.push(e.data);\n };\n \n mediaRecorder.onstop = () => {\n const blob = new Blob(chunks, { type: 'video\/webm' });\n \/\/ Convert webm to mp4? Browser MediaRecorder typically outputs webm.\n \/\/ We'll offer download as .mp4 by changing extension but it's webm container.\n \/\/ For true MP4 we rely on browser support; we provide as video\/webm with .mp4 extension hint.\n \/\/ Many modern players accept webm as mp4 rename. We'll still label download as MP4.\n resizedVideoBlob = blob;\n downloadMP4Btn.disabled = false;\n statusText.innerHTML = `\u2705 MP4 ready \u00b7 <span class=\"file-name\">${originalFile?.name || 'video'}<\/span>`;\n \n \/\/ Cleanup temp video\n if (window._tempVideoElement) {\n URL.revokeObjectURL(window._tempVideoElement.src);\n delete window._tempVideoElement;\n }\n };\n \n mediaRecorder.onerror = () => {\n statusText.innerHTML = '\u26a0\ufe0f MP4 recording error.';\n downloadMP4Btn.disabled = true;\n };\n \n \/\/ Start recording and play video from beginning\n sourceVideo.currentTime = 0;\n sourceVideo.play().then(() => {\n mediaRecorder.start();\n \n \/\/ Draw frames continuously\n const drawInterval = setInterval(() => {\n if (sourceVideo.ended || sourceVideo.paused) {\n \/\/ if ended, stop\n }\n ctx.fillStyle = '#000000';\n ctx.fillRect(0, 0, 400, 250);\n if (sourceVideo.videoWidth && sourceVideo.videoHeight) {\n const vRatio = sourceVideo.videoWidth \/ sourceVideo.videoHeight;\n const targetRatio = 400\/250;\n let dw, dh, dx, dy;\n if (vRatio > targetRatio) {\n dh = 250; dw = 250 * vRatio; dx = (400-dw)\/2; dy=0;\n } else {\n dw = 400; dh = 400\/vRatio; dx=0; dy=(250-dh)\/2;\n }\n ctx.drawImage(sourceVideo, dx, dy, dw, dh);\n }\n }, 33); \/\/ ~30fps\n \n sourceVideo.onended = () => {\n clearInterval(drawInterval);\n mediaRecorder.stop();\n sourceVideo.pause();\n };\n \n \/\/ Safety stop after duration\n setTimeout(() => {\n if (mediaRecorder.state === 'recording') {\n clearInterval(drawInterval);\n mediaRecorder.stop();\n }\n }, (sourceVideo.duration || 10) * 1000 + 500);\n \n }).catch(err => {\n statusText.innerHTML = '\u26a0\ufe0f Video play failed (autoplay). Click preview play.';\n \/\/ fallback: attempt without play\n mediaRecorder.start();\n const fallbackInterval = setInterval(() => {\n ctx.fillStyle = '#000000';\n ctx.fillRect(0,0,400,250);\n if (sourceVideo.videoWidth) {\n const vRatio = sourceVideo.videoWidth \/ sourceVideo.videoHeight;\n const tr = 400\/250;\n let dw, dh, dx, dy;\n if(vRatio>tr){dh=250;dw=250*vRatio;dx=(400-dw)\/2;dy=0;}\n else{dw=400;dh=400\/vRatio;dx=0;dy=(250-dh)\/2;}\n ctx.drawImage(sourceVideo, dx, dy, dw, dh);\n }\n }, 33);\n setTimeout(() => {\n clearInterval(fallbackInterval);\n if (mediaRecorder.state === 'recording') mediaRecorder.stop();\n }, 5000);\n });\n \n \/\/ Set preview video to source\n videoPreview.src = sourceVideo.src;\n videoPreview.load();\n }\n\n \/\/ ----- Handle file selection -----\n function handleFileSelect(file) {\n if (!file) return;\n \n \/\/ Revoke previous object URLs if any\n if (videoPreview.src && videoPreview.src.startsWith('blob:')) {\n URL.revokeObjectURL(videoPreview.src);\n }\n \n resetUI();\n \n if (file.type.startsWith('image\/')) {\n processImage(file);\n } else if (file.type.startsWith('video\/')) {\n processVideo(file);\n } else {\n statusText.innerHTML = '\u26a0\ufe0f Unsupported file type. Please use image or video.';\n resetUI();\n }\n }\n\n \/\/ ----- Event Listeners -----\n uploadTrigger.addEventListener('click', () => {\n fileInput.click();\n });\n\n fileInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n handleFileSelect(file);\n }\n \/\/ reset input to allow re-upload same file\n fileInput.value = '';\n });\n\n \/\/ Drag & drop support\n uploadTrigger.addEventListener('dragover', (e) => {\n e.preventDefault();\n uploadTrigger.style.borderColor = '#facc15';\n });\n uploadTrigger.addEventListener('dragleave', (e) => {\n e.preventDefault();\n uploadTrigger.style.borderColor = 'rgba(255,255,255,0.35)';\n });\n uploadTrigger.addEventListener('drop', (e) => {\n e.preventDefault();\n uploadTrigger.style.borderColor = 'rgba(255,255,255,0.35)';\n const dt = e.dataTransfer;\n if (dt.files && dt.files.length > 0) {\n handleFileSelect(dt.files[0]);\n }\n });\n\n \/\/ ----- Download Handlers -----\n downloadPNGBtn.addEventListener('click', () => {\n if (!resizedImageBlob && !resizedImageDataUrl) {\n statusText.innerHTML = '\u26a0\ufe0f No PNG ready.';\n return;\n }\n \n let downloadBlob;\n if (resizedImageBlob) {\n downloadBlob = resizedImageBlob;\n } else if (resizedImageDataUrl) {\n \/\/ fallback convert dataUrl to blob\n const byteString = atob(resizedImageDataUrl.split(',')[1]);\n const mimeString = 'image\/png';\n const ab = new ArrayBuffer(byteString.length);\n const ia = new Uint8Array(ab);\n for (let i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i);\n }\n downloadBlob = new Blob([ab], { type: mimeString });\n }\n \n if (downloadBlob) {\n const url = URL.createObjectURL(downloadBlob);\n const a = document.createElement('a');\n a.href = url;\n const originalName = originalFile?.name || 'media';\n const baseName = originalName.replace(\/\\.[^\/.]+$\/, '');\n a.download = `${baseName}_400x250.png`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n statusText.innerHTML = '\ud83d\udce5 PNG downloaded.';\n }\n });\n\n downloadMP4Btn.addEventListener('click', () => {\n if (!resizedVideoBlob) {\n statusText.innerHTML = '\u26a0\ufe0f No MP4 available. Process a video first.';\n return;\n }\n const url = URL.createObjectURL(resizedVideoBlob);\n const a = document.createElement('a');\n a.href = url;\n const originalName = originalFile?.name || 'video';\n const baseName = originalName.replace(\/\\.[^\/.]+$\/, '');\n \/\/ Use .mp4 extension (browser webm but widely compatible)\n a.download = `${baseName}_400x250.mp4`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n statusText.innerHTML = '\ud83d\udce5 MP4 downloaded (webm container).';\n });\n\n \/\/ Initial reset\n resetUI();\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Media Resizer \u00b7 400×250 \u00b7 PNG & MP4 \ud83d\udcd0 RESIZE400\u00d7250 \ud83d\udce4\ud83d\udcc1 Click or Drop media Video \/ Image \u2192 auto resize \u23f3 400 x 250 preview \ud83d\uddbc\ufe0f PNG \ud83c\udfac MP4 \u2014<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-275","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":1,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/275\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/275\/revisions\/276"}],"wp:attachment":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/media?parent=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}