Embed TikTok Videos (Rails API + Vanilla JS)
For my 4th project with Flatiron School, we were assigned to build a SPA using vanilla javascript and rails api. This has been the most challenging but oddly fun project I’ve yet to create. I enjoyed building this because for the first time I was building something I wish existed. What is that you may ask? A For Me Page inspired by TikTok. I spent a shameless amount of hours on Tiktok and my ‘liked’ page is flooded with videos of all different kinds. So, I decided to put matters into my own hand and build an app that allows you to create categories, upload TikToks and select which category you would like to add that video too.
My first task was figuring out if this was even possible. I wanted to be able to have the videos be dynamic so users could upload a videos, not just watch seeded ones. If you google how to do this, results are close to none BUT if this is something you want to add in your app… you’ve come to the right place :)
Step 1. Adding t.string :video_url to your db table.
create_table :videos do |t|t.string :video_url
Step 2. Create a method in your model to format the link. Make sure you add before_create in your model as well.
before_create :format_linkself.video_url = video_url.match(/(?<=video\/)\d{10,}/)
Step 3. Rending the video in a js file.
<iframe src="https://www.tiktok.com/embed/${this.video_url}" allowfullscreen scrolling="no" allow="encrypted-media;"></iframe>Breaking it down:
We’re allowing a link to be uploaded to the database as a string. When the video is being added, we are only storing the part of the url that is unique identifier and making that the video_url. Then, in js we add an iframe tag that inserts the specific video_url that is stored in the database.