Embedding videos on your website is a great way to both engage visitors, as well as keep them on your site — the alternative is having to redirect visitors to a video sharing platform to watch, which leads to an unnecessary detour in the customer journey.
In this guide, we’ll take you through the steps to embed videos on your website.
What is an embed code?
For a quick refresher, an embed code is a snippet of HTML code that makes it possible for you to insert content from another website into your own website.
Here’s how it looks:
<iframe src="https://video.spectaclehq.com/vidsample.mp4" width="560" height="315" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
When do you use an embed code?
There’s a few reason why an embed code is needed.
Makes your website engaging: Having video content on your website makes it more engaging. If the meteoric success of Tik-Tok proves anything, it’s that video is the way to keep people captivated. Video content is more engaging than text and basic screenshots. And for most industries, having video content is a requirement to stay competitive, even e-commerce brands are expected to have product tutorial videos rather than just images.
Improves the customer experience: Creating engaging content is the starting point, then you need to think about how you will share it. As mentioned before, without an embed code, you won’t be able to share content directly on your website. Instead, you’ll lead visitors to YouTube or Vimeo, where they will likely not click back and instead get lured in to the borderline-addicting content chosen for them by an algorithm. It’s best to not take that risk.
In most cases, it’s just easier: Creating content for your website can be a lot of work, including a significant amount of time and resources. By embedding content, you don’t have to manually transfer content from one platform to another. Plus, when you embed video content from another site, you're essentially displaying their content on your site without having to host it yourself, this is not only easier but can also reduce your own site's bandwidth usage.
However, there are a few things to consider when using an embed code. For example, when you embed a video from another platform, you are now tied to the performance of that platform. If you used an embed code from YouTube for a video on your homepage, then YouTube has a service outage, that video will consequently no longer be available on your site.
Step 1: Choose a Video Hosting Platform
Before you can embed a video on your website, you need to host the video on a platform that provides embed codes. Popular video hosting platforms include YouTube, Vimeo, and Wistia.
Sign in to your chosen video hosting platform and upload your video. Add in necessary details like the video title and description.
Set video privacy: Depending on your preferences, you can set your video as public, private, or unlisted. Public videos can be viewed by anyone, private videos are only visible to specific users you invite, and unlisted videos can be accessed by anyone with the video link but won't appear in search results.
Generate the embed code: After uploading your video, look for the "Share" or "Embed" option. This will provide you with an HTML code snippet that you can copy and paste into your website.
Useful Resources
Step 2: Embed the Video on Your Website
Log in to your website's content management system (CMS) or website builder. This could be WordPress, Wix, Squarespace, or any other platform you use to manage your website.
Navigate to the page where you want to embed the video — either creating a new page or editing an existing one.
Insert an HTML or Embed block: Look for an option to insert custom HTML or an embed block on your page. This is where you'll paste the video's embed code.
Paste the embed code you copied from your video hosting platform into the HTML or embed block.
The code typically starts with <iframe> and ends with </iframe>.
Tool Recommendation
Adjust video dimensions (optional): Modify the width and height attributes in the iframe code to control the video's size on your webpage. Ensure that you maintain the video's aspect ratio to prevent distortion.
After adding the embed code and adjusting settings, save your changes and publish the page. The video should now be visible on your website.
Step 3: Test and Optimize
After embedding the video, it's essential to test it to ensure it works correctly. View your website in various browsers and devices to verify compatibility.
Additionally, consider these optimization tips:
Video description and context: Provide a brief description or context for the video on your webpage, so visitors understand why they should watch it.
Accessibility: Ensure your video and website are accessible to all users, including those with disabilities. Provide captions or transcripts for your videos, and use accessible web design practices.
SEO optimization: Optimize your video's title, description, and tags for search engines to improve discoverability.
Video placement Choose the optimal location for your video on your webpage. It should be relevant to the content around it and enhance the user experience — a heat mapping and visitor recording tool can help.
Tool Recommendation
Monitor performance Use analytics tools to track how your embedded videos are performing. Analyze metrics like view counts, engagement, and click-through rates to gauge their effectiveness.
By following these steps and best practices, you can successfully embed videos on your website, making your content more engaging and informative for your audience. Whether you're sharing educational tutorials, product demonstrations, or compelling stories, videos can be a powerful tool for conveying your message and connecting with your visitors
