| Demos | Skewed

Skewed

Skewed demo source

Copy the code below to obtain your own standalone demo.

<head>
  <title>Flowplayer skewed</title>

  <!-- Flowplayer skin -->
  <link rel="stylesheet" href="https://releases.flowplayer.org/7.2.6/skin/skin.css">

  <style>
  .expose-wrap {
    perspective-origin: 70% 75%;
    perspective: 1000px;
  }

  /* the player container with class="exposed" */
  .exposed {
    box-shadow: 0 10px 40px -15px rgba(68, 68, 68, 0.5);
    border-radius: .3rem;
    transition: all .5s;
  }

  /* skew the player container in loading and paused state */
  .expose-wrap .exposed.is-loading,
  .expose-wrap .exposed.is-paused:not(.is-fullscreen) {
    transform: scale(0.6) rotateX(4deg) rotateY(-20deg) rotate(3deg);
    box-shadow: 0 30px 60px -10px rgba(68, 68, 68, 0.5);
    border-radius: .9rem;
  }
  .expose-wrap .exposed.is-loading .fp-header,
  .expose-wrap .exposed.is-paused:not(.is-fullscreen) .fp-header,
  .expose-wrap .exposed.is-loading .fp-controls,
  .expose-wrap .exposed.is-paused:not(.is-fullscreen) .fp-controls {
    display: none;
  }
  </style>

  <!-- Flowplayer core -->
  <script src="https://releases.flowplayer.org/7.2.6/commercial/flowplayer.min.js"></script>
  <!-- Flowplayer hlsjs plugin -->
  <script src="https://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>
</head>

<body>
  <figure id="expose" class="expose-wrap">
    <div class="exposed"></div>
  </figure>

  <script>
    flowplayer('#expose>.exposed', {
      key: '$77068834645103',
      aspectRatio: "16:9",
      clip: {
        hlsQualities: [-1, 1, 3, 6, 7],
        sources: [
          { type: 'application/x-mpegurl', src: 'https://edge.flowplayer.org/night1.m3u8' },
          { type: 'video/mp4', src: 'https://edge.flowplayer.org/night1.mp4' }
        ]
      }
    })
  </script>

</body>