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
Compatibility: WordPress 4.6
Version: 1.1.4
Description: Easy Video Player is a WordPress video player that allows you to embed video into your WordPress site
Icon of Easy Video Player
Price: 0 USD
Availability: instock
Rating: 4.6 out of 28 votes

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

429 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.

Leave a Reply

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