nnx0r/vidage

JavaScriptdvlden.github.io/vidage/

Your solution to full-screen background video & image combined.

backgroundvideobackground-videohacktoberfest

주요 지표

스타 성장

스타

1.6k

포크

주간 성장

—

이슈

1.6k

7월 18일7월 19일7월 19일7월 19일7월 20일7월 20일7월 20일

아티팩트npmnpm install vidage

README

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/vidage
pnpm i @dvlden/vidage
yarn 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 html example...

<!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.