---
title: "How to embed looping videos on your web page"
date: 2014-05-18
description: "$( document ).ready(function() { // Handler for .ready() called. $('#toc').toc({ minimumHeaders: 3, listType: 'ul', showSpeed: 0, headers: '#content h2, #content h3, #content h4, #content h5, #content h6' }); /*..."
canonical_url: https://idratherbewriting.com/2014/05/18/how-to-embed-looping-videos-on-your-web-page/index.html
---

> For AI agents: a documentation index is available at https://idratherbewriting.com/llms.txt. Markdown versions of all pages are available by appending .md to any page URL.

# How to embed looping videos on your web page

Videos are great, but sometimes all you want to do is show a brief clip that demonstrates a certain action. For example, take a look at this article on [how to make play-dough](https://www.wikihow.com/Make-Play-Dough). Each step has an embedded, looping video that shows the action you need to take. There aren't any player controls on the videos, and the videos only start when you mouse over them.

Embedding looping videos is easy to do with with HTML5 video tags. See this [post on Stack Overflow](http://stackoverflow.com/questions/19159888/how-can-i-play-pause-more-than-one-video-by-mouseover) for some sample code.

I created a quick example with looping videos in this post. Suppose you're creating release notes about some image editing functions in WordPress. Here's how you might embed looping videos. *Mouse over the images to make them play.*

## Cropping images

You can crop images that you have uploaded in WordPress.

[Video](https://s3.us-west-1.wasabisys.com/idbwmedia.com/video/crop.mp4)

## Rotating images

You can also rotate the videos clockwise or counterclockwise.

[Video](https://s3.us-west-1.wasabisys.com/idbwmedia.com/video/rotate.mp4)

## Flipping images

You can also make quick adjustments to the videos. For example, you can flip the images horizontally or vertically.

[Video](https://s3.us-west-1.wasabisys.com/idbwmedia.com/video/flip.mp4)

*With this last video, if you move your mouse off the video, the video stops.*

The only shortcoming with the method above is that the videos don't have a watermark over them to let you know they're videos rather than static images. I added a box shadow to the images, which would easily let the user learn to recognize looping videos versus static images.

There are quite a few options with the [HTML5 video tag](http://www.w3schools.com/tags/tag_video.asp), such as whether to include controls, autoplay, loop, and more.