A plugin that targets videos (of specified selectors) and replaces the browser's default controls with custom controls.
👀 Demo: ht-devx.github.io/VIDYO/demo
🛠️ Code playground: jsfiddle.net/ht_dev/vdL8061q
👷 Author: HT (@ ht-devx)
Preview:
Credits:
- play icon by IYAHICON
- pause icon by Chanut
- volume icon and mute icon by Bharat Icons
- font: Instrument Sans
Paste the following after <head>:
<!--✻✻✻✻✻✻ VIDYO (video plugin) by @ht-devx ✻✻✻✻✻✻-->
<link href="https://cdn.jsdelivr.net/gh/ht-devx/VIDYO/VIDYO.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/ht-devx/VIDYO/VIDYO.min.js"></script>Call VIDYO like so:
<script>
VIDYO({
video: "video",
volume: "75%"
})
</script>| Option name | Type | Details |
|---|---|---|
video |
string or array |
Your video's selector(s). Examples: ◍ "video"◍ document.querySelector("video")◍ ["video"]◍ document.querySelectorAll("video")◍ [".video-with-class", document.querySelectorAll(".video-with-another-class")] |
volume |
string or number |
Examples (string):◍ "0%" (silent)◍ "50%"◍ "100%" (full volume)Examples ( number):◍ 0 (silent)◍ 0.5 (half volume)◍ 1 (full volume) |
In terms of styling, feel free to edit or override VIDYO's CSS variables.
An exhaustive list of all CSS variables:
:root, :host {
--VIDYO-buttons-color:#fff;
--VIDYO-buttons-size:2rem;
--VIDYO-buttons-shadow-strength:10%;
--VIDYO-hover-speed:0.25s;
--VIDYO-slider-area-height:40px;
--VIDYO-slider-area-background:#000;
--VIDYO-slider-area-transparency:75%;
--VIDYO-slider-area-blur:0px;
--VIDYO-slider-area-side-padding:12px;
--VIDYO-slider-bar-width:69%;
--VIDYO-slider-bar-height:5px;
--VIDYO-slider-bar-color:#232323;
--VIDYO-slider-bar-roundness:5px;
--VIDYO-slider-bar-fill-color:#eee;
--VIDYO-slider-gaps:15px;
--VIDYO-knob-width:12px;
--VIDYO-knob-height:12px;
--VIDYO-knob-color:#fafafa;
--VIDYO-knob-roundness:100%;
--VIDYO-tiny-buttons-size:0.8rem;
--VIDYO-tiny-buttons-color:#efefef;
--VIDYO-time-color:#efefef;
--VIDYO-time-font-family:"Instrument Sans";
--VIDYO-time-font-size:0.8rem;
--VIDYO-volume-slider-bar-width:5px;
--VIDYO-volume-slider-bar-height:80px; /* % not allowed */
--VIDYO-volume-slider-bar-color:#232323;
--VIDYO-volume-slider-bar-roundness:5px;
--VIDYO-volume-slider-bar-fill-color:#8e8e8e;
--VIDYO-volume-slider-touch-padding:15px;
--VIDYO-volume-slider-fade-speed:0.3s;
--VIDYO-volume-slider-padding:12px;
--VIDYO-volume-knob-width:12px;
--VIDYO-volume-knob-height:12px;
--VIDYO-volume-knob-roundness:100%;
--VIDYO-volume-knob-color:#efefef;
}Please do not remove the credits, and link back to this repository page!
If you encounter any issues or have any questions, please contact me through either: