How to Add Video to Your Website: A Step-by-Step Guide

To add video to your website, you either need to upload the video directly through HTML on the backend of your site or choose a video hosting platform (like YouTube or Vimeo) to embed the video on your site. This guide will walk you through every step of the process.

Adding video to your website can boost engagement and conversions. But if you don’t do it the right way, your site speed, user experience, and SEO could suffer.

In this guide, we’ll outline the best way to upload a video to your website — from selecting the best hosting option and video format to uploading, embedding, and optimizing.

Plus, you’ll get expert tips from HawkSEM Lead Strategist Alissa DeGeorge along the way.

How to add video to your website

How you upload a video to your website depends on where you choose to host it — either through a third-party platform like YouTube or Vimeo, or by self-hosting.

(Image: HawkSEM blog)

1. Choose a hosting option

When adding video to your website, you have two main choices: host it on a third-party platform (such as YouTube or Vimeo) or self-host directly on your site.

Third-party hosting

Third-party hosting is generally the preferred option for beginners and experts alike, as it offers improved performance and user experience with faster loading times than self-hosted videos.

Embedding videos from third-party platforms is simple, secure, and reduces storage and bandwidth costs for your website.

Two popular options are YouTube and Vimeo:

YouTube: YouTube’s free hosting service makes it easy to upload and embed videos on your site. With recently improved video quality, a reliable player, and robust analytics, it remains one of the best all-around platforms.

A major benefit of YouTube’s service is its massive user base. You can grow your audience directly on the platform while also driving traffic back to your site.

There are, however, several drawbacks. YouTube’s auto-suggested videos appear at the end of a video, which can direct viewers away from your content. Similarly, ads may appear before, during, or after playback.

Vimeo

While Vimeo offers a free plan, it offers limited access to the platform’s tools and features. Whether you pay for a subscription or not, Vimeo is known for a higher quality and more professional look with better privacy controls — all without ads.

Paid subscriptions unlock advanced customization options, improved privacy controls, analytics, and larger upload limits.

That said, many users have noted a decline in quality, making YouTube the more appealing option.

Alternative: Self-hosted

For full control over branding and user experience, you can self-host your videos. However, this comes at the risk of slowing down your site and using a lot of bandwidth, and requires more technical expertise.

2. Prepare your video file for upload

Whether you plan to host your video directly on your website or through a third-party platform like YouTube or Vimeo, the preparation process starts the same way:

Compress your video

Video files slow down site speeds and eat up bandwidth, which is why compressing them before upload is so crucial. Use online tools like HandBrake or CloudConvert to lower the resolution while maintaining quality.

This is especially important for self-hosted videos, as platforms like YouTube and Vimeo automatically compress uploads.

If using a third-party platform, however,it’s still recommended to compress your video before uploading. This will preserve more of its quality and limit how much additional compression their algorithms apply.

Save it to a supported file format

File formats like MP4 or WebM with H.264 encoding are widely supported and reduce file size without compromising the quality of your video.

Create a thumbnail

A thumbnail is the preview image people see before clicking on your video. YouTube or Vimeo will allow you to choose an image from your video file or upload a thumbnail image after uploading.

Just be sure to use a clear, high-quality image that represents your video’s content and grabs attention.

Add captions

Use online tools to add captions to a self-hosted video. Video hosting services allow users to include captions and a transcript after uploading.

Use an SEO-friendly file name

Your file name should be clear and incorporate your target keyword.

3. Upload your video

Once your file is compressed, accessible, and saved as a widely supported format with an SEO-friendly file name, you can upload your video.

Third-party host

YouTube and Vimeo videos have a similar uploading process:

• Sign in to your account
• Click Create > Upload videos

• Select the file or drag and drop your video to upload

• Add your video title, description, and any relevant video tags

• Set your video’s visibility to Public or Unlisted — private videos can’t be embedded

Self-hosted

Uploading a video to your website’s server requires an understanding of HTML.

Use your content management system (CMS) like WordPress, or an FTP client (a tool that transfers files between your computer and your web server) to upload your video file to your site’s media or assets folder.

You can also use a plugin like WonderPlugin Video Embed to add videos from different sources.

4. Embed the video on your webpage

Once your file is uploaded, you can embed the video element onto your website.

Third-party hosted videos

Like uploading, the embedding process is nearly identical between YouTube and Vimeo. Both use an HTML iframe video embed code that you’ll copy and paste into your site’s HTML:

• Open your published YouTube video
• Click Share under the video

• Select Embed (a pop-up box with HTML code will appear)

• Here, you can customize some options, like whether to show player controls or start at a specific time

• Copy the video link

• In your CMS (like WordPress, Wix, or Squarespace), switch to the HTML or code view of the page

• Paste the video URL code where you want the video to be displayed
• Preview your page to make sure the video displays correctly

Self-hosted videos

To upload a self-hosted video to your site, you can embed it directly into a webpage using the HTML <video> tag.

Go to your website’s HTML editor and use a self-hosted video module or an HTML embed snippet to add the video where you want it to display.

Here’s a sample template:

<video controls width=”100%” poster=”thumbnail.jpg”>

<source src=”https://yourwebsite.com/videos/your-video.mp4″ type=”video/mp4″>

Your browser does not support the video tag.

</video>

• <video>: Defines the video container
• controls: Adds playback options like play, pause, and volume
• width=”100%”: Makes the video width adjust to the web browser and screen size (i.e,. is responsive)
• poster: Displays a thumbnail image before playing
• <source>: Identifies the video file’s location and format

Once your video is embedded, you can add CSS (Cascading Style Sheets) to style your video player.

Best practices for adding video to webpages

Adding video to your site is a great way to improve engagement and conversions, but only when the video doesn’t slow down your loading speed or disrupt the user experience.

DeGeorge shares her top optimization tips:

1. Compress videos

Videos should always be compressed so page speed isn’t compromised.

2. Add video schema

“Make sure the pages with videos have schema markup added to them,” advises DeGeorge. Schema helps Google better understand your video content and can improve your chances of appearing in rich video results on the SERP.

Further reading: Schema Markup: What it is, How to Audit + Why it Matters

3. Include a video sitemap

Create and submit a video sitemap through Google Search Console (GSC) to help search engines discover all the videos on your site. This is especially important for self-hosted videos to ensure the content is properly indexed.

4. Add transcripts and captions

Include transcripts and captions for every video. They not only make your content accessible to all users but also provide additional text for search engines to crawl.

5. Leverage YouTube

Uploading your videos to YouTube and optimizing them for search through the platform can enhance visibility.

“This extends your video real estate on the SERP and also allows you to add backlinks to your site,” says DeGeorge. “This can also help you show up in LLMs when video search results start rolling out.”

6. Regularly audit your video content

“Quarterly or bi-annual video content audits are super beneficial to help determine what new video content is needed or what can be improved,” says DeGeorge.

“Look at your most important pages and articles — do you have an accompanying video for them? For SaaS, do you have clear explainer videos or tutorials? For ecommerce, do you have up-to-date product videos?”

7. Add videos above the fold or near relevant content

Don’t just drop your video on the homepage. Consider where it would be most valuable and how it best fits on the page for user experience.

8. Use custom thumbnails

A custom thumbnail helps your video stand out, improving click-through rates and engagement compared to auto-generated options.

9. Avoid autoplay and large background videos

Auto-playing videos and background loops can slow down your site and make users feel frustrated. Keep your videos user-initiated and performance-friendly.

The takeaway

Online audiences today have short attention spans — adding video to your site is a great way to share your message faster and in a more meaningful way. When done right, video can improve your conversions and engagement and boost SEO.

For this to happen, however, it’s critical to follow the best practices. Video can slow page speed, make your site look clunky, and compromise functionality.

If adding video to your site is part of your ongoing marketing strategy, consider partnering with a team of strategists to maximize your efforts.