Vidage
Your solution to full-screen background video & image combined.
Install / Use
/learn @nonwip/VidageREADME
Vidage
This JS module will treat video as a background. It will determine when to hide/show & pause/play the video. Touch devices and/or smaller devices with width of 34em will display image provided as fallback.
Installation (pick one)
npm i @dvlden/vidagepnpm i @dvlden/vidageyarn add @dvlden/vidage
CDN (pick one)
Usage
Preferred way...
Add base structure and replace video source paths
<div class="vidage">
<video id="vidage" class="vidage-video" preload="metadata" loop autoplay muted>
<source src="videos/bg.webm" type="video/webm">
<source src="videos/bg.mp4" type="video/mp4">
</video>
</div>
Setup and import required styles
// set the fallback-cover image
$vdg-fallback-image: url('../images/fallback.jpg');
// import package
@import '~vidage/src/styles/vidage';
Import the JS module and create new instance
import Vidage from 'vidage'
new Vidage('#vidage')
Old fashioned way...
Below you will find complete
htmlexample...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="dist/vidage.css">
<style>
/* Override the cover image. Set the path to the actual image... */
.vidage::before {
background-image: url('images/fallback.jpg');
}
</style>
</head>
<body>
<div class="vidage">
<video id="vidage" class="vidage-video" preload="metadata" loop autoplay muted>
<source src="videos/bg.webm" type="video/webm">
<source src="videos/bg.mp4" type="video/mp4">
</video>
</div>
<!-- START: Rest of your site content -->
...
<!-- END: Rest of your site content -->
<script src="dist/vidage.js"></script>
<script>
new Vidage('#vidage')
</script>
</body>
</html>
JS Arguments
Instance of Vidage accepts two arguments. First argument is the actual selector of the video, that instance will control. Second argument is the actual object for the options.
| Argument | Required Type |
| ---------- | ------------- |
| selector | string/node |
| options | object |
| Key | Default Value | Required Type |
| -------------- | -------------- | ------------- |
| helperClass | vidage-ready | string |
| videoRemoval | false | bool |
SCSS Variables
| Variable | Default Value |
| --------------------- | ---------------------------- |
| $vdg-fallback-image | url('../images/cover.jpg') |
Browser Support
Yet to be determined. All modern browsers should be alright.
Related Skills
qqbot-channel
343.1kQQ 频道管理技能。查询频道列表、子频道、成员、发帖、公告、日程等操作。使用 qqbot_channel_api 工具代理 QQ 开放平台 HTTP 接口，自动处理 Token 鉴权。当用户需要查看频道、管理子频道、查询成员、发布帖子/公告/日程时使用。
docs-writer
99.7k`docs-writer` skill instructions As an expert technical writer and editor for the Gemini CLI project, you produce accurate, clear, and consistent documentation. When asked to write, edit, or revie
model-usage
343.1kUse CodexBar CLI local cost usage to summarize per-model usage for Codex or Claude, including the current (most recent) model or a full model breakdown. Trigger when asked for model-level usage/cost data from codexbar, or when you need a scriptable per-model summary from codexbar cost JSON.
ddd
Guía de Principios DDD para el Proyecto > 📚 Documento Complementario : Este documento define los principios y reglas de DDD. Para ver templates de código, ejemplos detallados y guías paso
