vid
vidage
npm i vidage
Deprecated!
Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
vid

vidage

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

by Nenad Novaković

1.0.1 (see all)License:MITTypeScript:Not Found
npm i 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)

  1. Download latest release
  2. git clone https://github.com/dvlden/vidage.git
  3. yarn add vidage
  4. npm i vidage

CDN (pick one)

  1. JSDelivr
  2. UNPKG

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.

ArgumentRequired Type
selectorstring/node
optionsobject
KeyDefault ValueRequired Type
helperClassvidage-readystring
videoRemovalfalsebool

SCSS Variables

VariableDefault Value
$vdg-fallback-imageurl('../images/cover.jpg')

Browser Support

Yet to be determined. All modern browsers should be alright.

Downloads/wk

89

GitHub Stars

1.6K

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

9

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.0.1
latest
2mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate