Embed Short Videos in your Dev Posts (Simple Guide)

#writing #tutorial #devto #productivity

Have you ever tried to embed a video from your computer or cloud storage into a Dev post and hit a roadblock?

After spending hours experimenting with different methods while writing this post, I finally found a simple hack that works and I decided to share it with you all.

Here's a simple, five-step process to embed short videos in your Dev post:

Trim the video to 30 Seconds or Less.
Convert the video to GIF
Upload the GIF to Giphy.com
Click on share, and copy the link
Embed the GIF in your post using the <img> tag.

Allow me to walk you through the process. This will work for any video format on your local computer or cloud storage.

Let's say you have a video illustrating the project you are writing about, for example this:

Step 1: Trim the Video to 30 Seconds or Less

Videos must be 30 seconds or less. Use a video editing tool to trim or speed up your video if needed.

Step 2: Convert the Video to GIF

Use a free online converter like FreeConvert or CloudConvert to convert your video to GIF format. Download the GIF.

Step 3: Upload the GIF to Giphy

Head over to Giphy.com, create an account (if you don't have one), and log in. Click 'Upload' at the top right to upload your GIF.

Step 4: Share and Copy the Link

Once your GIF is uploaded, click 'Share' and copy the link provided.

Step 5: Embed the GIF in Your Post

Insert the GIF by pasting the copied link into your Dev post using the <img> tag: <img width="100%" style="width:100% src="your_gif_link"> (Replace "your_gif_link" with your actual link). For example:

<img width="100%" style="width:100%" src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExOW9lZDc4ZGhkdnA1eW50cTU5NzQwcDk0OGN1ZjA4NnVlbmdjNWRyeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/W3wi8d9p5TqP8GHELC/giphy.gif">

And there you have it! You've successfully embedded a short video in your Dev post.