Availability Per Account Type




White Label

WL – Custom


You will be able to use the Flip_Player_Card example to allow the end user to make a image or set of text flip like a playing card and have an EZWebPlayer video player on the other side.

Getting Started

Step 1. Place this script shown below in your website’s header tag. 

<script type="text/javascript" src="https://ezwp.tv/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
    $('.flip').mouseover(function() {
      $(this).find('.card').addClass('flipped').mouseleave(function() {
        return false;
<style type="text/css">
  .flip {-webkit-perspective: 800;width: 600px;height: 338px;position: relative;overflow: hidden;}
  .flip .card {width: 100%;height: 100%;-webkit-transform-style: preserve-3d;-webkit-transition: 0.5s;}
  .flip .card .face {width: 100%;height: 100%;position: absolute;-webkit-backface-visibility: hidden;z-index: 2;}
  .flip .card .front {position: absolute;z-index: 1;}
  .flip .card .back {-webkit-transform: rotatex(-180deg);}
  .flip .card.flipped {-webkit-transform: rotatex(-180deg);}

Step 2. Place this script in the body of your web page where you wish the player description to show up.

<div class="flip">
  <div class="card">
    <div class="face front">
      Player Image Code Here or Title and Description
    <div class="face back">
      Player Embed Code Here

Step 3. Log into your EZWebPlayer account and grab your players embed code. This will work with the Iframe and Javascript embed codes.

And replace the line from Step 2 that saysPlayer Embed Code Here with your player code and Player Image Code Here or Title and Description with your player’s Title / Description or an image of your players thumbnail.

<div class="flip">
  <div class="card">
    <div class="face front">
      <img src="http://domainhere.com/image_file_name.png" style="width:100%;"/>
    <div class="face back">
      <iframe src="http://ezwp.tv/iframe.htm?v=0000000&w=940&h=529" style="border-width:0;width:940px;height:529px" scrolling="no" allowFullScreen></iframe>


Flip Direction: Vertical – In the style tag use

  • .flip .card .back {-webkit-transform: rotatex(-180deg);}
  • .flip .card.flipped {-webkit-transform: rotatex(-180deg);}

Flip Direction: Horizontal – In the style tag use

  • .flip .card .back {-webkit-transform: rotatey(-180deg);}
  • .flip .card.flipped {-webkit-transform: rotatey(-180deg);}

Flip Speed – In the style tag look for

  • .flip .card {width: 100%;height: 100%;-webkit-transform-style: preserve-3d;-webkit-transition: 0.5s;border:solid 1px#000;}

Flip Size – In the style tag look for

  • .flip {-webkit-perspective: 800; width: 940px; height: 529px; position: relative;}

Resulting Player