Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Embed a YouTube and Vimeo player easily and lazy load the video to save resources and reduces initial load size.

License

NotificationsYou must be signed in to change notification settings

seeratawan01/vue-lazytube

Repository files navigation

Embed a YouTube or Vimeo player easily and lazy load the video to save resources and reduces initial load size.Useful when performance and page size is important or for sites with many embedded videos.

For a simple example page with 10 videos, vue-lazytube will reduce loadtime by 7x and memory usage by 2-3x.

Demo online |Tutorial |Sponsor

GitHub releaseLicensedownloadsfilesize

Table of Content

Features

  • reduces initial load size by ~1.1 MB per video
  • fully responsive and customizable throughprops
  • provides methods to control (play,stop,pause andreset) embedded videos
  • provide options to set up custom title and preview of embedded videos
  • platform supported: Youtube and Vimeo

Demo

view vue-lazytube

Installation

With a build systems

$ npm install --save vue-lazytube
$ yarn add vue-lazytube

To make the plugin available globally

In yourmain.js:

importLazyTubefrom"vue-lazytube";Vue.use(LazyTube);

To include only in specific components

import{LazyYoutube,LazyVimeo}from"vue-lazytube";exportdefault{name:'YourComponent',components:{        LazyYoutube,        LazyVimeo},}

Usage

<template>    <!-- Youtube Embed --><LazyYoutubesrc="https://www.youtube.com/watch?v=TcMBFSGVi1c"/>    <!-- Vimeo Embed --><LazyVimeosrc="https://player.vimeo.com/video/64654583"/></template>

API

Props

NameTypeDefault ValueDescriptionRequired
srcString``To load video and iframe, should be Youtube/Vimeo video link.true
aspectRatioString16:9Maintaining the aspect ratio of video, perfect for responsively handling video embeds based on the width of the parent, should be in*:* format. e.g,1:1,4:3,16:9 and21:9.false
maxWidthString560pxDefines maximum width of video container.false
showTitleBooleantrueDefines whether to show video title on top.false
autoplayBooleanfalseDefines whether to load the iframe as the page loads(not recommended)false
thumbnailQualityStringstandardDefines the quality of thumbnail, should be one of the followingdefault,medium,high,standard ormaxresfalse
iframeClassStringly-iframeDefines the class on iframe elementfalse
customTitleString``Defines the custom title of the videofalse
customThumbnailString``Defines the custom thumbnail image link of the videofalse

Slots

This Component provides some slots. You can use the named slot to render custom play button and loader:

SlotDescription
buttonSlot gives an ability to provide custom play button
loaderSlot gives an ability to provide custom loader

Methods

These methods let you control the player using JavaScript, so you can perform the operations likeplay,stop,pause andreset.

The user's browser must support the HTML5 postMessage feature. Most modern browsers support postMessage.

NameTypeUsage
playVideofunctionthis.$refs["lazyVideo"]['playVideo']()
stopVideofunctionthis.$refs["lazyVideo"]['stopVideo']()
pauseVideofunctionthis.$refs["lazyVideo"]['pauseVideo']()
resetViewfunctionthis.$refs["lazyVideo"]['resetView']()

Note: Must ReplacelazyVideo with yourref.

Example

<template><LazyYoutuberef="lazyVideo"src="https://www.youtube.com/watch?v=TcMBFSGVi1c"/><button @click="handleClick('playVideo')">Play</button><button @click="handleClick('stopVideo')">Stop</button><button @click="handleClick('pauseVideo')">Pause</button><button @click="handleClick('resetView')">Reset</button></template><script>exportdefault{name:"YourComponent",components:{},methods:{handleClick(event){this.$refs["lazyVideo"][event]();},},};</script>

Open Source License

You may use it under the terms of theMIT Licenses

Buy Me a Coffee

Support me on Patreon

About

Embed a YouTube and Vimeo player easily and lazy load the video to save resources and reduces initial load size.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

    Contributors3

    •  
    •  
    •  
    [8]ページ先頭
    ©2009-2025 Movatter.jp