How to Embed a 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 method. This feature was added in WordPress 3.6 which makes it easier for you to embed video files without installing a plugin.

Usage

The easiest way 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="https://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 a placeholder before the video plays.

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

loop

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

[video src="https://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="https://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="https://example.com/wp-content/uploads/myvideo.mp4" preload="auto"]

width

“width” attribute defines the width of the video.

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

height

“height” attribute defines the height of the video.

[video src="https://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.

GET a Special 60% OFF WordPress Hosting Here

8 thoughts on “How to Embed a Video in WordPress”

  1. Hi
    How can I also get an End Poster Image (endscreen) with a link. Anyone knows a plugin for that?
    Thansk 🙂

    1. @Johnny, the poster is an HTML5 video attribute that can only be shown until the user clicks on the play button.

      1. Thank you Admin

        What I’m looking for is a image that comes after the video. Like an Ad.
        Is there a WP plugin for that?
        Johnny 🙂

  2. Hi,
    How do I have an embedded youtube video autoplay?
    I’ve tried the code you’ve provided here: autoplay=”on” and that does not work.
    The following list below is also code that I’ve tried which hasn’t work:
    &autoplay=1
    ?autoplay=1
    ?autoplay=1&cc_load_policy=1.

  3. Hi When I use this the poster image I specify fills the space available on the page (full width) rather than constricted by the video dimensions. Then when you click the play button the video shrinks down the dimensions I specified. I have both width and height specified. Do you know how I can restrict the poster size from expanding outside the video?

  4. Hi,
    Is there any way to disable navigation bar from embadded video?
    I’m trying to add video with autopllay, auto loop and without ‘play’, ‘stop’ etc. buttons.
    Is it possible to do?
    Thanks!

    1. @Yamen, You should be able to do this with CSS. I added this CSS code to my theme customizer (Appearance > Customize > Additional CSS):

      .mejs-controls{
      display: none;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *