How to stop auto play in an embedded video?

Question

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.

Answer 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>

Answer 2

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.

Answer 3

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

Answer 4

Tiktok doesn't directly provide an option to control autoplay for embedded videos, there are workarounds you can try. Just set the height 580px.

<iframe style="height: 580px; border: 0; vertical-align: top;" src="https://tiktok.com/embed/7219450454705573162" ></iframe>

This will make the video less visible, giving the appearance of no autoplay until the user interacts with it.