YouTube logo - how to embed youtube videos to get leads for tech companies

Getting more leads for tech companies using digital marketing (inbound marketing) tactics totally will fail if your website is poorly designed in any technical way.

This is a no-brainer: If you’re trying to reach a tech-savvy audience and you screw up tech stuff, forget about getting quality leads.

Even if you have good landing pages and are using keywords correctly, messing up tech features on your website will kill many deals way before they could become deals.

YouTube: Free and Great, but It's Not Responsive

I’m a fan of YouTube because of their SEO advantage. And YouTube is free. But because of YouTube’s often confusing interface, other video hosting services like Wistia are gaining ground.

Despite YouTube being really great, one of YouTube’s issues is that it’s not responsive out of the box. You simply cannot grab the code from their website, paste it into your website, and have it look great on a smartphone.

Furthermore, your videos may show ads and display those "suggested videos" at the end of your video, taking visitors off your website. Let’s fix all these things.

All these issues, unless adressed, make for a poorly performing website, especially one that's designed to attract leads for tech companies. 

Part 1: How to Make YouTube Responsive

To make YouTube embeds responsive, you have to use a bit of code to break the embedded video out of its iFrame. The end result is a nice, fluid, responsive display of your video. Here’s how to do it:

Step 1) Add CSS Code to your StyleSheet

I originally got the idea from CSS Tricks. If you need help with CSS, they’re a great resource.

Again, marketers who capture the most leads for tech companies should make sure they're employing the best tech on their website. Let's do it:

Copy everything between the ===== and paste into the CSS file for your web page. If you need help finding the stylesheet for your Hubspot COS website, see "step 2" in this blog.

Grab the code:

========================

.video-container {
position: relative;
padding-bottom: 56.25% !important;
padding-top: 35px;
height: 0;
overflow: hidden;
margin-bottom: 31px;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
}

========================

Don't forget to save or publish the CSS file.

Step 2) Add this HTML Code to Your Web Page

Look a the code below. Edit the URL by pasting in your YouTube URL embed code from your video. What begins with https and lies between the quotes in the following line is the URL:

src="https://www.youtube.com/embed/1234556"

Copy all the code between the ===== and paste into your web page where you want the video to display. If you have a Hubspot COS site, just paste it in. If you have something else, make sure you paste into a plain text field:

========================

<!-- ONLY EDIT THE URL!! --><div class="video-container" style="padding-bottom: 26px;"><iframe style="width: 853px; height: 480px;" src="https://www.youtube.com/embed/1234556" allowfullscreen="allowfullscreen" frameborder="0" height="480" width="853"></iframe></div>

========================

Save / publish your web page. Done. 

You'll notice I left in some iFrame coding just in case someone has an antiquated browser.

Part 2: How to Turn off YouTube Ads

You can monetize YouTube ads. But getting leads for tech companies won’t work if you’re annoying more visitors than you are evangelizing.

Here’s how to turn off YouTube ads globally:

Step 1) Logon to your YouTube Channel

Step 2) Click on "Status and features." 

YouTube status and features settings to get leads for tech companies

If you see the green bar under the "Monitization" card, click the button shown to disable this feature. You should end up without the green bar showing. 

Both the videos on your channel and embedded on your website now should not display those annoying pop-up ads. You won't directly make money off of your videos, but you won't annoy visitors either. 

Step 3) Set Advanced Features

See the two check boxes on the following screenshot? Seems a bit redundant doesn't it? Just make sure those boxes under "Advertisements" are unchecked / checked as shown:

Setting up YouTube advanced features to get leads for tech companies

Part 3: Turn Off YouTube "Suggested Videos"

You know the thumbnail images that display at the end of most embedded YouTube videos that lure visitors elsewhere? You can turn them off.

The setting for this feature is in the “share” video menu under each video. The reason YouTube set that feature up this way is because the sharing command is embedded in the video ID. Unchecking the “Show suggested videos when the video finishes” check box will kill those thumbnails.

What you cannot do is to turn off suggested videos on your YouTube channel itself, that is, on youtube.com. You can only disable them as an embed on your website. Personally, I don’t think this limitation is a huge neg, but at this time if you’re trying to turn this feature off on youtube.com, just know you can’t.

How to Disable Suggested Video on Embeds:

Step 1) Display a video while logged onto your YouTube Channel

Step 2) Click “Embed”

Step 3) Uncheck Suggested Videos

Make sure this box is not checked, “Show suggested videos when the video finishes.” Here’s a screenshot:

you-tube-turn-off-suggested-videos.png

Now your YouTube embeds are as user-friendly as they can get and, at the least, a big improvement of what you get without any of the tweaks above. 

Did you enjoy this tutorial? Please share below!

Download The Ultimate WorkSheet for Redesigning Your Website

Topics: Web Design

John Pate, Chief Marketing Scientist

Written by John Pate, Chief Marketing Scientist

John is owner and founder of Cohort Marketing. He is a regular contributor to various online media and is a featured speaker at key marketing events in the Raleigh - Durham area.

Skill Level
Comfortable with Hubspot templates
Basic knowledge of CSS

Subscribe To Email Updates