WordPress Video Plugin

Last updated on by admin

A video 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 a video. 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


Do you know that you can get 50% OFF WordPress hosting here only for today? Hurry now before this offer ends!

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.3 based on 40 votes
See All Ratings/Submit Your Rating Here
Price: 0 USD

Requirements

  1. A self-hosted WordPress site running on a WordPress optimized environment like Bluehost.
  2. Support for the WordPress shortcode API.

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.

Do you know that you can get 50% OFF WordPress hosting here only for today? Hurry now before this offer ends!

555 thoughts on “WordPress Video Plugin”

  1. I want to know if I have more then one video will it select one at random? I want every time the page loads to have a different video play.

  2. Is there a way to disable or get rid of the black bar space within the video box?

    I only want to display the video and not the extra black space that is on each side.

    Thank you.

  3. Hello,

    Plugin works fine as long as I access my website via a PC. When I use an Android phone or tablet I get this error message:

    html5: Unsupported video format. Try installing Adobe Flash.

    Here’s an example: http://www.myberlin.nl/archieven/3383

    Is there a solution?

    Many thanks.

    Leo

    1. @Leo, The video plays on my iPhone but there is no visual or audio. Please try encoding it using an H264 encoder like handbrake to make sure the video is compatible with mobile devices.

      1. Hello,
        Thank you for your prompt reply. I found that it was the browser I used on my Android tablet (Pale Moon) that was causing the problem. Videos work fine with Firefox and Chrome. I just tested on an iPad, and no problems either. I do not have an iPhone, so I cannot check.

        Two tiny flaws I still have:
        – is there a way to make the still photo (“poster”) appear again after the video has finished. Now, there is just a black field.
        – I do not seem to be able to get the correct distance between the video and the next paragraph of the text. I have tried “Enter” “Shift + Enter” and several combinations of those, but nothing seems to work. Here is an example:
        http://www.myberlin.nl/archieven/7666
        (I would like the distance between video and following paragraph to be the same as elsewhere in the text)
        These are of course just tiny things: otherwise, I am very pleased that I discovered your fine plugin. Many thanks!

  4. Hello,
    I need to start the video with the volume by defult mute, then the user will be able to open the volume…
    So I test all the posible shortcode that I found here, but the video continues start with the volume active…
    Can you help me please?

    Thank you!

  5. Thank you so much for this awesome plugin! I’m using it on my site and have had some great luck with increased organic search engine traffic on pages where self-hosted videos are located.

    Combined with optimized videos, this is a quick and easy way to add value to your website.

  6. Hi, thank you for creating this useful plugin.

    Lately I just realised the autoplay=”true” function is not working on the website. Is there a quick fix?

    1. @Tina, Autoplay seems to be working fine on my development site. Please provide a link to the page in question so I can take a look.

  7. I dont understand how to set the height, people say if you set the width, the height is automatically adjusted based on the width, it doesnt.

    People i see are listing the width and height in code, tried that, height not effected and remains the same.

    I just cannot seem to get the height adjusted.

  8. Hello,

    I’m having trouble getting the video to work on an iPhone. I was able to get it to work on an iPad. Are the browsers different? I did see your note in the comments about the “H264 encoder like handbrake” for mobile, so I will reach out to the creator of the video to see if it has been encoded correctly. I tried putting a poster image in the shortcode, and again, it works on iPad, but not on iPhone. I would like to have something show up instead of the black box that we’re currently getting.

    Also, is there a way to make the video responsive to fit better on the mobile view? I’ve adjusted the aspect ratio to fit well on the computer screen, and it looks nice on the iPad, but is a narrow field on the iPhone, and there’s a lot of blank space.

    Thank you in advance for your help.

  9. Hi there, I like your plugin a lot. Am I right thinking that there’s no way to mute the auto-playing video when loaded so the visitor can choose whether or not to un-mute?

Leave a Reply

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