Zorn Demo

General Usage #1 General Usage #2 Separated Audio Live Stream Milieu Effect Multiple Instances YouTube Blob Presentation

Upload and Preview

By Upload Your Own Media | Original Source

JavaScript Required

This web video player requires the use of JavaScript in order to function properly. Please enable JavaScript in your web browser.

Alternatively, you can use the native player instead by clicking "Open Native Player" in the bottom right corner of this player.

How to enable JavaScript

Open Native Player

.video-controls {display: none !important} .zorn-player-nojs { position: absolute; z-index: 20; width: calc(100% - 12%); height: calc(100% - 21%); backdrop-filter: blur(12px) brightness(0.25); top: 0; left: 0; border-radius: 12px; padding: 6%; font-size: 14px; .zp-nojs { display: flex; align-items: center; gap: 24px; h2, p {margin:6px 0} a, p { color: #aaa } svg { width: 48px; height: 48px; } } .zp-nojs-footer { position: absolute; bottom: 6%; display: flex; align-items: center; gap: 24px; font-size: 14px; img { width: 32px; } } summary { position: absolute; bottom: 6%; right: 6%; background: hsl(0, 0%, 100%, 0.25); padding: 6px 12px; border-radius: 6px; list-style: none; border: 2px hsl(0, 0%, 100%, 0.25) solid; font-size: 14px; cursor: pointer; animation: 1s GetAttention ease-in-out; } } @keyframes GetAttention { 0% {border-color: hsla(0, 0%, 100%, 0.75)} 25% {border-color: hsl(0, 0%, 100%, 0)} 50% {border-color: hsl(0, 0%, 100%, 0.75)} 75% {border-color: hsl(0, 0%, 100%, 0)} 100% {border-color: hsl(0, 0%, 100%, 0.25)} } .fallback-video-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; video { pointer-events: all !important; } }

Buffering...

--:-- --:--

Website Documentation Package Source Code