Sources

There are 3 types of sources supported out-of-the-box: images, HTML videos, and YouTube videos. To display such a source, pass its URL or path to the "sources" array prop.

Custom sources

With the "sources" prop you can also display custom content—such as a Vimeo video, Google map, etc. A custom source must be a Vue component.

<template>
<div>
	<button @click="toggler = !toggler">
		Open the lightbox.
	</button>

	<FsLightbox
		:toggler="toggler"
		:sources="[CustomSource]"
	/>
</div>
</template>

<script>
import FsLightbox from "fslightbox-vue";
import CustomSource from "./CustomSource.vue"

export default {
	components: { FsLightbox },
	data() {
		return {
			toggler: false
		}
	},
	created() {
		this.CustomSource = CustomSource;
	}
}
</script>

An example custom source (a Vimeo video):

<template>
<iframe
	src="https://player.vimeo.com/video/22439234"
	width="1920px"
	height="1080px"
	frameBorder="0"
	allow="autoplay; fullscreen"
	allowFullScreen
/>
</template>

How to set props of a custom source?