Engage Your Audience: How to Use Video on Your Website

Engage Your Audience: How to Use Video on Your Website

A well-placed video is essential to engaging your audience. Let’s explore how to incorporate that video into your website.

Whether you’re a business owner, a freelancer, or an artist, adding video into your website is a great way to engage your audience. Much like a tagline or a well-crafted summary, a well-placed video can quickly pull people in and let them know what you’re all about. That said, plugging your video into your website can be tricky if you’re new to site-building. In this post, I’ll discuss using video elements to reach your audience and how to incorporate that video into your website.

Placing Your VideoA well-placed video is a game-changer for your website. Image via GaudiLab.

To keep things accessible, we’ll focus on working with website builders such Squarespace, and popular video sharing platforms like YouTube and Vimeo. I’ll also briefly touch on working with custom-built sites. But, if you’re the owner of a small business, I’d encourage you to leverage the power of a website builder. If you’d still like to go the extra mile, read this how-to post on website design for beginners.

Ways to Use Video On Your Website

There are a number of ways to harness the power of video on your site. Here are just a few powerful uses for embedded video.

Grab the Viewer's AttentionGrab your visitor’s attention with a Hero Video. Image via Visual Generation.

Hero Videos

If you need a quick, attention-grabbing way to introduce your site to visitors, a hero video will do the trick. Think of it as a preface for whatever summary you may write. After all, why make your audience read what you’re all about when they can feel it?

Introduce Your SiteIncorporate a strong video to introduce your site. Image via Visual Generation.

Background Loops

A looping background video is a great way to give your sight depth. Rather than grabbing the visitor’s attention, a moving background is there to frame that attention, enhancing text and still image content with a visually kinetic bed. You could think of looping background video as the visual version of a music bed.

Add a Looping Background VideoLooping background videos enhance both text and still imagery. Image via Visual Generation.

Explainer Videos

When you’re ready to get down to more granular content, explainers and demonstrative videos are the perfect way to get your message across. Often using a combination of footage and motion graphics, explainers can present complex or abundant information in a manner that is accessible to all.

Uploading Your Video

So, you have a finished video you’d like to use on your site. What now? If you want to embed a video, you need a place for the actual video files to live. There are a few ways to accomplish this, but the easiest method, by far, is to upload your video to an already popular and well-maintained video sharing platform, such as YouTube or Vimeo.

Upload to YouTube

To upload your video to YouTube, simply log in, click the YouTube icon at the top-right of your window, then click YouTube Studio. Once in your dashboard, click either the button marked CREATE or the Upload icon. Then, simply drag the video you wish to upload into the Upload window. For more guidance, watch this video from the YouTube Creators channel.

Upload to Vimeo

To upload your video to Vimeo, just log in to Vimeo, then click the button marked New Video at the top-right, then click Upload. This will bring you to the Vimeo Uploader. Then, just drag the video you wish to upload directly into the Uploader. For more help, see this video from the Vimeo Staff.

It’s also important to be mindful of your video’s specs. Each video sharing platform will provide a set of ideal dimensions and formats for uploading. That said, working with MP4s, video encoded with the H.264 codec, will generally give the best results. See our post about video file formats and codecs for more insight on choosing the best video specs.

Retrieve Your Video’s Embed Code

To embed your video into your website, you’ll either need your video’s unique URL or that video’s embed code. The embed code is the string of code provided by a third party (such as YouTube or Vimeo) that you can copy and paste into your website’s code, therefore embedding that video onto your webpage or post. Retrieving your embed code is easy if you know where to look.

Retrieve Video Code from YouTube

To retrieve your video’s embed code from YouTube, go to your video’s Watch Page, then click the share icon to view your Share Settings. Click the tab marked Embed to see your video’s embed code. You can adjust attributes of your embedded video by clicking Show More at the bottom of the Share Settings. Once you’ve adjusted your settings, simply copy the embed code. See the video below for more guidance from the YouTube Help Team. 

Retrieve Video Code from Vimeo

To get your video’s embed code from Vimeo, go to your video’s Clip Page, then hover the mouse over the video player to reveal the paper airplane icon at the top-right of your video. Click the paper airplane to open the Share Window, where you’ll find an embed code. Much like in YouTube, you can adjust the embed attributes in Vimeo by clicking Show options at the bottom of the Share Window. When you’re happy with your settings, just copy the new embed code. Watch the video below for more help from the Vimeo Staff. 

Many social media sharing platforms, such as Twitter or Instagram, also provide embed codes for videos. However, these codes will embed the entire social media post rather than just the video.

Embedding Your Video into a Website Builder

If you’re working with a custom-built website, all you need to do is paste your video’s embed code into the body of the webpage you wish to add it to. How you go about this depends entirely on how your site is built, but for some comprehensive guidance, W3Schools is an excellent resource. Alternatively, working with a website builder is much more intuitive for those of us who aren’t seasoned web developers. 


For instance, inside the Squarespace website builder, you can insert a Video Block into your website’s design. A Video Block in Squarespace is a sort of site-building widget that makes inserting video quick and easy. 

While editing your page in Squarespace, just click an Insert Point and select Video in the block menu. This will reveal your video editor window, where you can paste your video’s unique web address into the field marked Video URL. You may also use your video’s embed code by clicking the HTML icon </> in the video editor window. When you’re done, just click Save. Voilà! You now have an embedded video. For more guidance from the Squarespace Help Team, check out this video below.

The Squarespace Help Team has a number of helpful video tutorials to guide you through several site-building features, such as adding video backgrounds.

Keep in mind that Squarespace is just one of many powerful website building tools. If you’d like to learn more about what each has to offer, see our post on what website builder will work best for you.

Create a Great Thumbnail Image

Once you’ve uploaded your video, select an attention-grabbing thumbnail to better engage your visitors. Keep in mind that your video’s thumbnail should balance well with the design of your site, as a whole.

Add a Thumbnail to Your YouTube Video

To add a custom thumbnail to your videos in YouTube, you’ll need to have your account verified. Although an extra hurdle, this will give you access to many of the powerful features YouTube Studio has to offer. Once verified, adding a custom thumbnail is easy.

Go to your channel and click the button marked YOUTUBE STUDIO located at the top-right corner. Find the Videos tab to the left, then find the video you wish to edit. Click the video to reveal the Details Window. Inside the Details Window, find the Thumbnails section and click the box marked Upload thumbnail. From here, you can upload your custom thumbnail right from your computer.

Choosing Your ThumbnailA Thumbnail draws your viewer’s attention, so choose wisely.

The latest version of YouTube Studio offers a wide range of goodies for YouTube Creators, such as a new Video Editor and a tool for Creating Custom Thumbnails from scratch. For more on YouTube Studio, visit the YouTube Creators Channel.

If becoming a YouTube Creator isn’t your style, you can always use Vimeo. Vimeo has become the standard bearer for sharing professional video, with intuitive and flexible features that make sharing and embedding video easy.

Add Thumbnail Image Inside Vimeo

To add a custom thumbnail image inside Vimeo, just go to your video’s Clip Page and click the button marked Settings located below the player. Inside your General Settings, find the Thumbnail options and click Edit Thumbnail, then click Upload. Be sure to click Save at the bottom of your video’s General Settings, once you’ve uploaded your custom thumbnail image.

Thumbnail DesignMake sure your thumbnail matches the overall design of your website.

Harness the Power of Video

Whether your message is big-picture or in-depth, adding some video to your website will help you connect your audience with that message. With so many intuitive and accessible tools to choose from, harnessing the power of video is easier than ever. Explore these tools, make that connection, and make your website the best it can be.

Shutterstock also offers affordable video subscriptions and free video clips that you can use on your site as such or in edited versions.

Cover image via Visual Generation.

Check out these article for more on building your brand both online and in print:

Approaching Print Marketing in the Digital AgeHow to Make a Brand Book for Your Small BusinessCreating a Great First Impression with Facebook Pinned PostsShutterstock Partners with Sky Media to Empower Small BusinessesOverlooked Digital Spaces You Need to Rebrand ASAP

The post Engage Your Audience: How to Use Video on Your Website appeared first on The Shutterstock Blog.

Read more: shutterstock.com

Leave a Reply

Your email address will not be published. Required fields are marked *