How to Display Videos to Make Your Website More Engaging

7 Ways to use video to enhance your website

Video can work just about anywhere on your website. It really comes down to the types of videos you want to make and the experience you’re trying to deliver online. Here are some common types of videos to consider.

1. Introductory videos. The homepage is your first chance to wow your audience, and a well-made introductory video can go a long way. This is your big chance to tell the viewer where you’re coming from, what you stand for, and what you can do for them.  
2. Demo videos for goods and services. You can write paragraph after paragraph explaining what you can offer potential customers but it’s rarely as effective as just showing them via a well-made demo video.  
3. Informational videos. Once you’ve successfully lured the user to your landing page, what do you want them to do next? You may want them to buy your latest product, tease an upcoming project, or provide more information about whatever it is you’ve been working on. A video explainer here can help keep an already-interested audience engaged long-term.
4. Personal or company profile video. Who are you? Your site visitors want to know more about your values and beliefs, and a quick video is an excellent way to tell them.
5. Blog videos. Blogs are a content catch-all and video can serve to reinforce whatever story you’re hoping to tell. That can include personal news and updates, how-to guides, reaction videos, and more.
6. Customer spotlight videos. Let your happy customers do the talking! Just as a demo video can show off the real-life applications of your product, a customer profile video is an excellent way to show what your user base has to say about your product and tell other potential customers how they’ve benefited from your goods or services.
7. Support portal videos. A support video or how-to clip is a smart way to answer common questions about how your product works and provide your customers with step-by-step guidance to resolve any recurrent issues.
   

Key Benefits of Embedding Video on Your Website

As with most things in life, keeping it simple is generally the best way to go. So why not cut out the middleman and upload your videos straight to your site? Well, hosting those videos isn’t as simple as it sounds. It can cause your page to load very slowly, which not only makes for a terrible user experience but can also tank your SEO rankings. Here’s why embedding is typically your best bet:

• Faster page loading and increased SEO rankings. Loading speed plays a huge role in determining where your site falls in terms of ranking on search engines like Google. Embedded videos load much quicker and provide a seamless experience to your viewers.
• Prevents bandwidth issues. Hosting a video on your site can eat up your server’s bandwidth, and the problem only gets worse when others link or embed your videos on their own sites. You can easily avoid this by embedding your videos on a third-party platform like YouTube or Vimeo. These companies build their product around hosting and embedding video, and know how to do it the well.
• Bypass storage limitations. Videos take up a lot of storage space, something you have a limited amount of and which can be expensive. That can result in slow page performance and poor video playback. Video embedding puts the burden of storage on your host site instead.
• Embedded video looks better. As a result of storage limits, video often must be compressed at the expense of quality. Embedded videos have fewer restrictions and can support high-definition formats, which gives your viewers a higher-quality experience.
  

How to embed videos on your website

Already have a particular video you’d like to appear on your page? Great! Whether it’s an existing video or an original clip, you can add any video content to your page by embedding it via a string of HTML code. Instead of actually hosting the video on your own site, this leaves the process of hosting the actual video file to YouTube, Vimeo, or another hosting platform.

All you have to do is copy the embed code from your video hosting platform and place it on your page wherever you’d like the video to be displayed. In some cases, your embed code may be a long string of unwieldy HTML, but most hosting sites will generate short, easy-to-use embed codes that can be easily placed within the copy on your page. The process varies slightly from site-to-site, which we’ll get into below.

How to embed in Squarespace

Embedding your video in Squarespace is as simple as copying either the video’s URL or the embed code from its host site and pasting it into the block where you’d like the video to appear. If your video is hosted on YouTube, Wistia, Vimeo, or Animoto, all you’ll need to do is paste the URL. Using these hosting platforms will give you additional options as to how your video will be displayed on the page. For any other hosting sites, you’ll need to paste the embed code in the block. To do this, click on the block where you’d like the video to appear and paste the embed code.

Once you’ve successfully embedded the video, you can modify the thumbnail by adding a title or additional text, selecting a thumbnail image, or uploading an entirely new thumbnail image.  

How to embed in Wix

Wix users can embed videos using either the video’s URL or embed code. If embedding via URL, you click the plus sign to the left of the editor, and choose Video from the list of options. From there, you’ll select your host platform from the Single Video Players; YouTube, Vimeo, Dailymotion, or Facebook. Then choose Change Video and paste your video’s URL where it asks, “What’s the video’s web address?” In the same window, you’ll see adjustable settings that allow you to tweak your video’s display characteristics. Once your settings are complete, you can then drag the finished video and place it where you’d like it to appear on the page.

Using an embed code instead of the URL will give you more options to customize how your video is displayed. The procedure is similar to embedding a URL but, after clicking the plus sign to the left of the Edit options, you choose More and then, under Embeds, click to add an HTML frame.

Wix also allows you to host your video directly by uploading it to Wix Video.

How to embed in WordPress

Videos can be easily embedded in the ever-popular CMS WordPress either by embed code or, if hosting on common sites like YouTube and Vimeo, by URL alone.

• For URL embeds, copy-paste your URL directly where you’d like the video to populate in the text box. That will result in the standard display version of your video, but an embed code can allow you to tweak the display of your video.
• To use an embed code, you’ll need to be in WordPress’s Text Editor, as opposed to the Visual Editor, and paste in the code. From there, you should be able to toggle back to the visual editor or the draft and see the image on the page as intended.
  

Where to find embed codes

Most video hosting sites generate embed codes to make sharing and posting videos on your website a breeze. Here’s where to find embed codes across a variety of different video hosting platforms.

Embed codes on Descript

To get an embed code for the video you made in Descript, click on Share in the top right corner of the app. Then click Export, and click on Page near the top of the dialogue box.

Now click Copy in the box in the box labeled Published URL, and then click Publish at the bottom. You can paste that link into your website’s CMS to embed your video.

Note that Descript enables to you to also embed your transcript in the player alongside your video. Just be sure that Show Comments is toggled on before you click Publish (it’s toggled on by default).

Embed codes on YouTube

To find your video’s embed code on YouTube, click on the Share icon. This will bring up the Share box with clickable icons to share across WhatsApp, Twitter, and other platforms. However, the first option in the line-up is the Embed icon. Click that and you’ll see the embed code to copy-paste. You’ll also find options for player settings in case you’d like to set the video to begin at a certain time, as well as additional embed options like Show Player Controls and Privacy Mode.

Embed codes on Vimeo

Vimeo’s embed code can be found by clicking the Share icon to the right of the video player. The embed code will appear above the player along with player options below. Here you can adjust the size of the player, autoplay settings, text placement, and more. If you have a Business, Pro, or Premium account, you’ll have access to additional settings such as color adjustments and business logo placements.

Embed codes on Instagram

When embedding a video from Instagram, you’ll need to be logged in from your computer and not your phone. Go to the post you’d like to embed and click the ellipsis in the upper right corner. A drop-down box will appear with the options to Go to post, Share, Copy link, Embed, and Cancel. From there, you’ll have the choice of including the post’s original caption or embedding it without the caption.

Embed codes on Twitter

As with Instagram, you’ll need to be on your computer when embedding from Twitter and not using the app. Find the tweet you want to embed and click on the ellipsis in the upper right corner. This will reveal a drop-down menu with options to Unfollow, Mute, Block, as well as Embed Tweet. Clicking Embed will open a new window with the embed code featured at the top along with a copy button. You can also choose to adjust the background from light to dark, toggle between various language settings, and exclude subsequent tweets by checking off the box to Hide Conversations.

Embed codes on TikTok

To embed a TikTok video, you’ll need to be logged in to your account on your computer. Click on the video you want to embed and look for the Share icons to the right of the page. You’ll see the option to share to WhatsApp, Facebook, Twitter, and, finally, the embed icon. Click the embed icon followed by the Copy code button on the pop-up box. Unlike other platforms, TikTok doesn’t give you any options to make tweaks to the video’s appearance or adjust start times.

What to look for in a video player

Embeddable video players can vary greatly in terms of functionality and features. For example, you can make basic aesthetic tweaks like adjusting the frames around the player, or even have a say in the kind of related videos that play after yours. Here are some features to look for when choosing a video player for your embedded videos, all of which are available in Descript’s embedded video player.

• Titles and captions. A title card makes for a great introduction to your video. Most players let you insert text over your videos which can then be positioned as a title or end credits. More advanced players will have captioning capabilities, which can help make your content more accessible.
• Layering and transitions. The ability to layer audio, video, images, GIFs, and even create seamless transitions can add serious polish to your finished video. With layering, you can layer voices to achieve multiple effects or simply layer your company logo over video.  
• Transcripts. Transcripts are an ideal feature for how-to videos and educational content, plus it’s a great way to reinforce your video’s message. Descript’s latest transcript feature now allows you to share specific moments from the video by simply highlighting that text in the transcript and copy-pasting. That’ll take you to the exact timestamp for each snippet of the transcript. For longer videos, that makes it easier to call out just the highlights to your audience.

Go it alone: Advantages to hosting your own video content

When you host a video yourself, you are simply uploading it directly to your site where it will be stored along with your text, images, audio, and any other types of content you feature. All that storage can quickly become expensive to buy and maintain. For that reason, most folks find third-party hosting a much more convenient option but, depending on the type of video content you’re using, there are advantages to hosting your video.

• Copyright concerns. Due to concerns around privacy and potential copyright infringement, content creators may be hesitant to upload their work to platforms where it can be easily copied, shared, and manipulated without permission. Self-hosting video doesn’t eliminate the possibility entirely, but it does give the owner more control over who sees it, downloads it, and shares it, thereby making it harder to copy.
• Control over design and experience. For better or worse, an embed code will give your viewer the standardized player provided by the host. Sure, there’s room for a little tinkering here, but self-hosting really allows you to take the viewer’s experience to the next level by offering more customizable media players and unique features.
• No advertisements. Unlike hosting platforms, your viewers won’t be subjected to advertising before or during your video. Fewer distractions mean your audience can focus more intently on your message.

5 Tips for using video on your website

From higher engagement and increases in dwell time, video can benefit your site in a number of ways. But that doesn’t mean you can plop down just any old video clip with little to no effort. At least not if you expect to see positive results. We asked video expert Jean Merlain at Wistia — a hosting platform that provides companies with on-site video for marketing, support, and sales — for his insights on adding video to your website. Here are his tips.  

1. Choose an attention-grabbing thumbnail. “Thumbnails are very important for your videos, and knowing which one to use has a huge impact in getting your viewer to hit play. It’s the first impression [your audience has] of your video, which is why you should consider the impact your thumbnail will have on capturing your viewer’s attention. One of the best ways to capture your audience’s attention is to give your videos a visual boost with a text overlay or a looping video thumbnail when applicable. That would allow for your videos to get more plays compared to traditional, static images. If your video has people in it, we recommend that the frame you choose for your thumbnail is one with your talent’s face visible to drive more engagement, specifically a higher play rate.”
2. Pay attention to page placement. “Though it varies by content type and your audience, when embedding videos on your web page, the higher you can place the video, the better. If you’re trying to optimize for play rate and engagement, you want to consider placing your video above the fold for the largest impact.”
3. Aim for the right length. “From our 2022 State of Video Report, we’ve found that the sweet spot for an ideal video length is somewhere between 3–5 minutes where your audience is engaging with videos on average 47% of the time. It does vary based on the type of videos you’re creating and the audience consuming those videos. For videos between 5–30 minutes long, we do see an engagement average of 38%.”
4. Don’t forget accessibility. “When uploading and publishing video, some of the things you want to consider are accessibility and captions. Accessibility is an important but often overlooked part of the video production and hosting process—but it doesn’t have to be. Enabling captions for your videos will help make your content more accessible to a wider audience.”
5. Design everything. “You’ll also want to consider customizing your player color to be high contrast as well as an on-brand color. You’d be surprised, but our customers most commonly use neutral colors like black, white, and shades of gray for their video player.”