DEV Community

Cover image for Embed Short Videos in your Dev Posts (Simple Guide)
Grëg Häris
Grëg Häris

Posted on

Embed Short Videos in your Dev Posts (Simple Guide)

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.

upload gif to giphy

Step 4: Share and Copy the Link

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

click on share

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.

Do you have any simpler methods? I'd love to hear about them. Please share in the comments.

From Grëg Häris with ❤️.

Happy coding!! ❤️

Top comments (3)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Oh nice! 🔥 I have never used an <img> tag for this.. I just drag the image into the editor and it’s uploaded automatically.

Collapse
 
gregharis profile image
Grëg Häris

Just tried that, didn't work for GIF but worked perfect for normal images.

But I have definitely learned a new shortcut to upload Images to my dev posts.

Thanks for sharing.

Collapse
 
gregharis profile image
Grëg Häris

Wow. I havn't tried that. I will try that now to see.