We are happy to announce our new store website www.yendif.com. Take a look around, find out about the products & services we offer.

Installation of Files

  1. Download the latest version of Yendif Player plugin.
  2. Unzip the package.
  3. Copy the yendifplayer folder from the zip package to your webserver.

Note : This document page assume that you have copied the files to your site {root}.

Doctype Declaration

Declare the HTML5 doctype at the top of your page:

<!DOCTYPE html>

Include Yendif Player files at <head/>

<link rel="stylesheet" href="http://mysite.com/yendifplayer/yendifplayer.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://mysite.com/yendifplayer/yendifplayer.js"></script>

This is intended to ensure that all necessary file are loaded properly.

Note : The Yendif Player jQuery plugin demands jQuery v1.7.1+ to work.

Initialize Yendif Player

You can go for any of the following two ways to initialize Yendif Player:

  1. Auto installation
  2. Manual installation

Auto installation

You simply need to use the standard HTML5 <audio> or <video> element. Use a DIV container to wrap the element. Keep "yendifplayer" as the class name.

<div class="yendifplayer">
    <source type="video/mp4" src="http://mysite.com/video.mp4">

Yendif Player uses HTML5 media. However, it can use Flash if the previous option is not supported. This is the simplest method you can use to initialize the video player; however you can use various other methods for this purpose.

Manual installation

At times, you may have to use a class name other than “yendifplayer”. In such situations, you need to load the plugin manually for your particular class name. The following example can give you an idea of such cases:

<div class="player">
    <source type="video/mp4" src="http://mysite.com/video.mp4">
    <source type="video/webm" src="http://mysite.com/video.webm">    
    <source type="video/ogg" src="http://mysite.com/video.ogv">
// run script after document is ready $(function () { // install yendifplayer to an element with CSS class "player" $(".player").yendifplayer(); });

Dynamically loaded

If your web page or application loads the media dynamically, so that it may not exist when the page loads, you'll want to manually set up the player. To do this, just write an empty DIV element in where you need the player and add some javascript.

In this following example, we add an empty container with an unique ID "player". Next, run the following javascript some time after the yendifplayer.js javascript library has loaded.

// ensure DOM is ready
$(function () {
  // this will install yendifplayer into an element with id="player"
  $("#player").yendifplayer ({
      mp4:  "http://mydomain.org/video.mp4",
      webm: "http://mydomain.org/video.webm",
      ogg:  "http://mydomain.org/video.ogv" 

<!-- empty container element with unique id="player" -->
<div id="player"></div>

We hope you understand clearly how you can install Yendif Player with standard configuration. The following chapter will explain how you can configure your video player according to your needs.


Tired of YouTube Deprecated content? Get the Pro-Version and get a powerful HTML5 YendifPlayer to avoid unwanted content and master your player.