All Collections
Getting Started
Creating Your First Interactive Video
Creating Your First Interactive Video

A step-by-step walk-through of how to create interactive videos on Ghost.

Jess avatar
Written by Jess
Updated over a week ago

Once you’ve created your account and have signed in, you’ll be prompted to create your first Interactive Video! To do so, select the first option on the Dashboard homepage, ‘Create a New Video.'

You can also create videos by navigating to the 'Videos' page from your Admin menu. This will bring you to the Video Manager, where you will have the option to '+ Create.'

As you create Interactive Videos, they will appear in a list on your Video Manager page, with the latest video positioned at the top.

Pro tip:

To streamline your video creation, you can bulk upload videos into your Video Library or connect directly to your Instagram account from the Ghost Dashboard.

Creating An Interactive Video

Important Note: Your videos will not appear on your site without the Ghost Core Script embedded globally. For more information on adding this to your website based on your platform, check out our resources under Embedding.

To create an Interactive Video, follow these steps:

1. Provide a title for your Interactive Video. You can choose whether you wish your title displayed to audiences using the toggle.

2. Upload your video. Make sure it follows the outlined content specifications.

You can upload your video by uploading a file, selecting a previously uploaded video from your video library, or by pasting a link to your video on Dropbox or a CDN. Make sure the video link is public.

3. Depending on the content of your video, you may wish to toggle your Shoppable Icon On or Off. For example, if it is a product video, then it makes sense to keep that icon turned on to identify that this content is shopping focused.

However, if your video is something like a market update or a founder video that links to a resources or contact page, then you may choose to turn this Off.

4. Once your video has been uploaded, a cover image will be automatically generated. This will display on the video thumbnail when the video isn't playing. You can overwrite this image by selecting your desired video still or by uploading your own cover image.

5. If desired, tag a link to your video by adding a URL from any website in the "Page URL" field. Pasting the URL into the field will instantly pull the available image and title from that website if available, displaying it within your video preview and the designated fields. This information can then be modified if desired.

These links can be product pages, contact pages, sign up forms, appointment bookings, the choice is yours!

6. Check out your video preview to make sure everything is displayed correctly.

7. Click ‘Save.' You can then 'Create Another Video' right away or add your video to your website.

8. To add your video to the website, it must be part of a video collection.Your video will automatically be added to the default All Videos collection and can be added to your website by navigating to the Collections page and selecting 'Add to Site.'

You can also create your own custom collections from the Collections page. This will allow you to group chosen videos that you wish to be featured together on your website. Learn how to create and manage your video collections here.

Note: If the page image and/or title are not available when the URL is added, the fields will appear empty. All fields must be populated to add your product/page and generate your video snippet. In this case, these elements will need to be added manually.

When adding images for your cover image and product images, please follow the below guidelines.

<1500px in width.

<10mb / image

Adding Links to a Video

To add links to your Interactive Video, navigate to the Products Section of the Video Details page.

Copy and paste the URL link from any website that you wish to tag in your video. Pasting the URL into the field will instantly pull the available image and title from the website if available, displaying it within your video preview and the designated fields.

Overwriting Page Image and Title

If you wish to overwrite the collected image and/or title of the product or page that was parsed through the URL, we provide the flexibility to do so.

Simply hover over the image and click the Upload icon displayed. This will allow you to upload the desired image from your device's files (JPEG or PNG).

You can also manually change the title of the product or page by typing it in the outlined field.

Reminder: If a product video, please ensure that you have selected the correct variant that you wish to feature before copying the URL and pasting it into the indicated fields. To remove a URL or image, click the ‘X’.

You can add up to 10 links to each Interactive Video.

Adding Interactive Videos to Your Website

Once you have successfully uploaded and published your Interactive Video in your Dashboard and have added your video to a Collection, you will be provided with a Video Snippet for your website.

To install your videos on your website, follow these steps.

Important Note: You must embed the Ghost Core Script globally on your website before adding your interactive videos to your website.

1. Determine the desired location(s) that you wish your video(s) to live.

2. Navigate to the Collections page from your Admin Menu.

3. Select the Default Collection or create your own Custom Collection for your video(s).

4. Select 'Add to Site' next to the collection name or at the top of the individual collection page.

5. Choose how you want your videos to display on your website.

6. Copy the Video Snippet provided and paste this in the chosen area(s) of your website. To find out how to add the video snippet to your website based on your platform, check out our Embedding section.

If you want multiple videos to display together, consider Ghost's Video Carousel. Once implemented, this carousel will automatically display any new videos you create and will remove any videos that are deleted.

For information on our Video Carousel and other Display options, click here.

Did this answer your question?