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.4 based on 36 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 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 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;
}

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 plugin to sell video in WordPress.

Top WordPress Hosting for Speed, Performance & Security

6x faster A2 hosting for WordPressSiteGround WordPress hosting

495 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. @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).

Leave a Reply

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