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

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	Note 1	Start animation function frame
fnStop	Function	Note 2	Stop animation function frame

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

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:

<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