Availability Per Account Type

Trial

Lite

Pro

White Label

WL – Custom

Introduction

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">
  window.onload=function(){
    $('.flip').mouseover(function() {
      $(this).find('.card').addClass('flipped').mouseleave(function() {
        $(this).removeClass('flipped');
      });
        return false;
    });
  }
</script>
<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);}
</style>

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>
    <div class="face back">
      Player Embed Code Here
    </div>
  </div>
</div>

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>
    <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>
    </div>
  </div>
</div>

Options

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