animated video

How to Add an Animated Video to WordPress

Posted on by Prakash Tiwari

Adding an animated video to your WordPress website can make it more engaging and interactive. Videos grab attention, keep visitors on your site longer, and increase user engagement. Adding animations, product demos, or explainer videos to your site is an excellent idea if you want to showcase animations, product demos, or explainer videos.

Many users think adding videos is difficult, but it’s not. In this guide, we’ll walk you through step-by-step instructions on how to add animated videos to WordPress. 

Methods to Add Animated Videos to WordPress

There are multiple ways to add animated videos to WordPress. We’ll cover all the popular methods, and you can choose the best option.

1. Upload an Animated Video Directly to WordPress

If you have the video file (like MP4 or WebM) on your computer, you can upload it directly to WordPress.

Steps to Upload a Video

  1. Log in to your WordPress dashboard.
  2. Go to Media > Add New.
  3. Click Select Files and upload your video.
  4. After uploading, copy the video URL.
  5. Open the post or page where you want to add the video.
  6. Click the + (plus) icon and add a Video block.
  7. Select Media Library and choose the video you uploaded.

That’s it! The video will now play directly on your page.

WordPress supports MP4, WebM, and OGV video formats. For best results, use MP4, as it works on all devices.

2. Embed an Animated Video from YouTube or Vimeo

If your animated video is on YouTube or Vimeo, you can embed it instead of uploading it. This method saves space on your web hosting and improves page speed.

Steps to Embed a Video from YouTube or Vimeo

  1. Copy the URL of the video from YouTube or Vimeo.
  2. Open the post or page where you want to add the video.
  3. Click the + (plus) icon and choose the YouTube or Embed blocks.
  4. Paste the video URL in the field.
  5. Click Embed.

WordPress will automatically fetch the video and display it on your page. This method is faster and avoids large video files on your server.

Embedding YouTube or Vimeo videos reduces your site’s load time and improves page speed.

3. Add an Animated Video Using Elementor

Using Elementor Page Builder, you can add animated videos with more customization. Elementor lets you control autoplay, loop, and player appearance.

Steps to Add an Animated Video Using Elementor

  1. Open your page in Elementor Editor.
  2. Drag and drop the Video widget onto the page.
  3. In the left-side settings, choose the source:
    • YouTube: Paste the URL.
    • Vimeo: Paste the URL.
    • Self-hosted: Upload your video file.
  4. Customize settings like autoplay, mute, or loop.
  5. Click Update to save changes.

Elementor gives you complete control over the video’s appearance. You can hide the play button, set a start time, or add video overlays.

Elementor’s video widget allows you to customize every video detail so your design looks perfect.

4. Add Lottie Animations (Lightweight Animated Videos)

If you want high-quality animations without large file sizes, use Lottie animations. Lottie files are small, fast, and load smoothly.

Steps to Add Lottie Animations

  1. Install the Lottie Player plugin:
    • Go to Plugins > Add New.
    • Search for Lottie Player and install it.
  2. Add the Lottie animation:
    • Upload your Lottie JSON file to WordPress.
    • Copy the animation URL.
  3. Embed the Lottie animation:
    • Open the page or post where you want to display it.
    • Add a Custom HTML block.
    • Paste this code:

<lottie-player src=”your-animation-url.json” background=”transparent” speed=”1″ loop autoplay></lottie-player>

  1. Replace your-animation-url.json with the URL of your Lottie animation.

Pro Tip: Use Lottie files for small, high-quality animations with fast load times.

5. Use GIFs as Animated Videos

If you have a short animation, you can convert it into a GIF. GIFs are more petite and play automatically without requiring users to press play.

Steps to Add a GIF to WordPress

  1. Go to Media > Add New and upload the GIF file.
  2. Copy the GIF URL.
  3. Open the page or post where you want to add the GIF.
  4. Click the + (plus) icon and add an Image block.
  5. Paste the URL of the GIF.

GIFs will automatically play and loop. This is great for simple animations, but avoid large GIF files as they can slow down your website.

Compress large GIFs using TinyPNG or EZGIF to improve load times.

6. Use a WordPress Video Plugin

Use a video plugin if you want extra features, like speed controls, subtitles, or captions. Here are some popular options:

  • FV Player: Add custom controls and playback options.
  • VideoPress: Store and embed videos directly from WordPress.
  • Advanced Video Embed Plugin: Add speed controls and customization.

Steps to Use a Video Plugin

  1. Go to Plugins > Add New and install one of the video plugins.
  2. Activate the plugin.
  3. Follow the plugin instructions to upload, embed, or customize the video.

Plugins give you more control over how the video plays, appears and interacts with your site.

Conclusion

Adding animated videos to WordPress is one of the best ways to grab user attention and increase engagement. You can upload them directly, embed them from YouTube or Vimeo, or use advanced options like Elementor or Lottie animations.

If you want fast, simple methods, embed videos from YouTube or use the Elementor Video widget. If you want lightweight, high-quality animations, Lottie files are the best option. GIFs are ideal for short, looping animations.

By following this guide, you can easily add stunning animated videos to your WordPress site. No coding is required! So, choose your method and bring your website to life with animations.