Embedplay TikTok Vue

Table of Contents

• Description
• Release Notes
• Installation
• Paradigm
• License
• Author

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.

Installation

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

npm install embedplay-tiktok-vue

Paradigm

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

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

For global usage (main.js)

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


createApp(App)
  .component('EmbedplayTikTokVue', EmbedplayTikTokVue) 
  .use(router) 
  .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.

License

MIT

• This package is distributed under the MIT License, which permits free use, modification, and distribution of the software.

Source: TikTok Developers

Author

Demjhon Silver