1.0.3 • Published 2 years ago
sl-floating-video v1.0.3
Floating Video Component
See a video on a floating player like this: Demo
The floating video is a iframe container so the video link should be a embed
🚀 Get started
Install the NPM Package
npm i sl-floating-videoAdd in the head of the index.html of your project:
<script src="node_modules/sl-floating-video/dist/bundle.js"></script>Or Use CDN
Add in the head of the index.html of your project:
<script src="https://unpkg.com/sl-floating-video/dist/bundle.js"></script>✨ Features
- You can move it if you put the cursor in the area:
- You can delete it if you click in the "x":
- You can resize it if you drag this area:
🛠️ How to use it
Include in your template the next tag:
<sl-floating-video></sl-floating-video>Later, in your Javascript, get the element and you can set the next variables:
<script>
const fv = document.querySelector("sl-floating-video");
fv.src = "https://www.youtube.com/embed/QgD5A2v3cp0" /*video embed link*/;
fv.posVertical = "bottom" /*the bottom position is default*/;
fv.posHorizontal = "right" /*the right position is default*/;
</script>🔥 Starter template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Floating Video Test</title>
<!-- Use CDN -->
<script src="https://unpkg.com/sl-floating-video/dist/bundle.js"></script>
<!-- Use NPM Package -->
<!--
<script src="node_modules/sl-floating-video/dist/bundle.js"></script>
-->
<style>
body {
margin: 0;
}
.container {
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
}
.p3 {
padding: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="p3">
<button
data-floating-video-src="https://www.youtube.com/embed/QgD5A2v3cp0"
>
Test Floating Video 1
</button>
</div>
<div class="p3">
<button
data-floating-video-src="https://www.youtube.com/embed/5qap5aO4i9A"
>
Test Floating Video 2
</button>
</div>
</div>
<sl-floating-video></sl-floating-video>
<script>
const fv = document.querySelector("sl-floating-video");
const fvElements = document.querySelectorAll("[data-floating-video-src]");
fvElements.forEach((fvElement) => {
fvElement.addEventListener("click", function (e) {
const src = e.target.dataset.floatingVideoSrc;
fv.src = src;
});
});
</script>
</body>
</html>🔧 Custom position
For default, the floating video is the bottom and the right of the screen. You can set the position:
<script>
const fv = document.querySelector("sl-floating-video");
fv.posVertical =
"top"; /*If you want the floating video in the top of the screen */
fv.posVertical =
"bottom"; /* If you want the floating video in the bottom of the screen */
fv.posHorizontal =
"left"; /* If you want the floating video in the left of the screen */
fv.posHorizontal =
"right"; /* If you want the floating video in the right of the screen */
</script>Example template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Floating Video Test</title>
<script src="https://unpkg.com/sl-floating-video/dist/bundle.js"></script>
<style>
body {
margin: 0;
}
.container {
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
}
.p3 {
padding: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="p3">
<button
data-floating-video-src="https://www.youtube.com/embed/QgD5A2v3cp0"
>
Test Floating Video 1
</button>
</div>
<div class="p3">
<button
data-floating-video-src="https://www.youtube.com/embed/5qap5aO4i9A"
>
Test Floating Video 2
</button>
</div>
</div>
<sl-floating-video></sl-floating-video>
<script>
const fv = document.querySelector("sl-floating-video");
/* Custom Position */
fv.posVertical = "top";
fv.posHorizontal = "left";
const fvElements = document.querySelectorAll("[data-floating-video-src]");
fvElements.forEach((fvElement) => {
fvElement.addEventListener("click", function (e) {
const src = e.target.dataset.floatingVideoSrc;
fv.src = src;
});
});
</script>
</body>
</html>And would look like this:
