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.
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)
Oh nice! 🔥 I have never used an
<img>
tag for this.. I just drag the image into the editor and it’s uploaded automatically.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.
Wow. I havn't tried that. I will try that now to see.