Perspective player effect

March 28, 2020

We have seen it on some website page and thought it will be nice to share how to achieve nice perspective effect for video player aligned right of the article text. The code is not player mechanism related, just few CSS3 rules and appropriate HTML responsive objects.

Tears of Steel

Tears of Steel (code-named Project Mango) is a short science fiction film by producer Ton Roosendaal and director/writer Ian Hubert. The movie was officially released online for viewing and download on September 26, 2012

Funded by the Blender Foundation, donations from the Blender community,the filmand any material made in the studio were released under the Creative Commons Attribution License. Filming was done in Amsterdam, the Netherlands. All visual effects, computer-generated content and compositing work was done within the Blender software package.

https://mango.blender.org/

Perspective effect does not require any change in player setup code. You need to have Nuevo plugin and one of skins of version 5.6.1 minimum. This version (plugin and skins) was tweaked to show controls correctly when player scaled through CSS transform.property.

You can only think of adding a small extra javascript code to pause video automatically when user click document' body outside of player. Let's start with css and code tutorial.

You need only 3 html objects and some CSS rules for it. Check css code below.

Code snippet

.pe-media {
   display: flex;
   max-width:1100px;
   text-align: left;
   margin: 0 auto;
  align-items: flex-start
}
.pe-media section {
   color: black;
   margin: 0 10% 3em 0; 
   flex: 1;
}
pe-media h2 {
  margin: 2em 0 .5em;
  font-weight: normal;
  font-size: 170%;
}
.pe-media aside {
   flex: 1.5;
}
@media (min-width: 900px) {
   .vjs-playing {
      transform: perspective(500px) translate(-8em, 3em) scale(1.6);
      box-shadow: -2em 0 3em 0em black;transition: transform .5s;
      overflow: visible!important;
   }
   .vjs-paused {
      transform: perspective(860px) rotateY(-20deg) translateX(-3em) scale(1.1); 
      transition: transform .4s;margin: 2em 0;
   }
}
@media (max-width: 900px) {
    .pe-media { 
      display: block 
   }
}

In order to use video player in our HTML first you need to load required components in standard way. Load player CSS in head section, load player and plugin(s) javascript in body section.

Now you are ready to buiild the HTML part of code with perspective player.

Code snippet

<div class="pe-media">
   <section>
      <h2>Optional article title</h2>
      <p>Article text</p>
   </section>
   <aside>
      <video style="width:100%" id="myplayer" class="video-js vjs-fluid vjs-default-skin"  poster="poster.jpg" controls preload playsinline>
         <source src="https:/path-to-video.mp4" type="video/mp4">
      </video>
   </aside>
</div>

Of course in the end you must initialize player.

Code snippet

<script>
   var player = videojs('myplayer');
   player.nuevo({ mousedisplay:false });
</script>

We have set Nuevo plugin option mousedisplay to false as it's not aligned properly for transformed player.

Finally you may initialize player with some extra javascript code to pause player and return to perspective view when document's body clicked outside of player.

Code snippet

<script>
   var player = videojs('myplayer');
   player.nuevo({ mousedisplay:false });
   document.body.onclick=function() {
      if (player.el().classList.contains("vjs-playing") && player.seeking()!=true ) player.pause();
   }
</script>