A Few Simple Steps to Perfectly Replicate Apple's Premium Product Video Demo

Scenario

Recently, Apple released the iPhone 5C and iPhone 5S. I watched the premium product video demo on the official website. Although I didn't immediately decide to sell a kidney to get one, I became interested in this product demo approach and decided to simulate it myself.

Principle

Use the video_bg_color parameter of the Polyv video player to set the player's background color to white, eliminating the black border. For example, video_bg_color=ffffff.
The Polyv player also has a parameter ban_bar_keep_play_btn, which hides the progress bar and leaves only the central play button.

Implementation

First, go to the Polyv backend, select a premium video player from the player settings. I chose the last one, the "Modern" style.
Then, uncheck the items in the right menu bar, and in the end screen settings, check "Return to beginning".
Now, prepare to copy and paste the video code into your website. In the flashvar value of the code, add two additional parameters: video_bg_color=ffffff&ban_ata_bar_keep_play_btn=on

<div class="overlay" id="video" onclick="hideme()">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; visibility: visible; padding-top: 77px;TEXT-ALIGN: center;">
        播放器代码放这里
    </div>
</div>

You also need to add a piece of CSS to the page:

<style type="text/css">
    .overlay{
        background-color:#fff;
        position:fixed;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
        z-index:1000;
        display:none;
    }
</style>

Finally, add a piece of JavaScript:

<script>
function showvideo(){
   document.getElementById("video").style.display="block";
}
function hideme(){
   document.getElementById("video").style.display="none";
}
</script>

That's it. When clicking a link or image, call showvideo to display a large video in the center of the page. Clicking on a blank area will hide the video.