https://github.com/dvlden/vidage

Your solution to full-screen background video & image combined.
https://github.com/dvlden/vidage

background background-video hacktoberfest video

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/dvlden/vidage
• Owner: dvlden
• License: mit
• Created: 2016-06-17T04:42:11.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2022-10-06T15:08:56.000Z (almost 2 years ago)
• Last Synced: 2024-05-01T19:09:19.969Z (5 months ago)
• Topics: background, background-video, hacktoberfest, video
• Language: JavaScript
• Homepage: https://dvlden.github.io/vidage/
• Size: 5.14 MB
• Stars: 1,579
• Watchers: 37
• Forks: 70
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-github-repos - dvlden/vidage - Your solution to full-screen background video & image combined. (JavaScript)

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)

1. [JSDelivr](https://www.jsdelivr.com/package/npm/vidage?path=dist)

2. [UNPKG](https://unpkg.com/vidage@latest/dist/)

## Usage

Preferred way...

> Add base structure and replace video source paths

```html



  

    

    

  



```


> Setup and import required styles

```scss

// 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

```js

import Vidage from 'vidage'

new Vidage('#vidage')

```

---

Old fashioned way...

> Below you will find complete `html` example...

```html

  

  

    

    Document

    

    

      /* Override the cover image. Set the path to the actual image... */

      .vidage::before {

        background-image: url('images/fallback.jpg');

      }

    

  

  

    


      

        

        

      

    


    

    ...

    

    

    

      new Vidage('#vidage')

    

  

```

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