How to Embed Videos on Your Website

By adding video content to your website, you can transform an uninspiring page into an engaging and interactive experience.

Using videos in conjunction with text and images increases your chances of reaching a larger audience based on how they consume content.

Plus, who doesn’t love a good cat video? 

In fact, a newly released HubSpot Research report indicates that 54% of consumers want to see videos from brands they support in comparison to email newsletters (46%) or social image-based content (41%).

However, nothing is worse than putting in all the effort to create a video only for the volume to blast the second you open the page or the embed size of the video to be skewed.

This article will walk through a few tricks to manipulate and adjust your embedded YouTube videos.

Not only is YouTube the largest video hosting platform, it also allows you to create a channel for videos where your audience can gather as a community.

The steps below will walk you through how to use HubSpot content editors to add YouTube videos and take your website, or blog, to the next level.

1. Embedding a YouTube Video on a HubSpot Page 

HubSpot makes it easy to add videos to your content using an “insert media/video” feature into rich text modules.

But sometimes, the styling on your page can conflict with your video.

 

Here's how to fix this issue:

1. Go to the knowledge document “how do I make my embedded YouTube video responsive?” and copy the code visible.
2. Find the style sheet attached to your page’s template and place the code at the bottom of the sheet.
3. Click publish.

Look at how nicely that video turned out.

And now, when you add videos to any page that's associated with that style sheet, you will have a clean video that is also responsive on mobile so your audience can watch your content on the go.

Now that we've figured out how to add the video content, let’s look at customization options.

Youtube allows you to use a variety of parameters to make your videos perform the way you want.

2. Preventing a YouTube Video From Autoplaying When the Page Opens

Often, a video is placed further down the page, so starting to play the video when the page is first loaded may not make sense if the reader has not gotten to that section yet.

To fix this, you can disable the “autoplay” function by adding the parameter “?autoplay=0” to the end of the URL, giving you something like the following:

www.youtube.com/embed/D0S7y-u1tms?autoplay=0

The “autoplay” parameter supports “0” and “1” as values. The “0” is to disable autoplay and the “1” is to enable autoplay. 

Whenever you add parameters to a URL, you want to start with a “?” Every subsequent parameter can be added after using an “&”.

www.youtube.com/embed/D0S7y-u1tms?autoplay=0&mute=1

This brings us to the mute parameter.

3. Automatically Muting an Embedded YouTube Video

As much as we all love videos that start automatically and blare the audio when you least expect it, sometimes you might prefer the option to unmute the video at your own discretion.

For example, if a site visitor decides to keep a tab open on a new page to read later, they do not want the audio to be playing if they're not watching the content.

The “mute” parameter follows the same rules at the “autoplay” parameter, using the binary 0-1 system for accepted values.

To mute your video add “?mute=1” to the URL.

www.youtube.com/embed/D0S7y-u1tms?mute=1

Now, by default, your video is muted on the page, so your audience has the option to enable sound. 

 

It's that easy.

Video content attracts a larger audience, keeps visitors engaged on your site, and means you're using HubSpot to its full potential.

Now that you know how to implement video content, take a look at 12 Types of Marketing Videos You Should Create.