---
// Components
import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
import Switcher from '@components/Switcher.astro'
---

<Zorn
	PlayerName="nameit_whatever_you_want"
	Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
	Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
	Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
	CustomControls
	VideoAttributes="muted"
	AudioAttributes=""
/>

<Switcher/>
<style is:inline>a[href="/with-separate-audio"] {background: white !important;color: black !important;}</style>

<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
	<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
	<p>This demo is using the video source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
	<p>This demo is using the audio source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
</Info>

<style is:global>
body {
	background: #010101;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	a {
		color: white;
	}
}
.video-container {
  position: relative;
  margin: 40px;
}
</style>