Embedplay-tiktok-vue NPM

Embedplay TikTok Vue

Package Size Downloads

Description

Read the Documentation - TikTok Developers

This package provides a flexible and easy way to integrate TikTok videos into your Vue application with customizable display options.

This Vue component template is designed to embed a TikTok video player using the EmbedplayTikTokVue component.

Framework	Supported versions
	3 & above

Release-notes

Major Changes:

v1.0.0

This Vue component renders a customizable TikTok player within an iframe, allowing users to embed TikTok posts directly into their applications.
The component supports a flexible border radius, allowing you to easily adjust the corner curvature of the iframe to fit your design needs.

Patch Changes:

v1.0.2

To emphasize the documentation for SFCs (single-file components), the Composition API, and the Options API.
v1.0.1
Removed "webpack-env" from the "types" array in compilerOptions of tsconfig.json

Installation

To install the Embedplay TikTok Vue, you can use the following npm command:

npm install embedplay-tiktok-vue

Paradigm

Using Single-File Components (SFCs) - Composition API

<script setup>
import ExampleComponent  from 'example-component';
</script>

Example 1

<script setup>
import EmbedplayTikTokVue  from 'embedplay-tiktok-vue';
</script>

<template>
  <div>
    <EmbedplayTikTokVue 
      postId="6718335390845095173" 
      :autoplay="false" 
      :controls="true" 
      :progressBar="true" 
      :playButton="true"
      :volumeControl="true" 
      :fullscreenButton="true" 
      :timestamp="true"
      :loop="false"
      :musicInfo="true"
      :description="false"
      :rel="true"
      :nativeContextMenu="false"
      :width="640" 
      :height="360"
    />
  </div>
</template>

Using Components (Options API)

<script>
import ExampleComponent  from 'example-component';
export default {
  components: {
    ExampleComponent
  }
};
</script>

Example 2

<script>
import EmbedplayTikTokVue  from 'embedplay-tiktok-vue';
export default {
  components: {
    EmbedplayTikTokVue
  }
};
</script>

<template>
  <div>
    <EmbedplayTikTokVue 
      postId="6718335390845095173" 
      :autoplay="false" 
      :controls="true" 
      :progressBar="true" 
      :playButton="true"
      :volumeControl="true" 
      :fullscreenButton="true" 
      :timestamp="true"
      :loop="false"
      :musicInfo="true"
      :description="false"
      :rel="true"
      :nativeContextMenu="false"
      :width="640" 
      :height="360"
    />
  </div>
</template>

You can also use a global declaration.(main.js)

import { createApp } from 'vue';
import App from './App.vue';
import EmbedplayTikTokVue from 'embedplay-tiktok-vue'; // Import global

createApp(App)
  .component('EmbedplayTikTokVue', EmbedplayTikTokVue) 
  .mount('#app');

If you choose global, you can use the code below:

<template>
    <EmbedplayTikTokVue 
      postId="6718335390845095173" 
      :autoplay="false" 
      :controls="true" 
      :progressBar="true" 
      :playButton="true"
      :volumeControl="true" 
      :fullscreenButton="true" 
      :timestamp="true"
      :loop="false"
      :musicInfo="true"
      :description="false"
      :rel="true"
      :nativeContextMenu="false"
      :width="640" 
      :height="360"
    />
</template>

Optional

You can set any number for the border radius parameter:

     :borderRadius="10" // You can set any number value.

Example:

    <EmbedplayTikTokVue 
      postId="6718335390845095173" 
      :autoplay="false" 
      :controls="true" 
      :progressBar="true" 
      :playButton="true"
      :volumeControl="true" 
      :fullscreenButton="true" 
      :timestamp="true"
      :loop="false"
      :musicInfo="true"
      :description="false"
      :rel="true"
      :nativeContextMenu="false"
      :width="640" 
      :height="360"
      :borderRadius="10"
    />

If you don't want to apply a border radius, simply remove the parameter.