Forum Discussion
Embed Tiktok video on a SharePoint Online page
- Aug 11, 2023
KevHoustonInsight I just tried embedding video on our SharePoint site and observed same behavior: a thumbnail of the video will briefly appear then change to the message 'ticktok refused to connect'.
Also, there is an error like below in the browser console: Refused to display 'https://www.tiktok.com' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'
I think this response header is set at Tiktok end and hence not really SharePoint issue. Check this thread for more information about this error: Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'
You can check if there are any other ways to embed the Tiktok URLs to any web site. I tried using this iframe code:
<iframe src="https://www.tiktok.com/@bob_ross720/video/7246541601252625690" title="Tiktok Video" width="100%" height="600"></iframe>Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
Thanks for the response.
Yes, it is a public URL without being signed into TikTok. HTML field security allowed for the domain.
When using the embed webpart, a thumbnail of the video will briefly appear then change to the message 'ticktok refused to connect'.
KevHoustonInsight Then maybe the issue is at Tiktok end and not at SharePoint end. Maybe Tiktok has some video URL sharing policies. Do you get any errors in browser console (developer tools)?
Can you share the video URL with us? I will try adding the URL in our SharePoint site. However, I am not completely sure if the video will work for me as I am from India & Tiktok is banned here currently. But, I will try and see if it works by embedding to SharePoint.
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
- KevHoustonInsightAug 11, 2023Copper ContributorI've selected a random Tiktok video. Here is the complete embed code supplied by Tiktok
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@bob_ross720/video/7246541601252625690" data-video-id="7246541601252625690" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@bob_ross720" href="https://www.tiktok.com/@bob_ross720?refer=embed">@bob_ross720</a> <a title="bobross" target="_blank" href="https://www.tiktok.com/tag/bobross?refer=embed">#bobross</a> <a title="bobrosspainting" target="_blank" href="https://www.tiktok.com/tag/bobrosspainting?refer=embed">#bobrosspainting</a> <a title="bobrossinspired" target="_blank" href="https://www.tiktok.com/tag/bobrossinspired?refer=embed">#bobrossinspired</a> <a title="bobrossasmr" target="_blank" href="https://www.tiktok.com/tag/bobrossasmr?refer=embed">#bobrossasmr</a> <a title="asmr" target="_blank" href="https://www.tiktok.com/tag/asmr?refer=embed">#asmr</a> <a title="fyp" target="_blank" href="https://www.tiktok.com/tag/fyp?refer=embed">#fyp</a> <a title="fypシ" target="_blank" href="https://www.tiktok.com/tag/fyp%E3%82%B7?refer=embed">#fypシ</a> <a title="foryou" target="_blank" href="https://www.tiktok.com/tag/foryou?refer=embed">#foryou</a> <a title="foryoupage" target="_blank" href="https://www.tiktok.com/tag/foryoupage?refer=embed">#foryoupage</a> <a title="viral" target="_blank" href="https://www.tiktok.com/tag/viral?refer=embed">#viral</a> <a title="trending" target="_blank" href="https://www.tiktok.com/tag/trending?refer=embed">#trending</a> <a title="paint" target="_blank" href="https://www.tiktok.com/tag/paint?refer=embed">#paint</a> <a title="painting" target="_blank" href="https://www.tiktok.com/tag/painting?refer=embed">#painting</a> <a title="art" target="_blank" href="https://www.tiktok.com/tag/art?refer=embed">#art</a> <a title="artist" target="_blank" href="https://www.tiktok.com/tag/artist?refer=embed">#artist</a> <a title="artistsoftiktok" target="_blank" href="https://www.tiktok.com/tag/artistsoftiktok?refer=embed">#artistsoftiktok</a> <a title="love" target="_blank" href="https://www.tiktok.com/tag/love?refer=embed">#love</a> <a title="peace" target="_blank" href="https://www.tiktok.com/tag/peace?refer=embed">#peace</a> <a title="creative" target="_blank" href="https://www.tiktok.com/tag/creative?refer=embed">#creative</a> <a title="creativity" target="_blank" href="https://www.tiktok.com/tag/creativity?refer=embed">#creativity</a> <a title="calmness" target="_blank" href="https://www.tiktok.com/tag/calmness?refer=embed">#calmness</a> <a title="calm" target="_blank" href="https://www.tiktok.com/tag/calm?refer=embed">#calm</a> <a title="satisfying" target="_blank" href="https://www.tiktok.com/tag/satisfying?refer=embed">#satisfying</a> <a title="sleep" target="_blank" href="https://www.tiktok.com/tag/sleep?refer=embed">#sleep</a> <a title="sleepwell" target="_blank" href="https://www.tiktok.com/tag/sleepwell?refer=embed">#sleepwell</a> <a title="relax" target="_blank" href="https://www.tiktok.com/tag/relax?refer=embed">#relax</a> <a title="relaxing" target="_blank" href="https://www.tiktok.com/tag/relaxing?refer=embed">#relaxing</a> <a title="like" target="_blank" href="https://www.tiktok.com/tag/like?refer=embed">#like</a> <a title="share" target="_blank" href="https://www.tiktok.com/tag/share?refer=embed">#share</a> <a title="comment" target="_blank" href="https://www.tiktok.com/tag/comment?refer=embed">#comment</a> <a title="save" target="_blank" href="https://www.tiktok.com/tag/save?refer=embed">#save</a> <a title="follow" target="_blank" href="https://www.tiktok.com/tag/follow?refer=embed">#follow</a> <a title="followformorevideo" target="_blank" href="https://www.tiktok.com/tag/followformorevideo?refer=embed">#followformorevideo</a> <a target="_blank" title="♬ original sound - Bob Ross" href="https://www.tiktok.com/music/original-sound-7246541544017496859?refer=embed">♬ original sound - Bob Ross</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>- ganeshsanapAug 11, 2023MVP
KevHoustonInsight I just tried embedding video on our SharePoint site and observed same behavior: a thumbnail of the video will briefly appear then change to the message 'ticktok refused to connect'.
Also, there is an error like below in the browser console: Refused to display 'https://www.tiktok.com' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'
I think this response header is set at Tiktok end and hence not really SharePoint issue. Check this thread for more information about this error: Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'
You can check if there are any other ways to embed the Tiktok URLs to any web site. I tried using this iframe code:
<iframe src="https://www.tiktok.com/@bob_ross720/video/7246541601252625690" title="Tiktok Video" width="100%" height="600"></iframe>Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
- pookieOct 18, 2024Copper Contributor
Thanks for Sharing this page!