Zorn Demo

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

Islandia

By Vadim Sherbakov | 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; } }

Islandia

Buffering...

--:-- --:--

Website Documentation Package Source Code