How to create videos programmatically using TailwindCSS and Editframe API (Updated)
Published on June 21, 2023
Last updated on September 25, 2024
7 min read
Creating videos programmatically has become easier than ever with tools like TailwindCSS and Editframe API. By combining these two technologies, you can create stunning videos with minimal coding.
What is TailwindCSS?
TailwindCSS is a utility-first CSS framework that provides a set of pre-designed classes that can be used to style your website. It is a popular choice for web developers as it allows them to quickly and easily create responsive designs without having to write a lot of custom CSS.
What is Editframe API?
Editframe API is a video creation platform that allows developers to create and edit videos programmatically. It provides a set of APIs that can be used to customize and manipulate video content, such as adding text, images, and videos.
To create videos programmatically using TailwindCSS and Editframe API, follow these steps:
- Create a HTML template using TailwindCSS classes to style your video content.
- Use Editframe API to create a video project and add your HTML template as the source code.
- Customize your video by adding text, images, and animations using Editframe API.
- Render your video using Editframe API.
image-1.jpg
image-2.jpg
image-3.jpg
Let's get started
Required tools:
- Node.js installed on your machine
- No need to have FFmpeg installed on your machine
- Editframe API Token (you can create an account from this link(opens in a new tab))
- No need to have an .srt file for the subtitles (you can add subtitles directly to the video using the Editframe elements)
Let’s get started:
- Setup a new Node.js project using the Editframe CLI:
npx @editframe/create@beta- Install the required dependencies:
cd add-tailwind-css-video && npm install- Add assets to the project:
Add image-1.jpg, image-2.jpg, and image-3.jpg to the src/assets folder.
- Update the
index.htmlfile with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="module" src="./src/index.js"></script>
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<ef-timegroup
mode="sequence"
class="w-[1920px] h-[1080px"
>
<ef-timegroup
mode="fixed"
duration="5s"
>
<div class="h-full flex flex-col justify-center bg-gradient-to-r from-slate-50 to-slate-300 ">
<div class="sm:px-8 mt-9">
<div class="mx-auto max-w-7xl lg:px-8">
<div class="relative px-4 sm:px-8 lg:px-12">
<div class="mx-auto max-w-2xl lg:max-w-5xl">
<div class="max-w-4xl">
<h1
class="text-9xl font-bold tracking-tight text-dark sm:text-5xl"
style="animation: fade-in 1s linear;"
>
Software Engineer
</h1>
<p
class="my-14 text-4xl text-zinc-600 dark:text-zinc-400"
style="animation: fade-in 2s linear;"
>
I am a video made using TailwindCSS and Editframe API. By combining these two technologies, it was possible to create a stunning video with minimal coding.
</p>
<div class="mt-6 flex gap-6" style="animation: fade-in 2s linear;">
<a
class="group -m-1 p-1"
aria-label="Follow on Twitter"
href="https://twitter.com"
><svg
viewBox="0 0 24 24"
aria-hidden="true"
class="h-12 w-12 fill-zinc-500"
>
<path
d="M20.055 7.983c.011.174.011.347.011.523 0 5.338-3.92 11.494-11.09 11.494v-.003A10.755 10.755 0 0 1 3 18.186c.308.038.618.057.928.058a7.655 7.655 0 0 0 4.841-1.733c-1.668-.032-3.13-1.16-3.642-2.805a3.753 3.753 0 0 0 1.76-.07C5.07 13.256 3.76 11.6 3.76 9.676v-.05a3.77 3.77 0 0 0 1.77.505C3.816 8.945 3.288 6.583 4.322 4.737c1.98 2.524 4.9 4.058 8.034 4.22a4.137 4.137 0 0 1 1.128-3.86A3.807 3.807 0 0 1 19 5.274a7.657 7.657 0 0 0 2.475-.98c-.29.934-.9 1.729-1.713 2.233A7.54 7.54 0 0 0 22 5.89a8.084 8.084 0 0 1-1.945 2.093Z"
></path></svg></a
><a
class="group -m-1 p-1"
aria-label="Follow on Instagram"
href="https://instagram.com"
><svg
viewBox="0 0 24 24"
aria-hidden="true"
class="h-12 w-12 fill-zinc-500"
>
<path
d="M12 3c-2.444 0-2.75.01-3.71.054-.959.044-1.613.196-2.185.418A4.412 4.412 0 0 0 4.51 4.511c-.5.5-.809 1.002-1.039 1.594-.222.572-.374 1.226-.418 2.184C3.01 9.25 3 9.556 3 12s.01 2.75.054 3.71c.044.959.196 1.613.418 2.185.23.592.538 1.094 1.039 1.595.5.5 1.002.808 1.594 1.038.572.222 1.226.374 2.184.418C9.25 20.99 9.556 21 12 21s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.419a4.412 4.412 0 0 0 1.595-1.038c.5-.5.808-1.002 1.038-1.594.222-.572.374-1.226.418-2.184.044-.96.054-1.267.054-3.711s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.419-2.185A4.412 4.412 0 0 0 19.49 4.51c-.5-.5-1.002-.809-1.594-1.039-.572-.222-1.226-.374-2.184-.418C14.75 3.01 14.444 3 12 3Zm0 1.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.421.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.421-.358.72-.673 1.036a2.79 2.79 0 0 1-1.035.673c-.317.123-.794.27-1.671.31-.95.043-1.234.052-3.637.052s-2.688-.009-3.637-.052c-.877-.04-1.354-.187-1.67-.31a2.789 2.789 0 0 1-1.036-.673 2.79 2.79 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.95-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.421.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052Z"
></path>
<path
d="M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-7.622a4.622 4.622 0 1 0 0 9.244 4.622 4.622 0 0 0 0-9.244Zm5.884-.182a1.08 1.08 0 1 1-2.16 0 1.08 1.08 0 0 1 2.16 0Z"
></path></svg></a
><a
class="group -m-1 p-1"
aria-label="Follow on GitHub"
href="https://github.com"
><svg
viewBox="0 0 24 24"
aria-hidden="true"
class="h-12 w-12 fill-zinc-500"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"
></path></svg></a
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-16 mx-auto">
<div
class="flex justify-between gap-5 overflow-hidden"
>
<div
class="relative w-96 flex-none overflow-hidden rounded-xl"
>
<ef-image
alt=""
src="/assets/image-1.jpg"
style="
animation:
4s slide-up,
2s fade-in;
object-fit: cover;
"
/>
</div>
<div
class="relative w-96 flex-none overflow-hidden rounded-xl"
>
<ef-image
src="/assets/image-2.jpg"
style="
animation:
4s slide-up,
2s fade-in;
object-fit: cover;
"
/>
</div>
<div
class="relative w-96 flex-none overflow-hidden rounded-xl"
>
<ef-image
alt=""
src="/assets/image-3.jpg"
style="
animation:
4s slide-up,
2s fade-in;
object-fit: cover;
"
/>
</div>
</div>
</div>
</div>
</ef-timegroup>
</ef-timegroup>
</body>
</html>Let’s walk through what the code in this file is doing.
- In these lines, we import the
index.jsfile and thestyles.cssfile which contains the styles for the video and@editframe/elements:
<head>
<meta charset="UTF-8" />
<script type="module" src="./src/index.js"></script>
<link rel="stylesheet" href="./src/styles.css" />
</head>- In this line, we create a new video composition using the
ef-timegroupelement.
<ef-timegroup
mode="sequence"
class="w-[1920px] h-[1080px"
>
{ /* Add elements here */ }
</ef-timegroup>- In these lines, we set a new time group with a mode of
fixedwith a duration of 5s:
<ef-timegroup mode="fixed" duration="5s">
{ /* Add elements here */ }
</ef-timegroup>- In these lines, we added the video composition layout using TailwindCSS classes:
animation: fade-in 1s linear;is used to add a fade-in animation to the text content.
More about CSS animations can be found here(opens in a new tab).
<div class="h-full flex flex-col justify-center bg-gradient-to-r from-slate-50 to-slate-300 ">
<div class="sm:px-8 mt-9">
<div class="mx-auto max-w-7xl lg:px-8">
<div class="relative px-4 sm:px-8 lg:px-12">
<div class="mx-auto max-w-2xl lg:max-w-5xl">
<div class="max-w-4xl">
<h1
class="text-9xl font-bold tracking-tight text-dark sm:text-5xl"
style="animation: fade-in 1s linear;"
>
Software Engineer
</h1>
<p
class="my-14 text-4xl text-zinc-600 dark:text-zinc-400"
style="animation: fade-in 2s linear;"
>
I am a video made using TailwindCSS and Editframe API. By combining these two technologies, it was possible to create a stunning video with minimal coding.
</p>
{ /* Add social media icons here */ }
</div>
</div>
</div>
</div>
</div>
<div class="mt-16 mx-auto">
<div
class="flex justify-between gap-5 overflow-hidden"
>
{ /* Add images here */ }
</div>
</div>
</div>- In these lines, we import the image element with custom styles and CSS animations:
<div
class="relative w-96 flex-none overflow-hidden rounded-xl"
>
<ef-image
alt=""
src="/assets/image-1.jpg"
style="
animation:
4s slide-up,
2s fade-in;
object-fit: cover;
"
/>
</div>ef-imageelements are used to add images to the video. We set thesrcattribute to the path of the image file and add custom styles to the image using thestyleattribute:
- Preview the project:
npx vite .- Update the
.envfile with your Editframe API token:
EF_TOKEN="YOUR_API_TOKEN"- Render the video:
npx @editframe/cli render .Conclusion
Creating videos programmatically using TailwindCSS and Editframe API is a powerful way to create stunning video content with minimal coding. By following the steps outlined above, you can quickly and easily create custom video content that can be used for marketing, social media, and more.