How to Simulate Apple's Premium Product Video Demonstration
Recently, Apple released the iPhone 5C and iPhone 5S. I watched the premium product video demonstration on the official website. Although I didn't immediately decide to sell a kidney to get one, I became interested in this product demonstration 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 all the checked items in the right-side menu bar. 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>
Place player code here
</div>
</div>
You also need to add a CSS section 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>
<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 an empty area hides the video.
