Issue with TikTok Post Embedding

  • Hello

    I am trying to embed a TikTok clip to my post and when it embeds it shows a blue line to the left with a lot of padding between the blue line to the TikTok clip. This makes the clip off center on both desktop and mobile. Plus it shows the blue line in the post on both desktop and mobile as well. I have searched everywhere and have tried all the different alignments but nothing is working.

    I have oceanwp updated to the latest version and I use Elementor theme builder for my post but I create my post in the WordPress post editor Gutneberg blocks.

    I had to put in some additional css code in the customizer custom css for twitter embeds to be centered in the post but can’t find anything for TikTok.

    I appreciate anyones help with this issue. Thank you

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello @jrstar22,

    Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

    .tiktok-embed {
    border: 0 !important;
}

    Best Regards

    Thread Starter jrstar22

    (@jrstar22)

    Hello @skalanter

    Thank you for your reply. That code did work on taking the blue line out. However, with the mobile version the TikTok clip is not centered in the content box. You can still view the whole clip it just looks a little funny not being in the post content box. I have the padding set to 4 on both left and right for mobile of the post content widget and it is set at 15 on each side for desktop. Not sure if that has something to do with it or not. When I take the padding off it the TikTok clip does not move anywhere so I am figuring it has no relevance to it.

    Thanks again for your reply and solution. If there is nothing that can be done to fix the second part it isn’t the end of the world but if you have any recommendations I will for sure try them.

    Thanks

    Hello Again,

    Please use the CSS below:

    #wrap .tiktok-embed {
    border: 0 !important;
    padding: 0;
    min-width: 97% !important;
    max-width: 97% !important;
    margin: 0 auto;
}

    Also, you can reduce the padding of the pos content.

    Best Regards

    Thread Starter jrstar22

    (@jrstar22)

    Hello @skalanter and that you again for your help.

    The css you sent made the TikTok clip centered perfect on desktop but made the mobile view of it worst. Not sure what is going on with the mobile part. Any Twitter or gif embeds I do line up perfect on mobile but TikTok is not at all. If you have any more recommendations to fix mobile I would appreciate it.

    Again, thank you.

    Hello @jrstar22,

    You’re welcome.

    You can reduce the padding of the sections and increase the width of the page, it is the only solution.
    Then it’ll be shown in the correct position, please check these screenshots:
    1. https://i.postimg.cc/52Dyk53s/image.png
    2. https://i.postimg.cc/VN3tnQpL/image.png

    That issue is related to TikTok iframe link styling:
    https://i.postimg.cc/3wVvH5ZQ/image.png that is included in this URL:
    https://www.tiktok.com/embed/v2/7070947609732762926?lang=en-US&referrer=https%3A%2F%2Fraddadsavage.com%2Fdad-brings-gaming-console-in-baby-delivery-room-bad-idea-or-genius%2F

    https://i.postimg.cc/QC9B467x/image.png

    Best Regards

    Thread Starter jrstar22

    (@jrstar22)

    Hello @skalanter

    Got it figured out! I ended up setting the section and to full width and changing the css to 100% instead of 97%. It looks perfect on mobile now and it already looked perfect on desktop. We are good. Thank you for your help. HUGE HELP.

    You’re very welcome. Glad I could help.

    @jrstar22 you mentioned that you “I ended up setting the section and _________ to full width and changing the css to 100% instead of 97%/.”

    What was in the blank space? Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Issue with TikTok Post Embedding’ is closed to new replies.