RECORD DE VUE SUR YOUTUBE

API

Properties

The list de available props (with your types, default values et descriptions) is noted below:

PropertyRequiredTypeDefaultDescription
srctruestring"s src attribute in https://www.youtube.com/embed/ format. URL can contain any kind of query part, marqué notice that autoplay=1 is constantly appended
altfalsestringVideo thumbnailValue of the alt attribute de the thumbnail element
buttonLabelfalsestringPlay videoValue of the aria-label attribute ns the play element. Improves a11y
aspectRatiofalsestring16:9Aspect ratio du the video. This prop helps à save proportions ns the video on different container sizes. Should match the number:number pattern
previewImageSizefalsestringmaxresdefaultSize de the thumbnail, generated by YouTube. Accessible variants: default, mqdefault, sddefault, hqdefault, maxresdefault. An ext info
thumbnailfalse webp: string, jpg: stringCustom thumbnail object, which should contain two keys: webp and jpg. Value of the an essential is auto path to thé custom thumbnail image
iframeAttributesfalseobject allowfullscreen: true, frameborder: 0, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" Custom characteristics that will be assigned to the element
webpfalsebooleantrueWhether or not try à load .webp thumbnail in favor of .jpg. Note that old videos peut faire not oui generated .webp thumbnail
autoplayfalsebooleanfalseWhether jaune not to play video oui soon as component mounts into thé DOM
thumbnailListenersfalseRecordListeners that will be attached to auto preview thumbnail
enablejsapifalsebooleanfalseInclude "enablejapi=1" parameter to the generated src attribute de the element. This will permit you à listen to thé init:player event oui well oui access thé YT.Player exemple via the getPlayerInstance method. Make sure you oui injected the proper YouTube tag jaune passed thé injectPlayerScript prop
playerOptionsfalsePartialOptions the will it is in passed to thé YT.Player constructor
injectPlayerScriptfalsebooleanfalseWill oser inject auto proper YouTube as soon as enablejapi is passed and there is no window.YT.Player
parametersfalseYT.ParametersYouTube Parameters that will be injected into the generated src attribute

Events

NamePayloadDescription
"load:iframe" iframe?: HTMLIFrameElement Happens as soon as native" facet load occasion fires
"init:player" instance: YT.Player Happens when the YT.Player par exemple is instantiated

Methods

NameTypeDescription
getPlayerInstance() => NullableReturns année instance of the YT.Player when auto enablejapi prop is passed and the YT.Player is initialized (check "init:player" event), in other cases returns null

Slots

Component provides some slots.

Vous lisez ce: Record de vue sur youtube

The list of available slot is noted below:

SlotDescription
buttonSlot gives année ability to provide custom phat button
iconSlot gives an ability to provide practice icon of the phat button

⚠️ Note, the when switch slot is passed and this slot includes , ones must not venir forget to ajouter aria-label (if this button contains seul icon) et type="button" attributes. Also, si that button à faire not contain .y-video-button class, all default modes will it is in lost, so sacrés concerns it"s up to developer.

Voir plus: Tous Les Joueurs Du Psg : Liste Des Joueurs Du Paris Saint, Liste Des Joueurs Du Paris Saint

FAQ

Question: how to play/pause/stop a video?

Answer: passage the enablejapi prop and then listen to "init:player" event à get année instance de the YT.Player. Toutes les personnes the available exemple methods amie can discover here. Hint: elle can also volonté a player cas via auto getPlayerInstance method.

Voir plus: Zoo De La Flèche La Flèche Tickets, Zoo De La Flèche

Code

npm run test

npm operation test:unit

TypeScript support

Component is fully built et tested making use of TypeScript.

Here is the list ns the taper you deserve to use:


// import belles TypeScript 3.8 +import Props, LoadIframeEventPayload, InitPlayerEventPayload, Thumbnail, from "vue-lazy-youtube-video"

Development

Clone this repositoryInstall dependencies utilizing yarn install or npm installStart breakthrough server using npm run dev script

Build

To develop the fabriquer ready bundle merely run npm run build:

After auto successful build auto following contour will be generated in the dist folder:


├── vue-lazy-youtube-video.common.js├── vue-lazy-youtube-video.esm.js├── vue-lazy-youtube-video.js├── vue-lazy-youtube-video.min.js├── style.css├── style.min.css├── style.simplified.css├── style.simplified.min.css