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.
KevHoustonInsight Is this a public video URL? I mean can anyone access the video URL without any login to Tiktok?
If yes, you can use the Embed web part in SharePoint to embed the Tiktok video to SharePoint online modern experience pages.
Also, make sure you have added the video URL domain to HTML Field Security settings of your SharePoint site. More information & detailed steps at: Allow or restrict the ability to embed content on SharePoint pages
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 ContributorHi Ganeshsanap,
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'.- ganeshsanapAug 11, 2023MVP
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>
- nimeshtAug 11, 2023Iron ContributorDidn't knew about this option earlier. Thanks.