How to Embed Videos on a Website (Complete Guide)

On average, websites have about 50 milliseconds to make a positive first impression on visitors. So, how can you make that impression count and encourage visitors to stay? With video!

The average user will spend 88% more time on a website if it has video -- and that’s not all. Incorporating video marketing into your website can result in higher click through rates, average order value, conversion, and revenue. So, how exactly do you get videos onto your website?

This comprehensive guide will show you how to embed videos in HTML, WordPress, Squarespace, and Wix. We'll also cover where to find and customize video embed codes from popular platforms like YouTube, Vimeo, Facebook, Instagram, Twitter, and Animoto.

What is a video embed?

First things first, what exactly is a video embed code and how does it work?

Simply put, a video embed code is a small snippet of code that you place on your website. This code then displays a video directly on your page. Instead of storing the video file on your own website server (which can slow down your site), an embed code pulls the video from its original source (a video hosting platform like YouTube or Vimeo).

Key Benefits of Embedding Videos:

• Faster Website Load Times: Your site loads quicker because it's not hosting large video files.
• Cost-Effective: Many video hosting services offer free options.
• Reliable Playback: Hosting services are optimized for smooth streaming.
• Analytics & Features: You can leverage the analytics and player features offered by your video host.

How to embed video on any video with HTML

We'll start with basic instructions for embedding video in any HTML site. The good news is, it’s really simple.

1. Access Your HTML Editor: Go into the edit mode for the specific page, post, or section of your website where you want the video to appear. Locate the exact spot in the code where you'd like the video to display and place your cursor there.
2. Copy Your Embed Code: You'll need the embed code from your video hosting platform (e.g., YouTube, Vimeo). We'll show you where to find these codes for various services later in this guide.
3. Paste the Embed Code: Paste the copied code directly into the HTML where you placed your cursor. Save or publish your changes. The video should now display inline exactly where you placed the code.

Note: Depending on where you are embedding your video from and how your website is set up, you may need to make some alterations to the code. Please contact your webmaster for details.

How to embed video in Wordpress

If you’ve got a blog or website that’s on Wordpress, there are a few different ways to embed a video. We’ll dive into the different options, starting with the simplest.

Embed videos by copy-pasting the URL (easiest method)

For this first method of embedding videos in Wordpress, all you’ll need is the video’s URL.

• Simply copy the URL of the video from your browser's address bar.
• Paste this URL directly into the Visual editor in WordPress. WordPress will automatically convert the URL into an embedded video.

Embed videos using embed code

The automatic embed method is quick, but sometimes you may want more control over how your video displays. In these cases—or when embedding videos from sites not supported by the automatic embed feature—you'll use the video's embed code.

• In WordPress, make sure you are in the Text editor (not the Visual editor).
• Follow the same steps outlined in our "How to Embed Video in HTML" section above: copy your video's embed code and paste it into the Text editor.

Here's what that will look like:

Note: Some custom WordPress themes may have different requirements for video embeds. If you're still having trouble, reach out to your theme provider for assistance.

How to embed video in Squarespace

Squarespace offers a variety of options for embedding videos, but it's important to note that videos can only be embedded, not directly hosted, on Squarespace. This policy ensures faster site loading and better streaming quality by relying on dedicated video hosts.

Squarespace supports embedding videos from YouTube, Vimeo, Animoto, and Wistia. Similar to WordPress, you can use either an embed code or, for supported services, just the video's URL.

• Adding a Video Block: For any block that supports video (e.g., Video Blocks, Gallery Blocks), you can easily click to add one.
• Paste URL or Embed Code: A window will pop up where you can either copy-paste the video link (for supported services) or click on an embed icon to paste a full embed code.
• Customization: Once embedded, you can often add a title and description, and upload your own thumbnail.

You would typically opt for an embed code if you're hosting a video from a service other than YouTube, Vimeo, Animoto, or Wistia, or if you require more specific display controls. For a comprehensive guide, refer to Squarespace's own documentation on adding videos.

How to embed video in Wix

If you’ve created your website in Wix, you also have a couple options for embedding videos, including using the URL from a video hosted on YouTube, Vimeo, Daily Motion, or Facebook, or using Wix Video. We’ll dive into both of those options.

Embed videos with a URL

For videos hosted on YouTube, Vimeo, Dailymotion, or Facebook, you can embed them quite easily in Wix.

• 1) Add a Video Element:
  • Click "Add" on the left side of the Wix Editor.
  • Select "Video."
  • Under "Single Player," choose the source you'd like to add from (YouTube, Vimeo, Dailymotion, or Facebook).

• 2) Add Your Video URL:
  • Click "Change Video" and paste the URL of the video you want to display.
  • Here, you can also adjust playback and control options.

• 3) Position Your Video:
  • Click, drag, and drop to position and resize the video element to fit your website's layout.

Embed videos with an embed code

If you want to add a video to your Wix site that's not hosted on one of the supported platforms listed above, or if you need more control over its appearance, you'll need to use an embed code rather than just a link.

• This process is similar to embedding with a URL, but instead of selecting a "Video" element, you'll add an HTML iframe.
• You'll find the HTML iframe option under "More" in the "Add" menu.
• Paste your video's embed code directly into this HTML iframe.

How to use Wix Video

You’ll notice a second option when you go to add a video, which is Wix Video. Wix Video offers a variety of video layouts, in addition to the ability to upload video files for hosting on Wix, rather than embedding. You can read more about it here.

Guide to Embed Codes

Now that you’ve got the inside scoop on how to embed videos in HTML, Squarespace, Wordpress, and Wix, we’ll share the details on how to find and customize embed codes from popular services including Animoto, YouTube, Vimeo, Facebook, Instagram, and Twitter.

Here's a quick summary:

How to embed an Animoto video

To get the embed code for an Animoto video, navigate to the video's play page within your Animoto account (ensure you're logged in).

• Scroll down the play page to the section labeled "Embed Video."
• Here, you'll find the code ready to be copied and pasted onto your website.
• Clicking on "Advanced Options" allows you to customize the embed code. You can adjust the video size, quality, volume, or add a powerful Call-to-Action (CTA) button. This button appears when the video is paused or finishes playing, directing viewers to a specific page.

Tip: When you embed an Animoto video, any changes or edits you make to the original video in Animoto will automatically reflect wherever the video is embedded.

How to embed a YouTube video

Looking to embed a video from YouTube? It's simple to get the embed code directly from the video's play page.

• Go to the YouTube video's play page.
• Click the "Share" button located beneath the video player.
• Select the "Embed" option.
• You can then copy the embed code. You'll also see options to show player controls and set the video to start at a specific point.
• For even more customization, YouTube offers a variety of parameters that can be appended to the YouTube URL within the iframe embed. These allow control over autoplay, color, language, looping, and more.

How to embed a Vimeo video

Similar to YouTube, you can grab a Vimeo embed code by clicking on the Share icon (often a paper airplane symbol) on the Vimeo play page.

• A window will open, providing options to share to social networks, via email, or to grab the embed code.
• Click on "+Show Options" to customize your embed code. You can adjust the color of the player, the size (keeping it set to "Responsive" is generally recommended), and other settings like looping and autoplay.
• Upgrading to a Vimeo Pro, Business, or Premium plan provides even more control over how embedded videos are displayed, including customizing player colors and components, end screens, playback speed control, and adding your own logo.

How to embed a Facebook video

If you want to add a video from Facebook to your website, you can use Facebook's post embed feature.

• Click on the three dots ("...") in the top right corner of the Facebook post.
• Select "Embed."
• You'll have the option to "Include full post," which will display the video along with any accompanying text from the original Facebook post.

How to embed an Instagram video

The process for embedding Instagram videos is similar to Facebook's. You'll need to do this from a computer in a web browser, not the Instagram app.

• Go to the Instagram post you want to embed.
• Click on the three dots ("...") in the bottom right corner of the post.
• Select "Embed."
• Copy the embed code. You'll also have an option to include the caption or display only the video.

How to embed a Twitter video

To embed a Twitter video, you'll need to open the tweet on a computer (this functionality is not available in the Twitter app).

• Select "Embed Tweet" from the drop-down menu next to the "Follow" button on the Tweet.
• Copy and paste the provided embed code. The entire Tweet, including the video and text, will then be displayed on your website.

Best Practices for Embedding Videos

To ensure your embedded videos provide the best possible experience for your audience and benefit your website:

• Ensure Responsiveness: Most modern embed codes are responsive by default, meaning they adapt to different screen sizes (mobile, tablet, desktop). Always check how your embedded video looks on various devices to avoid cut-off content or horizontal scrolling.
• Player Controls: Consider whether to show or hide player controls based on your content. For informational videos, controls are helpful. For background videos, you might hide them.
• Autoplay with Caution: While some platforms offer autoplay, use it sparingly. Autoplaying videos, especially with sound, can be disruptive to users and impact page load times.
• Context is Key: Always provide relevant text around your embedded video, introducing its content or expanding on what's discussed in the video.

Ready to create engaging videos?

If you've tried using the instructions in this article and are still having trouble embedding a video on your website, please reach out to your webmaster or hosting service provider. Different websites are set up differently, so you may need to do something special for your specific situation.

And if you're looking for an easy way to create more videos for your website, take Animoto for a spin. Whether you're a beginner or an expert, you can easily make a video with Animoto. Drag and drop your own photos and video clips into one of our video templates or start from scratch to create something all your own.

Make your video

Video embedding FAQs