How do I embed TikTok Videos?

Help
, , ,
1

I used the embed link that TikTok provides but it does not preview the video it just gives a link to the user account.
I’m wasn’t sure if it was in md format so I pasted the embed info into a HTML to md converter but same thing happened.
I have lots of TikToks to organize so I’m trying to make a template to import these and manually set tags for each.
Any help is appreciated

2

It would help if you could share such a link so that the people who see the post can try it out.

3 
<iframe 
src="TIKTOK VIDEO URL" scrolling="no" 
style="height: 600px; border: 0px none; width: 550px; margin-top: -55px; margin-left: 5px; 
margin-right: 0px; ">
</iframe>

Seems to work ok, getting the url for the video via share/copy link rather than the embed option. Extra stuff gets added underneath, which is a bit annoying… How to Embed Tik Tok Videos Inside a html Web Page / WordPress / CMS - We Need Website

1 Like
4

Thank you for the code/tip!
This will work for now, I wonder if they’ll allow more customization with embedding in the future so no extra space around the video in the player.

5

I am referring to any TikTok generated link.
I’ll include share link as well as embed code below.
URL link:
https://www.tiktok.com/@littleqb/video/6933443770679610629?sender_device=pc&sender_web_id=6926592317659874822&is_from_webapp=v2&is_copy_url=0
Embed Link:
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@littleqb/video/6933443770679610629" data-video-id="6933443770679610629" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@littleqb" href="https://www.tiktok.com/@littleqb">@littleqb</a> <p>The loudest bird ever! 🕊 <a title="qbfax" target="_blank" href="https://www.tiktok.com/tag/qbfax">#qbfax</a> <a title="todayilearned" target="_blank" href="https://www.tiktok.com/tag/todayilearned">#TodayILearned</a> <a title="bird" target="_blank" href="https://www.tiktok.com/tag/bird">#bird</a> <a title="nature" target="_blank" href="https://www.tiktok.com/tag/nature">#nature</a> <a title="littleqb" target="_blank" href="https://www.tiktok.com/tag/littleqb">#littleqb</a> 🕯</p> <a target="_blank" title="♬ original sound - 👈little qb👉" href="https://www.tiktok.com/music/original-sound-6933443683933096710">♬ original sound - 👈little qb👉</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>

6

You can pull the raw video link and it displays only the video in the browser
https://v16-web.tiktok.com/video/tos/useast2a/tos-useast2a-pve-0068/b765da14887a4bd0b16801af0bb4f530/?a=1988&br=1234&bt=617&cd=0%7C0%7C1&ch=0&cr=0&cs=0&cv=1&dr=0&ds=3&er=&expire=1614453057&l=20210227131043010189194163592556CC&lr=tiktok_m&mime_type=video_mp4&pl=0&policy=2&qs=0&rc=ajY6ajd3anc7MzMzaDczM0ApZTM8NTY5Z2Q4NzppOmU4NmdiLnBxaTBvaHBgLS1fMTZzczQzMmEwX19iLmJiXi8zLjM6Yw%3D%3D&signature=7997d35e0c5b9fd14e940c71ef46dea0&tk=tt_webid_v2&vl=&vr=
but that only shows a loading video in Obsidian. Perhaps Tiktok blocks it somehow.

7

where do you get this link I didn’t find it anywhere

8

I openend the inspector and copied it from the html element.

9

thanks bro but that link also didn’t work in my react app I had to embed a tiktok video but it doesn’t show on screen

10

hey bro I fund the way which worked You had to install IDM and go to tiktok video after that you see a blue bar of IDM click on it then a box will pop up and there is a URL section copy the URL and past it where you want and it work great

11

Thank you for the code and suggestion!
For the time being, this would suffice; but, I’m curious whether they will enable further flexibility with embedding in the future, such that there is no additional space around the video in the player.

14

Why are you on TikTok at all? :smiley:

15

use this, should work on browser and mobile. Only the video no browser around it:

<div style="max-width: 56vh;"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%; padding-top: 120px;"><iframe src="https://www.tiktok.com/embed/6992668750692584710" allow="fullscreen" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;"></iframe></div>

if you copy the link in the browser, the id past /video/<id> is after:

https://www.tiktok.com/@chxpel/video/6992668750692584710

https://www.tiktok.com/@chxpel/video/6992668750692584710?_d=secCgYIASAHKAESMgowqNapWkcwXXMUL8XirwKormCQYBK%2BSX94FpKmdd8b2scWQe6%2FHO8oZ8KP4kuUcXuuGgA%3D&checksum=f73b26369667cff1fb4c8cc490999ff372653c2ac7cbbf75c69d9b0d3219b9a8&language=en&preview_pb=0&sec_user_id=MS4wLjABAAAAODckTkRSfQcWlulXsfbY4CdFAU8RcrRMQ_3voWZ5YC5DQEedP_3dHTKhKc7QGcKu&share_app_id=1233&share_item_id=6992668750692584710&share_link_id=1E1EEEFF-C41C-4EFF-92D5-431665022972&source=h5_m&timestamp=1628135386&tt_from=more&u_code=daf673i1ik72mf&user_id=6786172559488287749&utm_campaign=client_share&utm_medium=ios&utm_source=more&_r=1

you can also just parse it out of a curl as well

curl https://vm.tiktok.com/ZMdwUhfAk/ | cut -d "." -f3 | cut -d "/" -f3
1 Like
16

Can another Tiktok platform do the same?