CODEWITHSUNDEEP
javascriptphplaravelfancyboxtiktok-api
REssh
REssh

Reputation: 11

TikTok videos in modal popups disappear

The tiktok video that I embed in fanctbox disappears

I need to embed videos from different sources into fancybox. I'm using "@fancyapps/ui": "^5.0.17". I get the data for the video by api and insert it into the fancybox depending on the resource from which I get the video. I add videos from YouTube, VK and TikTok. Videos from YouTube and VK are inserted without problems, but a video from TikTok, although it is inserted, disappears immediately after opening the fancybox. The video is still on the page as seen in the browser's code inspector. If I open this video in fancybox and then reload the page, then after reloading the video does not disappear and I can watch it. Or if I open this video very quickly in the fancybox, then I can also watch it. But in both cases, if I close the fancybox, the video will disappear

Here is the code in which I get data from tiktok:

$apiUrl = "https://www.tiktok.com/oembed?url={$link}";

try {
    $response = $client->get($apiUrl);
    $jsonResponse = json_decode($response->getBody(), true);
    
    $html = $jsonResponse['html'];
    $preview = $jsonResponse['thumbnail_url'];
} catch(Exception $exception) {
    $html = false;
    $preview = '';
}

return view('widgets.index_iframe_tik_tok_widget', [
    'html' => $html,
    'masterJob' => $this->config['index'],
    'key' => $this->config['key'],
    'preview' => $preview
]);

$html contains iframe(blockquote) for video:

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@world_walkerz/video/7218998983937625349" data-video-id="7218998983937625349" data-embed-from="oembed" style="max-width: 605px;min-width: 325px;" id="v62804243901872250">  </blockquote>
<script async="" src="https://www.tiktok.com/embed.js"></script>

$preview contains thumbnail url

Code from widgets.index_iframe_tik_tok_widget:

@if($html)
    <div>

    <span data-thumb="{{ $preview }}" data-fancybox="{{ $index->id }}" data-src="#dialog-content-{{ $index->id }}-{{ $key }}"></span>
        <div style="display: none" id="dialog-content-{{ $index->id }}-{{ $key }}">
            {!! $html !!}
        </div>
    </div>
@endif

To prevent the video from being displayed under the fancibox open button, I added style="display: none". If this attribute is removed, nothing will change.

Upvotes: 1

Views: 444

Answers (1)

Lanny Heidbreder
Lanny Heidbreder

Reputation: 1403

TikTok's JavaScript works by blindly deleting the first HTML element inside each blockquote.tiktok-embed element, and replacing it with the embed iframe. But it tries to do this again when any modal loads, and now the actual iframe is the first element! So it is deleting its own embeds.

This code uses a Mutation Observer to continually reinsert a dummy element whenever TikTok deletes the original placeholder. TikToks work in modals for me now!

/**
 * TikTok will delete its own iframes if they are rendered for the first time
 * (such as in a modal) after the embed script has loaded. The script blindly
 * deletes the first element in the embed container. Initially this is a
 * placeholder, but after initial load it's the actual iframe.
 *
 * So every time the iframe is rendered, we re-add a dummy element to be deleted
 * in the future.
 */
function patchTikTokBehavior(context = document) {
  const futureTikTokEmbeds = Array.from(context.querySelectorAll('blockquote.tiktok-embed'));

  const mutationObserver = new MutationObserver(
    (entries) => {
      entries.forEach(entry => {
        let currentIframe = entry.target.querySelector('iframe');
        let currentDummy = entry.target.querySelector('.dummy-element');

        if (currentIframe && !currentDummy) {
          const dummyElement = document.createElement('div');
          dummyElement.classList.add('dummy-element');
          entry.target.insertBefore(dummyElement, currentIframe);
        }
      })
    }
  );

  futureTikTokEmbeds.forEach(
    embed => {
      mutationObserver.observe(
        embed,
        {
          childList: true,
        }
      );
    }
  );
}

Upvotes: 0

Related Questions