{"id":36475,"date":"2024-12-20T07:00:00","date_gmt":"2024-12-20T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36475"},"modified":"2024-12-20T14:38:51","modified_gmt":"2024-12-20T22:38:51","slug":"youtube-shorts-creator-highlighted-subtitles-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/youtube-shorts-creator-highlighted-subtitles-next-js","title":{"rendered":"Build a YouTube Shorts Creator With Highlighted Subtitles in Next.js"},"content":{"rendered":"\n

YouTube Shorts are a powerful way to reach a wider audience with short, engaging videos. However, many creators face a common challenge: transforming widescreen videos into the vertical format required for YouTube Shorts without losing the key parts of the frame.<\/p>\n\n\n\n

This blog post explains how to automatically transform wide videos into YouTube <\/a>Shorts<\/a> using Cloudinary\u2019s smart cropping <\/a>feature<\/a> and how to add auto-generated, highlighted subtitles with Google Speech-to-Text to make your content more engaging and accessible.<\/p>\n\n\n\n

Here\u2019s a demo preview of what you\u2019ll be building:<\/p>\n\n\n\n <\/video>\n <\/cld-video-player>\n\n\n

Before getting into the setup, you can check out the full code on GitHub<\/a>.<\/p>\n\n\n\n

Set Up Cloudinary and Next.js<\/h2>\n\n\n\n

To get started, create a new Next.js project by running the following command:<\/p>\n\n\n

npx<\/span> create-next-app<\/span>@14<\/span> youtube-shorts-creator\n\ncd youtube-shorts-creator<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
<code<\/span>><\/span>npm install cloudinary<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
After signing in, go to your Cloudinary dashboard and copy the following details: Cloud Name<\/strong>, API Key<\/strong>, and API Secret<\/strong>.<\/p>\n\n\n\n
\"\"
Cloudinary API keys from its dashboard<\/figcaption><\/figure>\n\n\n\n
Now, in your Next.js project, create a .env.local<\/code> file at the root and add your Cloudinary credentials like this:<\/p>\n\n\n
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name\n\nNEXT_PUBLIC_CLOUDINARY_API_KEY=your_api_key\n\nCLOUDINARY_API_SECRET=your_api_secret<\/code><\/span><\/pre>\n\n\n
Replace your_cloud_name<\/code>, your_api_key<\/code>, and your_api_secret<\/code> with your actual Cloudinary credentials from the dashboard.<\/p>\n\n\n\n
How to Upload a Video to Cloudinary<\/h2>\n\n\n\n
With the Cloudinary SDK installed and credentials set up, let\u2019s implement the logic to upload videos from the frontend and process them through Cloudinary. <\/p>\n\n\n\n
You\u2019ll start by creating a form to allow users to upload their videos, then handle these uploads using server actions.<\/p>\n\n\n\n
Step 1: Create the Upload Form<\/strong><\/h3>\n\n\n\n
Create a file upload form in your page.tsx. This form will allow users to select a video from their local device and submit it for upload to Cloudinary.<\/p>\n\n\n\n
Here’s a basic form setup. You can paste this into your page.tsx<\/code> file:<\/p>\n\n\n
'use client'<\/span>;\n\nimport<\/span> { useState } from<\/span> 'react'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n\n\u00a0 \u00a0 const<\/span>[loading, setLoading]= useState(false<\/span>);\n\n\u00a0 \u00a0 const<\/span> handleSubmit = async<\/span> (event: React.FormEvent<HTMLFormElement>)=>{\n\n\u00a0 \u00a0 \u00a0 \u00a0 event.preventDefault();\n\n\u00a0 \u00a0 \u00a0 \u00a0 setLoading(true<\/span>);\n\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Get the file from the form<\/span>\n\nconst<\/span> formData =new<\/span> FormData(event.currentTarget);\n\n\u00a0 \u00a0 \u00a0 \u00a0 try<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Upload the video to Cloudinary<\/span>\n\n} catch<\/span> (error){\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console<\/span>.error('Upload failed:'<\/span>, error);\n\n} finally<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 setLoading(false<\/span>);\n\n}\n\n};\n\n\u00a0 \u00a0 return<\/span> (\n\n\u00a0 \u00a0 \u00a0 \u00a0 <div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h1<\/span>><\/span>Upload a Video<\/h1<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <form<\/span> onSubmit<\/span>={handleSubmit}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"video\"<\/span> accept<\/span>=\"video\/*\"<\/span> required<\/span> \/><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button<\/span> type<\/span>=\"submit\"<\/span> disabled<\/span>={loading}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {loading ? 'Uploading...' : 'Upload Video'}\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/form<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\n\u00a0 \u00a0 );\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code above, the form allows users to upload a video. When the form is submitted:<\/p>\n\n\n\n
You’ll need a Cloudinary account to access your credentials, which allow you to interact with the Cloudinary SDK. If you don\u2019t have an account yet, sign up at Cloudinary<\/a>.<\/p>\n\n\n\n
For this blog post, you\u2019ll use Next.js 14 and server actions<\/a> to handle video uploads (Next.js 13 can also be used as it supports Sever Actions). Once your project is set up, install the Cloudinary SDK with the command below:<\/p>\n\n\n