Social media platforms can be one of the most exciting marketing tools you can add to your business's online success, and video is at the heart of it. In recent years, video content has, by design, become the most popular way to share content online.
Initially, it was YouTube videos, and then Facebook took a more native video approach while also bringing videos to Instagram. In the last four years, TikTok has taken over that space, and now the other platforms are following suit with short video content styles like Instagram Reels and YouTube Shorts.
Many of our clients have asked, "how can I add video content to my website?" No matter which video platform you're using, we’ve got a solution; no plug-ins are required! So let's dive in.
A few tips before getting started
When embedding videos to your website, do it from a computer, not a phone or tablet. It is much easier to pull the embed codes and add them to your website with a keyboard and mouse than with your fingers and thumbs.
In addition to adding code to the places on your website that you want the videos to appear, you'll also need to add scripts from both Instagram and TikTok to your website page header (this can be done from the global settings of the Zibster website builder) for the videos to display on your site. This is not necessary when embedding videos from YouTube.
Embedding YouTube shorts
YouTube, by far, is the easiest platform when it comes to embedding videos on your website.
Each short on YouTube is accessible at a link like this: youtube.com/short/YOURVIDEOLINK.
The quickest way to grab an embed code for a YouTube short is to change the word "short" in the URL to the word "watch". When you reload the page, you’ll now have access to share the video like others on YouTube. That’s a pretty easy trick!
Once you change the URL and reload the page, click the share button below the video, select embed, and copy the code.
Then navigate to your Zibster account, and access the website builder. You can embed a YouTube short in a text block. Either add a new text block to your page or select an existing text editor block to add the video to. Click on the text block to edit it, and then click on the HTML tab (by default, you arrive at the Visual tab) and paste the code in the location you want the video to appear.
The video code will display in standard horizontal dimensions. If you prefer the video to be a vertical shape, you can flip the width and height dimensions in the embed code. Click save when you are done pasting (and possibly manipulating) the code.
Now your video will display on your website!
Quick pro tips:
- On a desktop, navigate to the short you want to share.
- Replace "shorts" with "watch" in the URL then hit enter.
- When the short re-loads as a regular video, click on share and copy the embed code.
- Paste the embed code in the HTML area of a text editor block.
- Then decide if you want it to display with standard dimensions or more vertical; just flip-flop the width and height to switch from standard to vertical variations.
Embedding TikTok videos
Accessing TikTok's video embed code is straightforward. Click the video you'd like to share, and then select the share icon. Click on embed, and then copy the code.
Then navigate to your Zibster account, access the website builder, and the page you want to embed the video. Next, select a text editor block to add the video. Click on the HTML tab in the text editor window and paste the code where you want the video to appear. You’ll see a bit of code at the end that looks like this:
< script async src="https://www.tiktok.com/embed.js" >
This is the code you need to put in your website's header or CSS/JV area. Copy and delete or cut this strip of code. Then click on the website builder's design tab (in the top menu), go to the CSS/JV area, paste the code, and click save.
You only need to add this line of code to your header section once. It will help display all future videos you embed from TikTok. You will, however, need to remove this line of code from your text editor each time you embed a video from TikTok.
Now embedded TikTok videos will display on your website!
Embedding Instagram Reels
Embedding Instagram Reels is much like embedding TikTok videos. Go to the Reels tab of Instagram, select the video you'd like to embed, and click or tap the three dots (...) in the top right corner, then select embed and copy the code.
Then log into your Zibster account, access the website builder, and open the page you want to embed the video. You can add the video to a text editor block. Either insert a new text block or select the one you want to add the video to. Click the HTML tab in the text editor window and paste the code where you want the video to display. You’ll see a bit of code at the end that looks like this:
< script async src="//www.instagram.com/embed.js" >
This is the code you need to put in your website's CSS/JV area. Copy and delete or cut this strip of code. Then click on the website builder's design tab (in the top menu), go to the CSS/JV area, paste the code, and click save. You only need to add it once to your website’s header section. All future Instagram videos you embed will now display! You will, however, need to erase this portion of code from the text editor each time you embed a video from Instagram.
Now Instagram Reels and other content from Instagram will display when embedded on your site (yes, that means pictures too)!
View this post on Instagram
Now you can add video content, including YouTube shorts, TikTok videos, and Instagram Reels to your website! It is a great way to share your social media content.
Interested in adding this type of content to your site but still stuck? Call our support team at 844.353.3412 or log into your account to live chat. We'll be happy to help you.
0 Comments