How to Embed a Video in WordPress

Last updated on by admin

The core WordPress has a video embed feature which allows you to embed a video in WordPress very easily. This video embed feature was included in WordPress 3.6 which made it easier for you to embed a video in WordPress without having to install a plugin. In this post, I will show you how you can directly embed a remotely hosted video in WordPress or a video that you have uploaded to your WordPress media library.

Usage


Get 50% OFF WordPress hosting through this special link here (offer expires on January 31)

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


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

Please note that this option will only work on a self-hosted WordPress site where you can install plugins/themes. So if your website is hosted elsewhere (e.g. wordpress.com), make sure to move to a reliable WordPress hosting environment like SiteGround.

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 load when the page loads. Default is “metadata”.

  • metadata – only metadata should load when the page loads.
  • none – the video should not load when the page loads.
  • auto – the video should load 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 50% OFF WordPress hosting through this special link here (offer expires on January 31)

9 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 *