WordPress HowTo

How-to guide for WordPress

  • Home
  • Plugins
  • Themes
  • Contact
    • Privacy Policy
  • About

How to Embed a Video in WordPress

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.

How to Embed a Video in the WordPress Block Editor

The easiest way to embed a video in the WordPress block editor is to add a Video block.

screenshot of video block in the WordPress block editor

You can then choose to Upload a video file, pick one from your media library, or add one with a URL. If you wish to embed an existing video from the WordPress media library choose Media Library, select the video and click Insert.

embed video from WordPress media library

How to Autoplay a Video in the WordPress Block Editor

Once the video is embedded in the WordPress block editor, you can simply select the block and enable Autoplay under Video settings.

WordPress video block settings

How to Loop a Video in the WordPress Block Editor

Once the video is embedded in the WordPress block editor, you can simply select the block and enable Loop under Video settings.

How to Mute a Video in the WordPress Block Editor

Once the video is embedded in the WordPress block editor, you can simply select the block and enable Muted under Video settings.

How to Hide Video Player Controls in the WordPress Block Editor

Video player controls are shown by default in WordPress. You can choose to hide these controls by selecting the video block and disabling Playback controls under Video settings.

How to Play a Video Inline in the WordPress Block Editor

playsinline is an attribute that tells mobile browsers to play the video right where it is instead of opening it up fullscreen. You can choose to apply playsinline to a video in WordPress by selecting the block and enabling Play inline under Video settings.

How to Add Preload to a Video in the WordPress Block Editor

Once the video is embedded in the WordPress block editor, you can customize the Preload attribute by selecting the block and choosing Metadata, Auto or None under Video settings.

How to Add a Poster Image to a Video in the WordPress Block Editor

Once the video is embedded in the WordPress block editor, you can simply select the block and click Select under Poster image to either upload a new poster image or use an existing one from the media library.

How to Embed a Video in the WordPress Classic Editor

The easiest way to embed a video in the WordPress classic editor is to copy and paste its URL 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 managed WordPress hosting environment. If you wish to embed a video in lightbox you will need to use the Lightbox Ultimate plugin.

Insert from Media Library (Classic Editor)

While you are writing content in the classic visual editor, 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

How to Embed a Video Using the WordPress Video Shortcode

WordPress core comes with a video shortcode that can be used to manually embed a video. In order to embed a video using this method in the WordPress block editor, you need to add a Shortcode block.

screenshot showing how to add a shortcode block in WordPress

Once the shortcode block is added, you can embed a video by inserting this shortcode.

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

WordPress video shortcode

In the WordPress classic editor you can directly insert the shortcode.

WordPress Video Shortcode Options

Embedding a video by using the video block or directly pasting the URL is easier. But if you use the video shortcode you will have more customization options.

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.

WordPress Video Player Skins

You can use a plugin to customize the default WordPress video player.

Skin 1

When this plugin is active, a clean player will load without a controlbar background.

wordpress video player skin 1
WP Video Player Skin 1
WP Video Player Skin 1
A clean skin for the WordPress video player.

Note:
* Please do not purchase if you are not sure about a feature, contact us instead.
* Please do not purchase to ask for more features or make the product work in a certain way.
* Please do not try to scam us, we take it seriously. We are contributing to the WordPress community with free plugins and themes. If you cannot appreciate this our product is not the right choice for you.
* There is no refund/cancellation as it is a digital product.

Price: $29.99

How to Embed a WMV Video in WordPress

WMV is a Windows Media Video file compressed with Microsoft’s video compression formats. This format is normally used in Windows to store videos on your computer. Since WMV is not an HTML5 compatible video format, it’s not possible to play this type of video file in a modern browser.

If you have a WMV video file that you wish to play on your WordPress site, you should encode it to a supported HTML5 video format instead (e.g. MP4, WebM, and Ogg). You can do this very easily these days with a free video encoder like handbrake.

First, Select the video file on your computer and open it using Handbrake.

screenshot showing how to open single video file in handbrake

Now select a destination where the encoded video file will be saved. Make sure to keep the Web Optimized option enabled. Click Start Encode.

screenshot showing how to start encoding a video file in handbrake

You can upload the newly generated video file to your server and embed using the above method.

Related

Written by Noor Alam · Categorized: wordpress

Comments

  1. Johnny says

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

    Reply
    • admin says

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

      Reply
      • Johnny says

        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 🙂

        Reply
  2. Gwendolyn says

    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.

    Reply
    • admin says

      @Gwendolyn, I don’t think the WordPress oEmbed API supports autoplay for a YouTube video.

      Reply
  3. Vanessa says

    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?

    Reply
  4. Yamen says

    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!

    Reply
    • admin says

      @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;
      }

      Reply
      • Yamen says

        Th ank you

        Reply
  5. 2drumstix says

    How would one align the video center?

    BTW, my videos would only show the size be using both width & height.

    Reply
  6. Charlotte says

    Hi!

    I’m adding a mp4 video with autoplay, loop and preload. It all looks great except for a spiral loading effect that appear after each loop. Do you know how to I get rid of it?

    Thanks 🙂

    Reply
    • admin says

      @Charlotte, Please provide a link to the page in question so I can take a look.

      Reply
  7. SVEDrilling says

    Great post!! Thanks for sharing!!

    Reply
  8. decanter says

    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?

    Reply
    • admin says

      @decanter, Please provide a link to the page in question so I can take a closer look at the issue.

      Reply
  9. Atif Mehboob says

    Hi, I tried all your instructions and successfully added the video, now just one thing is remain, I want the video to full width on page please help me,
    Thanks

    Reply
    • admin says

      @Atif, It should already take up the full space of the content area. Are you using a shortcode or did you just copy and paste the video URL? Please provide a link to the page in question so I can take a look.

      Reply
  10. Jenny says

    My videos are cut off when embedded in my blog. Could you show me how to fix it? Thanks a lot.

    Reply
    • admin says

      @Jenny, What shortcode are you using? Please provide a link to the page where you are having this issue.

      Reply
  11. Kari Bovasso says

    Hi there, none of these are working for me: http://www.schusterfamilylaw.com/videos/

    Can you view it and see if you can tell me what is wrong?

    Reply
    • admin says

      @Kari, If you directly open this URL in your browser you will see that it goes to a 404 (not found) page: http://www.schusterfamilylaw.com/wp-content/uploads/2019/06/1.-Adoption-1.mp4

      Reply
  12. Ionna says

    Do you know if it’s possible to add videos made in a app like mago video to your site ?

    Reply
  13. jenny says

    i set the video to autoplay but it doesn’t auto play. could you help? also i added the code for no player control but it shows up as well.

    Reply
  14. Slappy McPhee says

    I just like 2drumstix am needing guidance on being able to justify where the video is oriented on my website. Also when in the editor on WP I am seeing that the video window is spanning the entire horizontal space that it sits in. I would like to know how I could wrap test around it or have it say on the right side and then the text on the left? Thanks for any help in advance!

    Reply
  15. Ollie says

    I have many videos embedded on my website. No issues on normal browsers. However seems to not load any of them on mobile devices. Is there an easy fix for this?

    Reply
  16. nowak says

    Great tutorial!!! Thanks.

    Reply
  17. sybil02 says

    It works like a charm, thanks!

    Reply
  18. Javeria says

    It is an amazing post and you explained in a detailed way. Nice to see this here. I will bookmark your blog for more details. Keep sharing the new things like this.

    Reply
  19. Domenico Casaccia says

    Hi,
    I’m adding a mp4 video with autoplay, loop and preload. Autoplay not work.

    link http://www.sancarlogallery.com

    Reply
    • Noor Alam says

      @Domenico, What happens if the Muted option is turned on? Most browsers now block automatic playback unless the video is muted.

      Reply

Leave a Reply Cancel reply

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

Search WP HowTo

Recent Posts

  • How to Add a Reply-To Address in the Gmail SMTP WordPress Plugin
  • What Does a Security Challenge Mean on PayPal?
  • WP PayPal Button Integration with Contact Form 7
  • Can People See Your Address on PayPal?
  • Mailchimp Integration for WP PayPal Plugin
  • How to Show a Text Box at WP PayPal Checkout to Collect Custom Data from Buyers
  • How to Add a Recurring Price Field to a PayPal Subscription Button
  • How to Add a Quantity Field to a PayPal Button
  • How to Configure Product Variations in WP PayPal
  • How to Make Your WooCommerce Add to Cart Buttons Bigger

Featured Add-ons

Buy Now Custom Amount for PayPal

Buy Now Discount for PayPal

Contact Form 7 Integration for PayPal

Custom Input for PayPal

Mailchimp Integration for PayPal

Product Variations for PayPal

Variable Quantity for PayPal

Variable Subscription for PayPal

Copyright © 2023 · WordPress HowTo

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAcceptRead More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT