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 web page 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 users are familiar with coding. That’s why they use WordPress. So it will be really good to have a solution that requires fewer 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 favorite videos on a WordPress post/page.

Easy Video Player Info

Plugin Name: Easy Video Player
Version: 1.1.6
File Format: application/zip
Requires: WordPress 4.8
Rating: 4.4 based on 37 votes
See All Ratings/Submit Your Rating Here
Price: 0 USD

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 Dashboard 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 Sharing

Sharing is enabled by default in the player. If you want to disable it you can set the “share” option to “false” in the shortcode:


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

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="no-toggle"]

  • no-toggle – controlbar is statically placed below the video (no mouseover effect)
  • fp-slim – slim timeline is added that expands on mouseover
  • fp-full – the timeline is positioned above the controlbar buttons and it takes the whole width of the player (similar to YouTube)
  • fp-fat – add a tall timeline
  • no-buffer – hide the buffer indicator
  • fp-edgy – make the icons angular
  • fp-outlined – make the icons outlined
  • fp-mute – add a mute/unmute button to the controlbar
  • no-volume – hide the volume control

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="no-toggle fp-mute 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


.flowplayer.is-splash .fp-ui > .fp-play, .flowplayer.is-poster .fp-ui > .fp-play {
    display: none;
}

Player Skins

By default, the player uses this skin.

screenshot showing the wordpress video plugin in action

In order to display the player using a different skin (e.g. minimal, 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="fp-minimal"]

screenshot showing the minimal skin of WordPress video player


[evp_embed_video url="http://example.com/wp-content/uploads/videos/vid1.mp4" class="fp-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 behavior 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;
}

FAQ (Frequently Asked Questions)

1. Can I autoplay on mobile devices?

– Video autoplay is disabled by default on iOS and android devices. This is to make sure that no data is loaded until the user initiates it.

2. I understand the default option. But Can I still autoplay on a mobile device by adding some code?

– No. Because this is how it was designed by the hardware manufacturer. You can even try embedding a video without using this plugin and the autoplay won’t still work.

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 for selling videos in WordPress.
GET 70% OFF WordPress Hosting Here

527 thoughts on “WordPress Video Plugin”

  1. Hello,

    Thanks a lot for your great and easy plugin!

    A question : is it possible to play several videos together ? I tried, but it doesn’t work, the new one stop the previous one — and I need to play twenty short videos all together.

    Thank you,

  2. Hi,

    Really nice plugin!

    Problem: I use the mediaelement template and can’t display a player with larger width than 900 for some reason. Scaling lower, and up to 900, works fine. The movie file resolution is 1280 x 720, and I use a full-width theme. Also, this problem only occurs when using the mediaelement template, otherwise no issues scaling larger than 900. Any ideas?

    Thanks!

  3. Hi,

    First of all I want to thank you for your plugin. I will make a donation as soon as I have some spare money. I could not find a forum to post this, but I’m having trouble with the autoplay function since it’s only working on PC’s and not on mobiles (using Chrome). Any way to fix this? Thanks again.

    1. @Juan, Autoplay is disabled on all mobile devices by default. This is done by the device manufacturers to avoid unwanted data consumption.

  4. Hi, I have 2 questions.
    1.) Is it possible to disable the download icon on the video?
    2.) Is is possible to have the video redirect to a certain url after it gets done playing?

    1. @Richard, There is no download button on the video. Unfortunately it’s not possible to redirect to a certain URL after the video finishes playing.

      1. Hello,

        Yes it is. Using template “mediaelement”, if you do right-click over the video screen it opens a menu with different options. The last one allows the viewer to download the file.

        It would be ideal if we can custom this to hide this option. Is there a way to do that?

        Thanks!

        David.

          1. @David, Unfortunately, all HTML5 videos will have a “Save Video As..” option. You can probably install a plugin that will disable right click on your video page.

    1. @Rich, Please provide a link to the page in question so I can take a closer look. Have you properly encoded it with a H264 encoder like handbrake? The file format needs to be H264 encoded MP4.

      1. Thanks for your response! I created the H.264 mp4 using Adobe Premier Pro. The web page where I have inserted the code is: http://theironmanmind.com/vlog/

        The code that I used is: [evp_embed_video url="http://theironmanmind.com/wp-content/uploads/2017/07/Introduction.mp4"]

        I’m sure it’s something simple! Please let me know what you see. Thanks!
        Rich

        1. @Rich, Thanks. I see some JavaScript errors in my browser console. I’m not sure what’s causing it on your site (it could be a plugin conflict).

  5. Do you have a paid version that doesn’t include the link to FlowPlayer?

    And how are you associated with FlowPlayer? I had just deleted FlowPlayer because the controls weren’t working. Then I installed your player, and everything looks and works well. I was surprised to see the FlowPlayer link in my video.

    1. @Caryn, They do have a premium license that allows you to remove the watermark or override it with your own logo. But since this is a free plugin I didn’t feel it’s necessary to integrate with it. If the watermark really bothers you feel free to use the mediaelement template instead.

  6. Hello!

    I user this plugin and I have a problem with the size of the prewiew-impage (poster) on mobile devices.

    I used this code:

    [evp_embed_video url="http://mentaleshortcuts.de/XXX.mp4" width="1024" poster="http://mentaleshortcuts.de/wp-content/XXX.png" preload="metadata" template="mediaelement"]

    On the desktop it looks good, but on mobile devices the size of the preview-image is not korret.

    You can see this on this page:

    https://mentaleshortcuts.de/testseite/

    Passwort: Video

    Hope you can help mesoon.

    Best regards
    Gerald

  7. How do I get poster image to show up on my mobile device? I have this on my site but the video is still black on mobile: [evp_embed_video  autoplay="true" url="http://radiantit.wpengine.com/humanlongevityproject/wp-content/uploads/sites/5/2017/08/THLP-Teaser-03.mp4" poster=""  width="510" height="400"]

      1. @admin
        Also when I use the image URL and the width=”1024″ height=”567″ the view of the iage on mobile divices is not the korrect size 🙁

        Do you have another idea?

  8. Hello.
    Thanks for creating this plugin, works pretty good.
    One thing I did notice is that when playing video on full screen on android device the screen rotation doesn’t work, it does work on iOS tho, can this be fixed?
    Thanks in advance.

  9. I’ve added alternate formats to my code after reports of “video not found” error came in from various sources. Now there is a delay of several seconds before the video plays after I hit play on a mobile site. How to fix this?

    My video code is:

    [evp_embed_video autoplay="true"  url="http://radiantit.wpengine.com/humanlongevityproject/wp-content/uploads/sites/5/2017/08/THLP-Teaser-03.mp4" "http://radiantit.wpengine.com/humanlongevityproject/wp-content/uploads/2017/08/THLP-Teaser-03.ogv" "http://radiantit.wpengine.com/humanlongevityproject/wp-content/uploads/2017/08/THLP-Teaser-03.webm" width="510" height="auto" poster="https://humanlongevityfilm.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-04-at-1.40.32-PM-1024x571-1.png" ]

    1. @Ashley, Please make sure to encode the video with an H264 encoder like handbrake so It’s compatible with a mobile device. While encoding you should select “web optimized” so the video metadata is stored at the beginning of the video file.

    1. @alex, Please check the shortcode attribute to make sure it’s not formatted. You can paste the shortcode as plain text in the visual editor or switch to text mode to remove formatting.

  10. I am trying to embed a link and it just shows a black screen on player. Not sure what I am doing wrong.

    The link to the news site is http://www.wfmynews2.com/life/donate-suitcases-for-foster-kids/463318499

    PLEASE HELP!!

  11. Can you make a video of this video player plugin how to do that like after making a small video how to insert it into website.

    1. @Narendra, You just copy and paste the shortcode into the editor and then replace the example URL with the actual link to the video file.

  12. Hi. I use this plugin to display a few video’s. My video’s are from 3 minutes to 7 minutes long, but when i use this plugin it cuts my video’s off at 5 min.

    Is it supposed to cut after 5 minutes? This applies to all my video’s that are longer than 5 minutes.

  13. First of all thanks for providing such a useful plugin which do exactly whats its name. I have installed on this website https://www.appcare.co.in, it was working fine but since last week I am unable to see the controls on it. Kindly guide me to resolve this issue.

    1. Control are visible after adding manually controls attribute in easy-video-player/easy-video-player.php

      Is it correct way, I think if plugin gets updated I may loose this feature again. Correct me if I am wrong.

      1. @Abhi, What modifications did you make? The last update was 5 months ago. So there is a chance it’s conflicting with some other plugin.

        1. Thanks for your reply. I had a solution without using your plugin just with inserting basic html code snippet into text editor. Thanks anyway for your valuable plugin and support.

  14. Hi, I just installed this plugin. Unfortunately, my video cannot be played. Here is the video:
    http://asiamalariaimages.com/2017/08/22/slideshow/
    My video is from my Google drive account:
    [evp_embed_video url="https://drive.google.com/open?id=0ByXK-BrXlzXYWDFRUS1yYzM1UE0" autoplay="true" share="false"]

    Thanks,

    1. @Adhi, That’s just a link to a page that contains the video (similar to YouTube). You need to provide an actual link to the mp4 video file.

  15. Great plugin! Is there a way to adjust the round Play Button displaying in the center of the video to be smaller and placed in the corner instead for the mobile version? Maybe a CSS to control it? I’m using the mediaelement template.

    Thanks.

  16. Thanks so much for the plugin! Is there a way to make the controlbar and the full screen icon invisible even when the user hovers over the video?

Leave a Reply

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