WordPress Video Plugin

Videos can significantly increase the importance of a WordPress post/page. It makes your content much more compelling to the users as well as the search engine crawler. Research has shown that users tend to spend more time on a webpage where the key concept is presented via videos. To be honest if I had to choose between a blog post where the content is too long (sort of like a written tutorial) and a video tutorial I would definitely be interested in the second option. That pretty much explains why video marketing has been so successful.

Issues With Video Embedding

I have always experienced issues trying to embed videos on my WordPress blog. It’s just there are not many good options when it comes to video embedding. Even though there is a few I find them extremely confusing for the new WordPress users. Not all all users are familiar with coding. That’s why they use WordPress. So it will be really good to have a solution that requires less steps to follow and meets user’s expectation.

Getting Started With Easy Video Player

Finally I took an effort to create a plugin that may be able to resolve some of the major issues WordPress users were experiencing – Easy Video Player.

Easy Video Player allows you to embed your favourite videos on a WordPress post/page.

WordPress Video Plugin Summary

Plugin Name: Easy Video Player
Icon of Easy Video Player
Description: Easy Video Player is a WordPress video player that allows you to embed video into your WordPress site
Rating: 4.5 based on 30 reviews
Price: 0 USD
Availability: instock

Features

  • Embed videos using simple shortcodes (no coding required)
  • Play videos using HTML5
  • Enable automatic fallback for browsers that don’t support HTML5. It allows older browsers like Internet Explorer version 8 or lower to play your videos.
  • Embed responsive videos so they look great while browsing from mobile devices.

Installation

Download the Easy Video Player plugin

  • Login to your Admin Dasboard and go to “Plugins->Add New”
  • Click on the upload option
  • Select the easy-video-player.zip file on your computer
  • Install and Activate the plugin.

Now go to the Settings menu of the plugin (Settings->Easy Video Player) and check the “Enable jQuery” option. That’s all you need to do for configuring the plugin.

Embedding Videos in a Post/Page

Create a new post/page and embed the following shortcode:


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4"]

Now replace the URL parameter with the actual URL of your video.

That’s it. Simply publish the post/page and your video will be embedded along with your content.

Video Autoplay

If you want a particular video to start playing automatically you can set the “autoplay” option to “true” in the shortcode:


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" autoplay="true"]

Control Player Size

To control the size of a video you can specify a width:


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" width="500"]

Control Player Aspect Ratio

The player aspect ratio is set to “0.417” by default. To override it you can specify a different ratio:


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" ratio="0.345"]

Poster Image

You can specify a poster image for your video by adding the “poster” parameter in the shortcode:


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" poster="http://example.com/wp-content/uploads/images/poster.jpg"]

Video Loop

If you want a particular video to start playing again when it ends you can set the “loop” option to “true” in the shortcode:


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" loop="true"]

Video Muted

If you want the sound to be turned off for a particular video you can set the “muted” option to “true” in the shortcode:


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" muted="true"]

Modifier classes

There are modifier classes that you can specify in the shortcode to customize the player. For example:


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" class="fixed-controls"]

  • fixed-controls – controlbar is statically placed below the video (no mouseover effect)
  • aside-time – times will be placed on top/left corner instead of the controlbar
  • color-alt – alternate coloring
  • color-alt2 – alternate coloring #2
  • color-light – uses a dark controlbar (Optimal for light videos)
  • no-background – no background color
  • no-hover – forces all UI elements to be visible ignoring the mouseover event
  • no-mute – hides the mute control
  • no-time – hides the time display, duration or remaining
  • no-volume – hides the volume control
  • play-button – display play button on the controlbar

You can specify more than one class (separated by whitespaces) in the shortcode.


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" class="fixed-controls no-time no-volume"]

Custom CSS

In addition to modifier classes, you can apply your own custom CSS by simply installing the Simple Custom CSS plugin. You need to add your CSS under “Appearance -> Custom CSS”.

Hide Play Button


.is-splash.minimalist .fp-ui, .is-paused.minimalist .fp-ui{
    background-image: none; 
}

Player Skins

By default, the player uses the minimalist skin.

screenshot showing the wordpress video plugin in action

In order to display the player using a different skin (e.g. functional, playful) you can specify the skin name in the class parameter.


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" class="functional"]

screenshot showing the functional skin of WordPress video player


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" class="playful"]

screenshot showing the playful skin of WordPress video player

Player Template

By default, the player uses the Flowplayer template. However, you can choose a different player template using the template parameter.


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" template="mediaelement"]

screenshot of MediaElement player template in the Easy Video Player plugin

Please note that modifier CSS classes do not work when you are using a different video player template.

Video Preload

By default, the mediaelement template only renders the metadata of a video when the page loads. If you want to change this behaviour you can set the “preload” option to “auto” or “none” in the shortcode.

  • “metadata”: Only metadata should be loaded when the page loads (default)
  • “auto”: The video should be loaded entirely when the page loads
  • “none”: The video should not be loaded when the page loads

[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" preload="auto" template="mediaelement"]

Center Video

By default, the mediaelement player is aligned to the left. However, you can use this method to align the video in the middle.

  • Install and activate the Simple Custom CSS plugin
  • Add this CSS under “Appearance -> Custom CSS”

.wp-video {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

If you like Easy Video Player please leave it a rating. A huge thanks in advance!
Users who like Easy Video Player also like WP eStore plugin to sell video in WordPress.
special SiteGround WordPress hostingspecial Bluehost WordPress hosting

449 thoughts on “WordPress Video Plugin”

  1. I have used this shortcode
    [evp_embed_video url="http://www.sxolixorounikaia.gr/wp-content/uploads/2016/07/ΣΤΑ-ΘΡΑΝΙΑ-20-12-15-1.avi"]
    but says “html5: Video file not found”

  2. Hi,

    I have some problem to start video on mobile, sometime on Android appear the error message video file not found, and on Ios i click on play icon but video don’t start…
    this is the code:
    [evp_embed_video url="http://www.isopad.it/wp-content/themes/Isopad/video/home_ok.mp4" poster="http://www.isopad.it/wp-content/uploads/2016/06/home_video_preview.png" class="play-button"]
    How can I solve it?

    Thank you

  3. Hi,

    Once I added the *template=”mediaelement”*-code, the video doesn’t align in the center anymore.

    Any idea what I can do about this?
    Cheers, Tom

  4. Installed properly. Gives an error message when using MP4 and when using HTML5 encoded videos all I get is the audio and no video. Can you provide a fix, please? Using a theme provided by “Authentic”.

    1. @Ed, That sounds like an encoding issue (It needs to be H264 encoded). Which encoder did you use? Please provide a link to the page in question so I can take a look.

      1. I am trying to embed an MP4 video that I renamed from a M4V file, and have been assured it is H264 encoded, but I am getting a “HTML5: video file not found” error I am using divi theme, but have just put the shortcode into text and replaced the URL with the URL of the video media file. I am quite new to this, so apologise if I have done something stupid, but anything obvious I may have done wrong?

        1. @Cathy, Please provide a link to the page in question so I can take a look. Did you check if the video URL is valid by copying and pasting into the address bar?

          1. Thanks for your reply. Finally worked out that it was a problem with the video file I had imported into the media library. All working fine now, thank you!

  5. such a great plugin!

    just a quikc question,
    I have these huge black blocks on the left and right.

    Is there a way to reduce or remove them??
    best wishes
    Flo

    1. oh and also, is there a way to switch off the display for the progress bar off the video ? …basically I want to switch off all hover effects as best as possible, using the given codes above but thats not enough 😐 😐 ….It is the best video player i worked with so far, and I have tried all the other plugins as well…yours is best 🙂

      1. @Flo, If you specify the correct ratio for the video it should take up the whole player. I haven’t tested all the modifier classes yet. So I don’t know which one can switch off the hover effects. Have you tried “fixed-controls”?

  6. Is there a way to embed a thumbnail picture that shows before starting the video? So instead of a black box with the play symbol I could embed a picture giving an idea what the video will be about.

    Thank you for this plugin, its very simple and effective, love it!

      1. I’m trying to use a poster image and, for some reason, nothing shows up. Still a Black box with White play button. Here’s the shortcode I’m using (without the Poster element).

        [evp_embed_video url="http://janklandrecording.com/topbrassss/wp-content/uploads/2016/topbrassssnocontactinfo.mp4" preload="metadata" class="fixed-controls play-button"]

        What and where do I add to existing shortcode to make an image appear before playing (like YouTube does)? Thanks for any help you can give.

  7. Hi, great plugin!
    I have a little problem with the template: mediaelement. Somehow the speaker-icon and the full-screen-icon don’t appear. Please help.
    Thanks again for this otherwise great plugin.

  8. how can i use css on this plugin.as i want to change the position of full screen video icon.
    any way it is a great plugin.

  9. Hi there I can’t seem to get rid of the black background. My video background is white and it looks weird with black on either side. I have tried aspect ratio, background colour etc etc http://abeautifulbodyshape.com/personal-styling-workshops-2/

    [evp_embed_video url="https://s3-ap-southeast-2.amazonaws.com/fionaaustralia/style+online+video+one+cold+redone.mp4" autoplay="true" no-background="true" ratio="0.417"]

  10. Hi, I love your plugin. I just have one question; Because I have used YouTube to get an URL for my video, I was wondering what I can do to stop the pictures of other video’s (I think they call them relevant… but these are definitely not relevant. lol). I read that you can put rel=0 after the url.
    Should I of done that before I embedded it, as it does not seem to like it when I added in the video post editing.
    Thanks in advance

    1. @Donna, This plugin embeds MP4 video (not YouTube). Are you referring to a different plugin? You should be able to disable relevant videos by adding &rel=0 to a YouTube URL.

        1. The video won’t align in the centre. Once I added the *template=”mediaelement”*-code, the video doesn’t align in the center anymore.

          Any idea what I can do about this?
          Cheers, Tom

    1. Hi,

      This is a great plugin! So happy to have found it, but really struggling to get the player centered. I’ve loaded up the css, that didn’t work so then I loaded up the CSS through simple CSS incase I’d missed something, and that didn’t solve it either. Do you have any suggestions? It would be so very appreciated!

      http://www.mbkc11mar2017.nz/
      [evp_embed_video url="http://www.mbkc11mar2017.nz/wp-content/uploads/2016/10/Annimation-of-DoorBell-screen-size-30-frames.mp4" autoplay="true" ]

  11. Hello

    I am having some issues with running my video.

    I have a text video on YouTube – https://youtu.be/LZKg6bc-GyQ

    and using the following command line – [evp_embed_video url="https://youtu.be/LZKg6bc-GyQ" autoplay="true"]

    and I keep getting this –

    “html5: Video file not found”

    It is H264 encoded ….

    I am new to this … 🙂

    Cheers
    Mike

  12. Hi,

    Your plug in is great, just i have one issue, that the video will start load automatically, and i have a lot of video in one page so each time ll video will start load together even if i’m not click play, so can i stop this auto load?

    Cheers
    Ouss

    1. @ouss, Are you using the default player or the mediaelement template? Please provide a link to the page in question so I can take a look.

      1. Hi,,

        Really i use the default player, also i test the (preload=”none”) it work perfect on chrome but on safari it still loading, you can check it here http://www.istockplus.com
        also you can open any product from the item below where you can find a single video link

        i embeding like this,

        [evp_embed_video url="https://0.s3.envato.com/h264-video-previews/0eb63e59-4953-4f19-9070-32ccfee8dddb/1131231.mp4" preload="none" poster="http://www.istockplus.com/wp-content/uploads/2016/09/preview-1.jpg" loop="true" ratio="0.562"]

  13. Hi there. Nice plugin but I am having a problem with a video not loading on my iphone running iOS 10 using Safari mobile. It loads fine in Chrome on iOS but in Safari just has a black box with 3 small loading dots. It is HTML5 and H.264 encoded. Your help is greatly appreciated.

    Here is the link https://squeakywheelcreative.com/

    thanks
    Trevor

  14. Hi- great plugin! The issue I am having with a 23 MB video is that it starts and stops – and my internet download speed is high enough. Is there a way to have the player buffer the video at first so that it will not keep stopping and starting and having playback issues? Also checked from a remote place with high speed internet- it is a shared server with GoDaddy – but it should not be an issue for such a small video file, right?

  15. Hello,

    I can not get my video to play. When I go to the site, I see a gray box. I click on the gray box and the video shows, starts to play…then stops.

    I would like for the video to show (still picture if play has not been pressed) when someone accesses the site.

    Please help
    www.crunchesandcouture.com

  16. Hi I am also struggling with removing the big black blocks either side of teh video – tried different aspect ratios without success please can you assist?

  17. Hi there

    Could you tell me how to center align the video please? I have tried everything and can’t get it to work….this is my current code:

    [evp_embed_video url="http://www.pathtosuccesstrilogy.com/wp-content/uploads/2016/10/final.mp4" template="mediaelement" width="1000" poster="http://www.pathtosuccesstrilogy.com/wp-content/uploads/2016/10/Slider-Image-3.jpg" align="center"]

    Thank you
    Kate

  18. Hi,

    Is there any way to defer or not load the player icon?

    As through webpagetest I can see that the video loads then after that it tries to get the play_white.png file and it takes around 8 seconds to do so. I use cloudflare and w3 total cache so I don’t know if they are part of the problem. Every other resource on my site loads fine just this player icon that doesn’t. I have the embed on preload none but it still technically is preloading the video and the icon.

    1. @Matt, preload attribute is for controlling whether or not the video data should load when the page renders. It doesn’t affect the play button in the middle of the video player.

      I have just added a new “Custom CSS” section for hiding the play button. Please follow those instructions and see how it goes.

  19. [evp_embed_video url=”http://flashbackstudio.in/wp-content/uploads/2015/05/video01.mp4″
    width=”500″ height=”300″] this is not working Please help me out

    1. @Shardul, When I copy and paste the video URL into the address bar, I get a 404 not found error. Please make sure that the video is publicly accessible.

  20. The plugin works well, except that when the video ends, users are left looking at the final frame of the video — which is often a black background, since videos like to fade to black. Is there a way to have the video revert to the poster image when it’s done playing?

  21. Is there a way to remove the progress bar (at bottom) and maximize icon (at top right) so that only the actual video contents are seeon.

  22. Hey Y’all,

    Great plugin! Really like it. Having one small issue.

    http://affank.com/portfolio/brigade/

    I have the video on autoloop. Right before it loops it flashes a black screen. Is there any way to remove that? I tried a poster image but that doesn’t seem to work. Here’s the code I’m using:

    [evp_embed_video url="http://affank.com/wp-content/uploads/2016/12/timed-debate.mp4" autoplay="true" loop="true" poster="http://affank.com/wp-content/uploads/2016/12/timed-debate-dummy-image@2x.png" template="mediaelement" width="360"]

  23. Hi there I am running in to a problem where the video works great on the first load, but found an issue where if you navigate to another page on the site and then back to the homepage the video section becomes disabled and and stuck on one of the frames in the vid.

    Ive tried the mediaelement template and this works but the player changes completely if the above steps are taken, from a black player to a white one. Also Id prefer to not use that template because I wasn’t able to make it responsive with full height and width like i was with the default template.

    http://chaskifyportal.us-west-2.elasticbeanstalk.com

  24. Hi there! Looks like a great plug in if I can get it to work. Plug in is seeing the video and capturing the initial image of it (on desktop) but no play and no play button. Not showing image on ios device.

    Code:
    [evp_embed_video url="http://posm2.s3.amazonaws.com/b02wwp.mp4" width="720" ratio="0.666" class="play-button"]

    I’ve tried it with a local video as well (not s3) and no luck.
    Videos are H.264, AAC mp4

    Suggestions?
    Jason

  25. Hi. The plug was working perfectly till the last WP update, now the video plays, but the poster does not display and has not been moved. Any suggestions?
    View at www.davidkempton.com, bottom of front page. Thanks.

    1. forgot the code:
      [evp_embed_video url="http://www.davidkempton.com/wp-content/uploads/mrintrosm_x264.mp4" width=160" ratio="0.75" class="no-time" fullscreen="no" poster="http://www.davidkempton.com/wp-content/uploads/mrintrosm.png"]

      1. @David, I just copied and pasted your shortcode into my development site. It seems to be working fine. I just had to modify some parameters so it’s not broken:

        [evp_embed_video url="http://www.davidkempton.com/wp-content/uploads/mrintrosm_x264.mp4" width="160" ratio="0.75" class="no-time" poster="http://www.davidkempton.com/wp-content/uploads/mrintrosm.png"]

        You do have another flowplayer plugin. I believe that’s what’s causing this conflict.

  26. How can I put on video left, the other center and the other right?
    How can put the video in the middle of a background picture?

    Fine looks to use but these are important things and nobody can use with shortcodes.

      1. @ilker, You can specify a custom CSS class in the shortcode and use CSS to apply styling to it. Please check the “Modifier classes” section for details.

        1. Thanks for the quick response. Ok now I can style the video from custom css but I could not figure out how can I put the video shortcode into another element like or . I want to use the element as a TV picture frame around the video. For example:

          [evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" class="fixed-controls no-time no-volume"]

          1. Correction!
            There should be p element around the short code but the editor didn’t show it. It should be:

            [evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" class="fixed-controls no-time no-volume"]

          2. Sorry but if I put the that arrow mark it doesn’t show. So it shoul be like this:)

            There should be p element around the short code but the editor didn’t show it. It should be:
            p element or div element
            [evp_embed_video url=”http://example.com/wp-content/uploads/videos/vid1.mp4″ class=”fixed-controls no-time no-volume”]
            /p element or /div element

          3. @ilker, Are you editing in the visual editor? These are html tags so you can only enter them in text/html mode.

          4. I didn’t even try, but sure you are right. I didn’t notice that because I didn’t now that [x] is a html tag. I think I should add [div class=”…”] shortcode and [/div] right?

Leave a Reply

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