vue-pre-youtube v0.2.0

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.

Example

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

Note 1 Function fnStart:

function (mode, setFramesInterval) {
    if (mode !== modeTypes.constant) {
        setFramesInterval();
    }
}

Note 2 Function fnStop:

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

Eents

Recipe for removing the 16×9 Bars

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

<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