%%[[if edit]]%%
	<p><strong>Thank you for using the Multi Player stack!</strong> This single stack is able to embed media from YouTube, Vimeo or an MP3 (audio) or MP4 (video) source. To start, select the preferred media source in the stack settings and configure it. You can also adjust some style settings and localisations for the player.</p>
	%[if %("%id=video_source%" == "mp3")% ]%
	<p>Enter the MP3 link in the stack settings. OGG is optional but recommended for better playback compatibility in older web browsers.</p>
	%[endif]%
	%[if %("%id=video_source%" == "mp4")% ]%
	<p>Enter the MP4 link in the stack settings. WebM is optional but recommended for better playback compatibility in older web browsers. Optionally you can add a caption / subtitle file too, in VTT format.</p>
	%[endif]%
	%[if %("%id=video_source%" == "vimeo")% ]%
	<p>On the assumption the video had the URL <strong>https://player.vimeo.com/video/147865858</strong> the video ID would be <strong>147865858</strong></p>
	%[endif]%
	%[if %("%id=video_source%" == "youtube")% ]%
	<p>On the assumption the video had the URL <strong>https://www.youtube.com/watch?v=bTqVqk7FSmY</strong> the video ID would be <strong>bTqVqk7FSmY</strong></p>
	%[endif]%
%%[[endif]]%%

%%[[if !edit]]%% 
	%[if %("%id=video_source%" == "mp3")% ]%
		<audio controls>
			%[if %("%id=mp3_link -href%" != "")% ]%<source src="%id=mp3_link -href%" type="audio/mp3">%[endif]%
			%[if %("%id=ogg_link -href%" != "")% ]%<source src="%id=ogg_link -href%" type="audio/ogg">%[endif]%
		</audio>
	%[endif]%
	
	%[if %("%id=video_source%" == "mp4")% ]%
		<video poster="%id=mp4_poster%" controls>
			%[if %("%id=mp4_link -href%" != "")% ]%<source src="%id=mp4_link -href%" type="video/mp4">%[endif]%
			%[if %("%id=webm_link -href%" != "")% ]%<source src="%id=webm_link -href%" type="video/webm">%[endif]%
			%[if %("%id=enable_captions%" == "true")% ]%<track kind="captions" label="%id=caption_title%" src="%id=caption_link -href%" srclang="%id=caption_lang%" default>%[endif]%
		</video>
	%[endif]%
	
	%[if %("%id=video_source%" == "vimeo")% ]%
		<div data-type="vimeo" data-video-id="%id=vimeo_id%"></div>
	%[endif]%
	
	%[if %("%id=video_source%" == "youtube")% ]%
		<div data-type="youtube" data-video-id="%id=youtube_id%"></div>
	%[endif]%


<script>
plyr.setup('#%id%', {
	autoplay: %id=autoplay%,
	seekTime: %id=seek_time%,
	volume: %id=default_volume%,
	clickToPlay: %id=clicktoplay%,
	hideControls: %id=hide_controls%,
	iconUrl: '%assetPath%/multiplayer-assets/icons.svg',
	i18n: {
		restart:            "%id=restart%",
		rewind:             "%id=rewind%",
		play:               "%id=play%",
		pause:              "%id=pause%",
		forward:            "%id=forward%",
		buffered:           "%id=buffered%",
		currentTime:        "%id=current_time%",
		duration:           "%id=duration%",
		volume:             "%id=volume%",
		toggleMute:         "%id=toggle_mute%",
		toggleCaptions:     "%id=toggle_captions%",
		toggleFullscreen:   "%id=toggle_fullscreen%"
	},
	tooltips: { 
		controls: %id=tooltips%,
		seek: true
	}
});
</script>
%%[[endif]]%%