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.
Sample Code – Click to expand / collapse
<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.
Sample Code – Click to expand / collapse
<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.
Sample Code – Click to expand / collapse
<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
