3

I am trying to embed a tik tok into a landing page hosted on unbounce. The tik tok embed link is straight from tik tok and as is, the tik tok will automatically play when the web page is open. Is there a way to turn this off in the code? I want the video to be there but only playing if the user clicks play.

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@fairytailcrossing/video/7219450454705573162" data-video-id="7219450454705573162" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@fairytailcrossing" href="https://www.tiktok.com/@fairytailcrossing?refer=embed">@fairytailcrossing</a> Aiight   S&#47;O to Type sent me a fanny pack for healthcare workers. Go check out link in my bio to order your own all proceeds go to help healthcare workers. <a title="fyp" target="_blank" href="https://www.tiktok.com/tag/fyp?refer=embed">#fyp</a> <a title="foryou" target="_blank" href="https://www.tiktok.com/tag/foryou?refer=embed">#foryou</a> <a title="fannypack" target="_blank" href="https://www.tiktok.com/tag/fannypack?refer=embed">#fannypack</a> <a title="aiight" target="_blank" href="https://www.tiktok.com/tag/aiight?refer=embed">#aiight</a> <a title="laboratory" target="_blank" href="https://www.tiktok.com/tag/laboratory?refer=embed">#laboratory</a> <a title="laboratorylife" target="_blank" href="https://www.tiktok.com/tag/laboratorylife?refer=embed">#laboratorylife</a> <a title="dance" target="_blank" href="https://www.tiktok.com/tag/dance?refer=embed">#dance</a> <a title="dancing" target="_blank" href="https://www.tiktok.com/tag/dancing?refer=embed">#dancing</a> <a title="hospitallife" target="_blank" href="https://www.tiktok.com/tag/hospitallife?refer=embed">#hospitallife</a> <a title="healthcareworker" target="_blank" href="https://www.tiktok.com/tag/healthcareworker?refer=embed">#healthcareworker</a> <a target="_blank" title="♬ AIGHT - WESTSIDE BOOGIE &#38; DRAM" href="https://www.tiktok.com/music/AIGHT-7086655651392260097?refer=embed">♬ AIGHT - WESTSIDE BOOGIE &#38; DRAM</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>

This is the embed link provided. I've tried to add an autoplay = 0 to some of the urls but that didn't work. Not sure what other options there are.

Will
  • 41
  • 2

3 Answers3

1

To stop the auto-play of an embedded TikTok video, you can use the muted attribute. Add the muted attribute to the blockquote element to prevent the video from playing automatically when the page loads.

Here's the modified code:

<blockquote
      class="tiktok-embed"
      cite="https://www.tiktok.com/@fairytailcrossing/video/7219450454705573162"
      data-video-id="7219450454705573162"
      style="max-width: 605px; min-width: 325px"
      muted // put muted here
    >

      // your code

</blockquote>
Thakur Saad
  • 33
  • 7
  • 2
    Hi Thakur, I've added "muted" to the blockquote, but the embedded video still plays automatically. The video is muted, but the goal is to keep the video paused until a viewer hits play. – Will May 15 '23 at 19:36
1

I found this web component that lazy loads TikTok embeds. It's easy to use. The video still plays, but not until you scroll into view. Not perfect, but def less of a performance hit.

I tried adding data-autoplay="false" muted to the blockquote, but that failed. I couldn't find any other solutions.

KittenLogic
  • 126
  • 1
  • 4
1

You can use below code for stop autoplay.

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@fairytailcrossing/video/7219450454705573162" data-video-id="7219450454705573162" style="max-width: 605px; min-width: 325px;" autoplay="0">
<!-- ... rest of the code ... -->
Ritesh Hirapara
  • 16
  • 4