How to embed your video + article into your Ghost blog with Type Studio

This is a short little tutorial that explains how you can embed artiyles in your blog by using Type Studio.

In short

You are a video creator. And 99,9% of the created videos want to be shared with someone. In this instruction, you will learn how to convert your video to an article and embed it into Ghost. We use ghost.org as an example.

Get started 🚀

👋

Open Type Studio

To create a Type Studio account click here or click here if you already have an account . If you have problems to create an account click here to get instructions on how to create an account.

❗️

Prior knowledge

In this instruction we focus on the blog/website integration in part. If you are not familiar with the video creation / article generation in Type Studio, we recommend watching this instruction on how to share your video first.

📡

Get the embed code

To embed your article in your blog or website, you need the embed code from the sharing page. To open the sharing page, click on the green🟩 button on your video thumbnail in the project overview.
If there is a grey⬜️ button, the video has to be exported first. If the button is blue🟦, the rendering is still in progress and you have to wait until the button turns green.

Sharing Page Back To Page

🔗

Copy the code

To get the embed code, click on the copy link right below your video. After doing that, a modal will open up. In this modal, you will find the button "copy snippet". Hit this button to copy the embed code.

With the ☑️Show text, you can decide if you want to embed the video as an article (video + text) or only the video on your website or in your blog

Sharing Copy Link

👻

Open Ghost

After opening Ghost, click on posts, in the menu on the left side.

Ghost Dashboard

📃

Create new post

To create a new post, click on the green "New Post" button in the top right corner.

Ghost Article Preview

🔗

Embed code

You can now write a new blog post. Or directly embed your video with the article. To do this, select the "HTML" element at the place where you want to embed the video.

Create Article With Ghost

🔗

Paste Code

Now you can paste the code snippet you saved from Type Studio to your clipboard. Confirm the input by hitting enter. Watch out! You will not see the embedded code in the preview. Only when you publish the page the code will be executed by Ghost.

Embed Code Snippet In Ghost Article

🎉

Publish Article

When you have finished your article, publish your post. Now you will see the embedded video including the interactive text.

Embed Code Snippet In Ghost Article Preview