Skip to content
English
Send Us a Message
www.locable.com
  • There are no suggestions because the search field is empty.

How to Embed a Video or Add Third-Party Embed Code to Your Website

Learn how to add responsive videos, maps, forms, calendars, and other third-party widgets to your pages and blog posts while keeping your website mobile friendly.

Available for all plans on the Locable Marketing Platform

 

Embedding third-party content lets you add videos, maps, calendars, forms, social feeds, booking tools, and other interactive features to your website without recreating them in Locable.

Because Locable websites are fully responsive, it's important to use responsive embed code whenever possible. Responsive embeds automatically resize to fit desktops, tablets, and mobile devices, helping your content look great on every screen.

In this article, you'll learn how to create responsive embed code and add it to webpages and blog posts.

Before You Begin

 

 

Embedding a YouTube Video (Recommended)

Hosting videos on YouTube keeps your website fast while making your videos easy to manage and share. If you haven't already, you'll need to create a YouTube channel for your business.

  1. Upload your video to your YouTube account.
  2. Copy the YouTube video URL.
  3. Visit https://www.locable.com/responsive-youtube-embeds/ to get the responsive code.
  4. Simply paste your YouTube URL and click Generate Embed Code, then scroll down and copy the new code.



Now you can place the responsive video wherever you'd like using this Embed Code.

Embedding Other Third-Party Widgets

For other services that provide embed code, visit Embed Responsively.

Choose your content source, paste the URL or embed code, and generate a responsive version before adding it to your website.

This works well for many popular services and helps prevent fixed-width embeds from breaking your page layout on mobile devices.

 

Adding Embed Code to a Blog Post

 

 

Adding Embed Code to a Webpage

 

 

Once you save, your video (or any other widget) is available on the front end of the site.

Using a Video as Your Webpage Hero

If you'd like a YouTube video to appear in the hero area at the top of a webpage, our team can help.

Displaying a video in the hero section requires additional custom code to ensure it displays properly across different devices and screen sizes.

If you'd like to use a hero video on your website, please contact our Support Team and we'll be happy to assist.

Embedding YouTube Shorts

YouTube Shorts can also be embedded on your website.

Unlike standard YouTube videos, YouTube Shorts do not need to be processed through a responsive embed generator. Instead:

  1. Open the YouTube Short.
  2. Right-click the video.
  3. Select Copy Embed Code.
  4. Paste the embed code directly into an Embed Code content block.

 

NOTE: Embedded YouTube Shorts video will not autoplay on your website. Instead, it will show a thumbnail with the Play button.

Best Practice: Set an OG Image for Pages with Video

When someone shares your webpage or blog post on Facebook, LinkedIn, or other social platforms, those platforms look for an Open Graph (OG) Image to display in the preview.

If your page contains only an embedded video, social platforms may choose an unrelated image or no image at all.

For the best results:

  • Capture a screenshot from your video, or
  • Upload another image that represents the video's content.

Then set that image as the page's OG Image before publishing.

Be sure to follow the instructions about Optimizing Your Images for Social Media before finishing.