Using a Video Object rather than an Animated GIF

A video object designed to autoplay without sound is essentially intended to function like an animated GIF but with better performance and smaller file sizes. Modern browsers support this functionality using the <video> HTML element, which can be configured to autoplay, loop, and remain muted by default.

Note: if you are interested in playing a pure animation then a Lottie File created in Adobe After Effects is ideal.

Benefits of WebM vs Animated GIF #

1. Animated GIFs are a very old web technology with limited color palettes and large sizes.
2. WebM will maintain quality.
3. WebM can play seamlessly in a <video> object without video controls like an Animated GIF.
4. WebM will not slow your website load times down.
5. Full color palette – avoid GIF format’s limitation of 256 colors or fewer.

How To Set Up The Video #

1. Clip your video, 4 seconds to 6 seconds is ideal.
2. Ensure the loop is smooth (the example above has a slight jitter).
3. Export to mp4 format.
4. Convert to a WebM format.
   • Why? In the example above, the mp4 video is 4.6Mb, the converted WebM is 1.2Mb.
5. Upload to the WordPress Media Manager.
6. Gutenberg: use the Video block.
   • Disable player controls.
   • Enable mute.
   • Enable looping.
7. Classic WordPress Editor or WPBakery: craft the code using the tutorial below, insert as HTML or use a plugin such as
   • 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.
8. You can surround your video block within other structures (rows, columns, etc) for format and design purposes.

How It Works #

To mimic an animated GIF with a video:

• The video starts playing automatically when the page loads (autoplay).
• It loops continuously (loop).
• It is muted by default (muted), as most browsers require muted videos for autoplay.
• The playsinline attribute ensures the video plays within the webpage rather than opening in fullscreen on mobile devices.

HTML Example #

Here’s a sample code snippet that achieves this:

<video autoplay muted loop playsinline style="width: 100%; height: auto;">
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Key Attributes #

• autoplay: Starts the video automatically.
• muted: Ensures the video is silent (required for autoplay in most browsers).
• loop: Repeats the video indefinitely.
• playsinline: Prevents fullscreen playback on mobile devices.

Advantages Over GIFs #

1. Smaller File Sizes: Videos (e.g., MP4 or WebM) are typically much smaller than GIFs of the same resolution and duration.
2. Better Quality: Videos support higher resolutions and frame rates than GIFs.
3. Browser Optimization: Videos are optimized for playback across devices and browsers, whereas large GIFs can cause performance issues.

Implementation in WordPress #

If you’re using WordPress, you can embed this code directly into your page or post:

1. Add a Custom HTML Block in the WordPress editor.
2. Paste the above <video> code snippet and replace your-video.mp4 with your video URL (hosted on your site or a CDN).

Alternatively, use plugins like Advanced Responsive Video Embedder (ARVE) or Easy Video Player to simplify embedding and customization.

This approach provides a seamless experience similar to an animated GIF while being more efficient and visually appealing.

To embed a video on your WordPress website that plays automatically, loops, and hides all player controls (mimicking the behavior of an animated GIF), follow these steps:

---

1. Use the HTML <video> Element for Self-Hosted Videos #

If you’re hosting the video yourself (e.g., in MP4 format), you can use the following code:

<video autoplay muted loop playsinline style="width: 100%; height: auto;" controlslist="nodownload" disablepictureinpicture>
  <source src="https://example.com/path-to-your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Explanation: #

• autoplay: Starts playing the video automatically.
• muted: Ensures the video is muted (required for autoplay in most modern browsers).
• loop: Restarts the video when it ends.
• playsinline: Prevents full-screen playback on mobile devices.
• controlslist="nodownload": Removes download options.
• disablepictureinpicture: Disables Picture-in-Picture mode.
• No controls attribute ensures no player controls are displayed.

Steps to Add This Code in WordPress: #

1. Open the page or post where you want to embed the video.
2. Add a Custom HTML Block in the WordPress Block Editor (Gutenberg).
3. Paste the above code into the block and replace https://example.com/path-to-your-video.mp4 with your video’s URL from your Media Library.

---

2. Using WordPress Shortcode for Self-Hosted Videos #

WordPress provides a built-in

Steps: #

1. Upload your video to the WordPress Media Library.
2. Copy its URL and replace it in the src parameter above.
3. Paste this shortcode into your post or page.

---

3. For Divi Theme Users #

If you’re using the Divi theme, you can achieve this without plugins by following these steps:

1. Go to Divi Visual Builder and add a Video Module.
2. Upload or select your video from the Media Library.
3. In Advanced Settings, add a custom CSS class like dm-autoplay.
4. Add this jQuery script to Divi Theme Options > Integration > Add code to <body>:

jQuery(document).ready(function($) {
  var $videoBoxes = $('.dm-autoplay .et_pb_video_box');
  if ($videoBoxes.length !== 0) {
    $videoBoxes.find('video')
      .prop('muted', true)
      .prop('loop', true)
      .prop('playsInline', true)
      .removeAttr('controls');
    $videoBoxes.each(function() {
      this.querySelector('video').play();
    });
  }
});

This will autoplay, loop, mute, and hide controls for videos on pages using this CSS class.

---

4. Embedding YouTube Videos Without Controls #

If you’re embedding YouTube videos, use an iframe with custom parameters:

<iframe 
  src="https://www.youtube.com/embed/YOUR_VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=YOUR_VIDEO_ID&controls=0&modestbranding=1&rel=0"
  width="560" 
  height="315" 
  frameborder="0" 
  allow="autoplay; encrypted-media; picture-in-picture" 
  allowfullscreen>
</iframe>

Key Parameters: #

• autoplay=1: Autoplays the video.
• mute=1: Mutes audio (required for autoplay).
• loop=1&playlist=YOUR_VIDEO_ID: Loops the video (You must include playlist with the same video ID for looping).
• controls=0: Hides player controls.
• modestbranding=1: Minimizes YouTube branding.

---

Important Notes #

• Ensure that videos are muted for autoplay due to browser restrictions.
• Test on different devices and browsers as autoplay behavior may vary, especially on mobile browsers like Safari.

By following these steps, you can seamlessly embed a video on your WordPress site that plays automatically without visible controls, offering an experience similar to an animated GIF.

Citations:
[1] https://victorduse.com/blog/3-ways-to-autoplay-video-in-divi-without-plugins/
[2] https://www.cincopa.com/blog/how-to-embed-youtube-videos-without-showing-controls/
[3] https://divicake.com/blog/autoplaying-videos-in-divi/
[4] https://infiniteuploads.com/blog/ultimate-guide-to-autoplaying-videos-in-wordpress/
[5] https://www.youtube.com/watch?v=q9luhiQdXLA
[6] https://wordpress.org/support/topic/how-to-autoplay-and-loop-video-in-block-editor/
[7] https://www.youtube.com/watch?v=EDkABFzGTGg
[8] https://wordpress.org/support/topic/how-to-totally-remove-controls-of-vedios/
[9] https://www.reddit.com/r/Wordpress/comments/99ehm5/how_do_i_get_video_to_autoplay_with_no_controls/
[10] https://stackoverflow.com/questions/39921040/wordpress-disable-and-hide-all-controls-on-video/39921232
[11] https://www.youtube.com/watch?v=pzV9-lk6GTM
[12] https://infiniteuploads.com/blog/ultimate-guide-to-autoplaying-videos-in-wordpress/
[13] https://forum.freecodecamp.org/t/how-can-i-strip-media-player-of-all-controls-and-autoplay/499206
[14] https://www.youtube.com/watch?v=q9luhiQdXLA
[15] https://victorduse.com/blog/autoplay-youtube-videos-in-wordpress/
[16] https://victorduse.com/blog/3-ways-to-autoplay-video-in-divi-without-plugins/
[17] https://www.reddit.com/r/Wordpress/comments/99ehm5/how_do_i_get_video_to_autoplay_with_no_controls/
[18] https://en-ca.wordpress.org/plugins/videojs-html5-player/
[19] https://stackoverflow.com/questions/39921040/wordpress-disable-and-hide-all-controls-on-video/39921232
[20] https://stackoverflow.com/questions/42329008/disable-controls-on-featured-video-plus-wordpress-plugin
[21] https://www.youtube.com/watch?v=EDkABFzGTGg