Adding Hosted Videos to WordPress

If you prefer to upload videos directly to your WordPress site and avoid using YouTube and Vimeo Embeds, the following method works for me. The CSS is used to contain the video within a div. This works great in WooCommerce shops to show videos of products. If you have lots of videos or large video files, I’d always recommend using Vimeo or YouTube to host the videos and embed them on your site.

#wordpressVideo video {
	 max-width: 100%;
	 height: auto;
}

The HTML code below autoplays the video, mutes any sound and continues in a loop.

<div id="wordpressVideo">
<video autoplay muted loop playsinline>
  <source src="https:// this is the URL to the video you've uploaded .mp4" type="video/mp4">
</video>
</div>

Displaying video full width, responsively and controlling height using CSS

Ideal for widescreen videos on a website homepage, also where you need to contain the height of the video.

<div class="video-container">
    <video autoplay muted loop playsinline>
        <source src="your-video.mp4" type="video/mp4">
    </video>
</div>

.video-container {
    width: 100%;
    height: 60vh; /* Adjust height */
    overflow: hidden;
    position: relative;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

Displaying videos responsively within a frame

This is useful for animated logo videos, or when you need to display a video at a specific size.

<div class="video-frame">
  <video autoplay muted playsinline>
    <source src="https:// this is the URL to the video you've uploaded .mp4" type="video/mp4">
  </video>
</div>

.video-frame {
  width: 100%;
  max-width: 800px;   /* frame width */
  margin: auto;
  overflow: hidden;
}

Adding a pause on a looped video

To avoid a looped video looking like a fruit machine, I sometimes add a short pause. This is sometimes good for a logo video or title sequence animation. You need to specify the class or id of the div containing your video in the Javascript.

<script>
document.addEventListener("DOMContentLoaded", function () {
  const video = document.querySelector(".loop-video video");

  video.addEventListener("ended", function () {
    setTimeout(function () {
      video.currentTime = 0;
      video.play();
    }, 5000); // pause in milliseconds (5000 = 5 seconds)
  });
});
</script>

<div class="loop-video">
  <video autoplay muted playsinline>
    <source src="your-video.mp4" type="video/mp4">
  </video>
</div>