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 |
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
To install the Embedplay TikTok Vue, you can use the following npm command:
npm install embedplay-tiktok-vue<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><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>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>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.
MIT
- This package is distributed under the MIT License, which permits free use, modification, and distribution of the software.
Demjhon Silver