This content originally appeared on DEV Community and was authored by Grëg Häris
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!! ❤️
This content originally appeared on DEV Community and was authored by Grëg Häris
Grëg Häris | Sciencx (2024-10-26T08:03:44+00:00) Embed Short Videos in your Dev Posts (Simple Guide). Retrieved from https://www.scien.cx/2024/10/26/embed-short-videos-in-your-dev-posts-simple-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.