How to Embed a HighLevel Hosted Video in WordPress Using Classic Editor

Want to host your videos in HighLevel and display them on your WordPress website without using YouTube or Vimeo?

You can. And if you’re using the WordPress Classic Editor, you can do it with a few lines of HTML.

I recently wanted to embed a video demonstrating the HighLevel Events mobile app into an article on my WordPress website.

Normally, the obvious solution would be to upload the video to YouTube and embed it into the page.

But I specifically wanted to avoid doing that.

Why I Wanted to Avoid YouTube

There were two main reasons.

1. Page Loading Speed

When you embed a YouTube video, you’re not just loading a video file.

You’re also introducing YouTube’s player and potentially additional JavaScript, connections and other third-party resources.

These can affect how quickly a page loads, particularly if you’re embedding several videos.

There are ways to optimise YouTube embeds, including lazy loading, but I wanted to keep things as simple as possible.

By hosting the MP4 video in HighLevel Media Storage and using the browser’s native HTML5 video player, I could avoid loading YouTube’s player altogether.

That doesn’t guarantee the page will load faster. Video file sizes, hosting performance and browser behaviour still matter. But it removes a layer of third-party code that I didn’t need.

2. Keeping Visitors on My Website

This was equally important to me.

I’ve spent years working in direct-response marketing, and one principle I’ve always followed is to avoid unnecessarily distracting people from the action you want them to take.

When somebody visits an article on my website, I want them to read the content, watch the demonstration and hopefully explore more of my website.

I don’t particularly want to encourage them to disappear into YouTube.

YouTube embeds can expose viewers to YouTube branding, links, related videos and other routes into its platform. Once somebody moves into YouTube itself, they’re in an environment filled with competing content, recommendations and advertising.

That’s great for YouTube, but not necessarily for me.

I wanted the video to support my article, not become an invitation to leave my website.

Hosting the video in HighLevel and embedding it directly gives me a simpler viewing experience without YouTube’s surrounding distractions.

First, a Word About WordPress Classic Editor

This tutorial is specifically for people using the WordPress Classic Editor and working directly in HTML.

If you’re using Elementor, Divi or another visual page builder, the process will be different.

Personally, I prefer the Classic Editor.

I’ve been building websites and working in digital marketing for many years, and I like having direct control over the HTML on my pages.

There are several reasons for this.

1. Keeping Pages Lightweight

Visual page builders can introduce additional CSS, JavaScript and HTML markup.

That doesn’t automatically make them bad for SEO, but unnecessary code can increase page weight and affect loading performance.

By working directly in HTML, I can keep things relatively simple.

2. Better Control Over Page Structure

I can see exactly what HTML I’m adding, how headings are structured, where links appear and how content is presented.

This is particularly useful when optimising articles for search engines.

3. Making Content Accessible to Search Engines and AI

Google and AI search systems need to access and interpret the content of a page.

Clean HTML, logical headings, descriptive links and useful written content help make that information easier to understand.

Of course, using Classic Editor doesn’t guarantee better SEO or AI search results. A well-built Elementor or Divi website can perform extremely well too.

My preference is simply to keep things as lightweight and straightforward as possible.

And the video embedding method below fits that approach.

Why Host Videos in HighLevel?

If you’re already using HighLevel, you have access to its Media Storage facility.

You can upload videos, images and other files, then use their URLs elsewhere.

For example, you might want to show:

• A demonstration of a HighLevel feature.
• A screen recording showing how something works.
• A product demonstration.
• A short training video.
• A customer testimonial, where you have permission to publish it.

Rather than uploading the video directly into WordPress, you can keep the file in HighLevel and display it on your website.

This doesn’t mean the video has no hosting or bandwidth implications. It simply means you’re using HighLevel’s infrastructure rather than your own WordPress hosting for the video file.

Step 1. Upload Your Video to HighLevel Media Storage

Log into your HighLevel account and open Media Storage.

Upload your video file.

For this example, I’m using an MP4 video demonstrating the HighLevel Events mobile app.

Once the file has uploaded, obtain its direct media URL.

It will look something like this:

https://files.leadconnectorhq.com/file/EXAMPLE/video-name.mp4

The important thing is that you have a direct URL to the video file, not a link to a HighLevel page containing the video.

You’ll need this URL shortly.

Step 2. Create a Poster Image for Your Video

One thing I discovered during testing was that simply embedding a video doesn’t necessarily give visitors an obvious play button in the centre of the screen.

I wanted a poster image showing the first frame of the video, with a nice obvious play button.

So how did I create it?

I simply uploaded the video to ChatGPT and asked it to create a poster image using the first frame of the video, with a play button added on top.

That was it. ChatGPT produced the image, which I uploaded to HighLevel Media Storage alongside the video.

Simples!

You don’t need Photoshop, Canva or any graphic design skills to do this.

The poster image has its own URL, separate from the MP4 video.

And because the play button is already part of the image, there’s no need to create a separate HTML play button overlay or introduce JavaScript.

The browser’s built-in video controls take care of playback.

Step 3. Open Your WordPress Post in Classic Editor

Open the WordPress post or page where you want the video to appear.

In the Classic Editor, you’ll see two tabs:

Visual | Text

Select Text.

This is where you can work directly with the HTML.

Position your cursor where you want the video to appear.

Step 4. See the HighLevel Video Embed in Action

Before getting into the HTML, here’s the actual video I embedded in my WordPress article.

It’s a vertical mobile screen recording demonstrating the HighLevel Events app.

Both the MP4 video and the poster image are hosted in HighLevel Media Storage.

There’s no YouTube player, no iframe and no additional WordPress plugin involved.

Here’s the finished video embed:

And here is the actual HTML I used.

I’ve displayed the code below so you can copy it and adapt it for your own videos.

<video controls="controls"
playsinline="playsinline"
preload="metadata"
poster="https://files.leadconnectorhq.com/file/6af43d88fbdd54a827b55bb2/highlevel-events-poster.png"
style="width: 100%; max-width: 350px; height: auto; display: block; margin: 20px auto; border-radius: 6px;">

<source
src="https://files.leadconnectorhq.com/file/6af437d0ddcd97ce5ac8fd23/highlevel-events-app.mp4"
type="video/mp4" />

Your browser does not support the video tag.

</video>

To use this on your own website, you simply need to replace two URLs:

• The poster URL: Replace it with the URL of your own thumbnail image.
• The video URL: Replace it with the direct MP4 link from your HighLevel Media Storage.

Then save or update your WordPress post and test it on the live page.

That’s it.

No iframe, no additional WordPress plugin and no JavaScript required.

Step 5. Adjust the Video Size

One of my initial problems was that the video appeared enormous on the page.

The video I was embedding was a vertical mobile phone screen recording.

Displaying that at full width looked ridiculous.

The important part of the HTML is:

max-width: 350px;

This restricts the video to a maximum width of 350 pixels.

You can change this depending on the type of video you’re embedding.

For example:

• 350px for a vertical mobile screen recording.
• 500px for a smaller landscape video.
• 700px for a larger demonstration or training video.

The width: 100% setting allows the player to shrink to fit narrower screens, while height: auto helps preserve its proportions.

For my mobile screen recording, 350px worked well.

Why I Didn’t Use JavaScript for the Play Button

This is where my initial attempt became more complicated than necessary.

I experimented with adding a separate HTML play button overlay and JavaScript to start the video when somebody clicked it.

The result wasn’t reliable.

The video displayed, but clicking the poster image didn’t start playback as expected.

WordPress Classic Editor can modify HTML when switching between its Visual and Text modes. Depending on the WordPress configuration and user permissions, certain scripts or attributes may also be removed.

There are ways around these issues, but in this case they were unnecessary.

I’d already created a poster image with a play symbol.

By removing the additional HTML overlay and JavaScript, I was left with the browser’s native HTML5 video player.

The poster image displays before playback, and the built-in video controls handle starting and pausing the video.

The simpler solution worked.

One small distinction worth understanding: the play symbol in the poster is part of the image. It isn’t a separate interactive button. The native player controls provide the actual playback functionality, so visitors can use the browser’s play control.

What the HTML Attributes Actually Do

If you’re comfortable editing HTML, you might want to know what each setting does.

HTML Attribute	Purpose
controls	Displays the browser’s video playback controls.
playsinline	Allows inline playback on supported mobile devices.
preload="metadata"	Requests basic video information without asking the browser to preload the entire video.
poster	Displays your chosen thumbnail before playback.
max-width	Limits how large the player appears.
height: auto	Helps preserve the video’s proportions.
border-radius	Adds slightly rounded corners.

There is no autoplay setting in this example.

I prefer visitors to decide whether they want to watch the video rather than having it start automatically.

Does Hosting Videos in HighLevel Help SEO?

Not automatically.

Hosting a video in HighLevel rather than YouTube, Vimeo or WordPress doesn’t in itself improve your search rankings.

What matters more is how the video supports the page and how efficiently that page loads.

For example, a useful video demonstration can improve the experience for somebody reading a tutorial.

But I wouldn’t rely on the video alone to communicate important information.

I prefer to include written explanations alongside videos.

That means visitors can understand the subject without having to watch the recording, and search engines and AI systems have actual written content to interpret.

For videos that are particularly important to your SEO strategy, you can also consider adding:

• A useful written summary or transcript.
• Descriptive text explaining what the video demonstrates.
• Relevant VideoObject structured data, where appropriate and valid.
• A suitable thumbnail that search engines can access.

Also remember that preload="metadata" is a browser hint, not a guarantee that the browser will make only a tiny request.

And the video still needs to be downloaded from HighLevel when somebody watches it.

Can I Use This Method With Elementor or Divi?

Potentially, yes, because the underlying HTML5 video element is a web standard.

However, this tutorial is specifically about WordPress Classic Editor.

Elementor, Divi and other page builders have their own modules, styling systems and ways of inserting custom HTML.

The steps and behaviour may therefore be different.

If you’re using one of those builders, I’d recommend following instructions specific to that platform.

Final Thoughts

What started as a simple job, adding a HighLevel-hosted video to a WordPress post, turned into a useful reminder that the simplest solution is often the best.

I didn’t want to use YouTube because I wanted to avoid its additional player resources and keep visitors focused on my own website, rather than sending them into an environment full of competing videos and advertising.

And I didn’t want to install another WordPress plugin or add complicated JavaScript just to display a video.

In the end, I just needed:

1. An MP4 video hosted in HighLevel Media Storage.
2. A poster image with a play symbol, created using ChatGPT.
3. A few lines of HTML in WordPress Classic Editor.

And because I’m working directly in HTML, I can control the appearance without adding another layer of software to my website.

What If This Code Doesn’t Work for You?

Every WordPress website is a little different.

Your theme, plugins, security settings or the way your editor handles HTML could mean the exact code I’ve shared doesn’t work in your particular situation.

If that happens, my next port of call would be to explore the problem using an AI tool.

I use both Google Gemini AI and ChatGPT to help troubleshoot problems like this.

In fact, that’s how I worked through the issues I encountered when embedding this video.

You can copy your HTML code into an AI tool, explain what you’re trying to achieve and describe what’s happening when you test it.

If necessary, you can also paste back the HTML that WordPress has saved so the AI can help identify anything that has changed.

It may take a little experimentation, and AI-generated code isn’t always correct first time. But I’ve found these tools very useful for working through practical problems like this.

If my solution doesn’t work for you, use it as a starting point and get AI to help adapt it to your particular WordPress setup.

Need Help Getting More Out of HighLevel?

I’m a UK-based HighLevel consultant with more than 25 years’ experience in direct-response marketing and marketing automation.

I help businesses implement HighLevel, build useful automations and get more value from the software they’re already paying for.

Book a 20-Minute Discovery Call

Or explore my HighLevel workshops and training.