Zorn/docs/milieu.mdx

---
Title: Milieu
Type: Document
---

import {Prism} from "@astrojs/prism"
import {Zorn} from "@minpluto/zorn"


<Zorn
    PlayerName="nameit_whatever_you_want"
    Title="Islandia"
    Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
    Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"
    Milieu
    Whitelabel
    BigPlayButton
    ShowFullscreen={false}
>
    <slot slot="menu">
        <div id="settings" class="vc-menu">
            <button>Stats for Geeks</button>
            <hr/>
            <button>Open Video URL <i class="iconoir-arrow-up-right"></i></button>
            <button>Download <i class="iconoir-arrow-up-right"></i></button>
            <button>Embed <i class="iconoir-arrow-up-right"></i></button>
            <hr/>
            <button id="has-switch">Milieu <i class="iconoir-switch-off"></i></button>
            <button>Close Captions <i class="iconoir-nav-arrow-right"></i></button>
            <button onclick="PlayerMenu_Quality()">Quality <i class="iconoir-nav-arrow-right"></i></button>
        </div>
        <div id="quality-changer" class="vc-menu">
            <button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><i class="iconoir-nav-arrow-left"></i> Back</span></button>
            <button>1080p</button>
            <button>720p</button>
            <button>360p</button>
        </div>
    </slot>
</Zorn>

The Milieu option is an attempt to copy YouTube's ambient player feature. Where it adds a blurry glow around the player. This uses two `<canvas/>`s behind the player to make a smooth transition when it changes.

<Prism lang="jsx" code={`<Zorn Milieu/>`}/>