How to Embed Video in WordPress

Last updated on by admin

The core WordPress has a video feature which allows you to embed video files using a simple simple. This feature was added as of WordPress 3.6 and it makes it easier for you to embed video files without installing a plugin.

Usage

The easiest to embed a video is to copy and paste it into your post/page editor.

http://example.com/wp-content/uploads/myvideo.mp4

Insert from Media Library

While you are writing content you can click on the Add Media button to upload and insert a video into the post/page.

screenshot showing how to insert a video into a post or page from the media library in WordPress

Once the video is embedded you will be able to see a preview of the thumbnail even before publishing it.

video embed preview inside a WordPress post or page

Video Options

Embedding a video by directly pasting the URL is easier. But if you use the video shortcode you will have more customization options. In fact, WordPress automatically creates a video shortcode for you when you insert a video from the media library. You will need to switch to the “text” editor to see the actual shortcode.

Currently the video shortcode supports the following options.

src

This is the source of your video file. It is recommended to use mp4 file format since it is compatible with most browsers (including browsers running on mobile devices).

[video src="http://example.com/wp-content/uploads/myvideo.mp4"]

You can specify other file formats to allow for graceful fallbacks.

  • mp4
  • m4v
  • webm
  • ogv
  • wmv
  • flv

[video mp4="http://example.com/wp-content/uploads/myvideo.mp4" ogv="http://example.com/wp-content/uploads/myvideo.ogv" mov="http://example.com/wp-content/uploads/myvideo.mov"]

poster

“poster” attribute defines an image to show as placeholder before the video plays.

[video src="http://example.com/wp-content/uploads/myvideo.mp4" poster="http://example.com/wp-content/uploads/poster.jpg"]

loop

“loop” attribute allows for the looping of video. If set to “on” the video will start over again every time it is finished.

[video src="http://example.com/wp-content/uploads/myvideo.mp4" loop="on"]

autoplay

“autoplay” attribute causes the video to automatically play as soon as it is ready.

[video src="http://example.com/wp-content/uploads/myvideo.mp4" autoplay="on"]

preload

“preload” attribute defines if and how the video should be loaded when the page loads. By default it’s set to “metadata”.

  • metadata – only metadata should be loaded when the page loads
  • none – the video should not be loaded when the page loads
  • auto – the video should be loaded entirely when the page loads

[video src="http://example.com/wp-content/uploads/myvideo.mp4" preload="auto"]

width

“width” attribute defines width of the video.

[video src="http://example.com/wp-content/uploads/myvideo.mp4" width="640"]

height

“height” attribute defines the height of the video.

[video src="http://example.com/wp-content/uploads/myvideo.mp4" height="360"]

It’s better not to specify a width and height in the shortcode. WordPress will fit the video in the content area with the best possible width and height (keeping the aspect ratio). This will also make the video responsive.

Leave a Reply