# vue-pre-youtube

> A Vue.JS component for displaying and animating YouTube thumbnails

Latest version **0.2.0** (published 2019-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-pre-youtube
pnpm add vue-pre-youtube
yarn add vue-pre-youtube
bun add vue-pre-youtube
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2019-05-09 |
| First published | 2019-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | DarkRiDDeR |
| Maintainers | darkridder |
| Keywords | vue-pre-youtube, vue preview youtube |

## Links

- npm: https://www.npmjs.com/package/vue-pre-youtube
- Repository: https://github.com/DarkRiDDeR/vue-pre-youtube
- Homepage: https://github.com/DarkRiDDeR/vue-pre-youtube#readme
- Issues: https://github.com/DarkRiDDeR/vue-pre-youtube/issues
- npm.io page: https://npm.io/package/vue-pre-youtube

## Recent versions

- 0.2.0 (latest) — 2019-05-09
- 0.1.1 — 2019-05-08

## README

[![GitHub stars](https://img.shields.io/github/stars/DarkRiDDeR/vue-pre-youtube.svg?style=flat-square)](https://github.com/DarkRiDDeR/vue-pre-youtube/stargazers)
[![GitHub issues](https://img.shields.io/github/issues/DarkRiDDeR/vue-pre-youtube.svg?style=flat-square)](https://github.com/DarkRiDDeR/vue-pre-youtube/issues)
[![npm](https://img.shields.io/npm/v/vue-pre-youtube.svg?style=flat)](https://www.npmjs.com/package/vue-pre-youtube)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/DarkRiDDeR/vue-pre-youtube)


# Vue Pre Youtube
A Vue.JS component for displaying and  animating YouTube thumbnails

## Install
Install module using npm:

``npm install vue-pre-youtube``

or using yarn:

``yarn add vue-pre-youtube``

and import:

## Demo
See [demo](http://darkridder.github.io/vue-pre-youtube/).

## Example

```vue
import PreYoutube from "vue-pre-youtube";

<template>
    <div>
        <PreYoutube id="RK1K2bCg4J8" :interval="1000" />
    </div>
</template>

<script>
import PreYoutube from "vue-pre-youtube";

export default {
    components: {
        PreYoutube
    }
}
</script>

```

## Options

| Name        | Type     | Default                    | Description                                   |
|-------------|----------|----------------------------|-----------------------------------------------|
| id          | String   | -                          | Id of video in Youtube                        |
| interval    | Number   | 500                        | The number of milliseconds between frames     |
| mode        | Number   | hover                      | Image change mode                             |
| format      | String   | default                    | Image format type: size, resolition, bars     |
| initHandler | Boolean  | true                       | Initialize event handlers                     /
| src         | String   | ""                         | The path to the first picture preview         |
| imgClass    | String   | "pre-youtube"              | CSS class of image                            |
| alt         | String   | ""                         | "alt" attribute of image                      |
| title       | String   | ""                         | "title" attribute of image                    |
| fnStart     | Function | <a href="#f1">Note 1</a>   | Start animation function frame                |
| fnStop      | Function | <a href="#f1">Note 2</a>   | Stop animation function frame                 |


<a name="f1"></a> [Note 1] Function **fnStart**:
```javascript
function (mode, setFramesInterval) {
    if (mode !== modeTypes.constant) {
        setFramesInterval();
    }
}
```

<a name="f2"></a>[Note 2] Function **fnStop**:
```javascript
function (mode, clearFramesInterval) {
    if (mode !== modeTypes.constant) {
        clearFramesInterval();
    }
}
```

### Mode types

#### constant

Mode without frame animation
	
#### hover - default

Frame animation mode

**Caution!** This mode does not support setting the image format

### Format types

Some of the image formats add bars to the image  16×9.  The image is in a 4×3 aspect ratio (nearly square) yet the video it self is of a 16×9 aspect ratio (rectangular).  Because of this, black bars are added to the top and bottom of the 4×3 image where the 16×9 image leaves a void.

When a video is uploaded to YouTube, YouTube will generate 3 thumbnails and designates one of those as the default.  The owner of the video can choose one of the other 2 images as the default.  In addition, the owner can upload a custom thumbnail and use that as the default thumbnail.  In that scenario, images 1, 2, and 3 listed below are the three auto-generated images mentioned above, and image 0 would be the custom image uploaded (if set as default).

| Format     	| Size 	                                                                                               | Resolution       | 16×9 Bars | Default Image |
|---------------|------------------------------------------------------------------------------------------------------|------------------|-----------|---------------|
| 0             | 480x360                                                                                              | High             | Yes       | Yes           |
| 1             | 120x90                                                                                               | Low              | Yes       | No            |
| 2             | 120x90                                                                                               | Low              | Yes       | No            |
| 3             | 120x90                                                                                               | Low              | Yes       | No            |
| default       | 120x90                                                                                               | Low              | Yes       | Yes           |
| mqdefault 	| 320x180                                                                                              | Medium           | No        | Yes           |
| hqdefault 	| 480x360                                                                                              | High             | Yes       | Yes           |
| sddefault 	| 640x480                                                                                              | High             | Yes       | Yes           |
| maxresdefault | Matches the resolution of the uploaded video. **NOTE:** May not be available for non-highres videos. / Highest possible | No 	      | Yes           |
	
### Eents

| Name       | Description                                             |
|------------|---------------------------------------------------------|
| mouseenter | Mouseenter event that triggers an animation             |
| mouseleave | Mouseleave event that stops the animation               |

	
## Recipe for removing the 16×9 Bars

You can use CSS to crop off the top and bottom bars:

```html
<style>
    .not-bars {
        display: inline-block;
        overflow: hidden;
    }
    .not-bars img {
        margin: -9.375% 0;
    }
</style>
<div class="not-bars">
    <preyoutube id="RK1K2bCg4J8" mode="constant" format="hqdefault" />
</div>
```

# License
MIT

---
_Source: https://npm.io/package/vue-pre-youtube · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._