SOLVED

Embed Tiktok video on a SharePoint Online page

Copper Contributor

Is it possible to embed a Tiktok video on a SharePoint Online page? The embed code supplied from a specific video does not work. simplifying the code to a iframe with URL, height and width does not work. Any suggestions?

7 Replies

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

Hi 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'.
Didn't knew about this option earlier. Thanks.

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

I'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> &lt;script async src="https://www.tiktok.com/embed.js">&lt;/script&gt;
best response confirmed by KevHoustonInsight (Copper Contributor)
Solution

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

I really appreciate you taking your time to support. Appreciating what the X-Frame header is, and how it cannot be influenced at client side answers my question. It is not possible to embed Tiktok videos in SPOL pages. Thanks again
1 best response

Accepted Solutions
best response confirmed by KevHoustonInsight (Copper Contributor)
Solution

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

View solution in original post