{"id":2428,"date":"2025-08-01T11:00:00","date_gmt":"2025-08-01T11:00:00","guid":{"rendered":"http:\/\/www.zoomlavilin.com\/?p=2428"},"modified":"2025-08-07T13:17:45","modified_gmt":"2025-08-07T13:17:45","slug":"how-to-add-html-embed-codes-to-your-website-quick-tip","status":"publish","type":"post","link":"http:\/\/www.zoomlavilin.com\/index.php\/2025\/08\/01\/how-to-add-html-embed-codes-to-your-website-quick-tip\/","title":{"rendered":"How to add HTML embed codes to your website [quick tip]"},"content":{"rendered":"<p>As a digital marketing consultant, I spend a lot of time promoting website content on social media. But what about promoting your social presence via your website? Embedding enables you to do exactly that. I\u2019ll often use this tactic for video content as a way to repurpose it and increase its reach.<\/p>\n<p><a class=\"cta_button\" href=\"https:\/\/www.hubspot.com\/cs\/ci\/?pg=848be230-f06a-420e-9a24-82b45fe61632&amp;pid=53&amp;ecid=&amp;hseid=&amp;hsic=\"><img class=\"hs-cta-img \" style=\"height: auto !important;width: auto !important;max-width: 100% !important;border-width: 0px;margin: 0 auto;margin-top: 20px;margin-bottom: 20px\" alt=\"Download Now: 25 HTML &amp; CSS Hacks [Free Guide]\" height=\"58\" width=\"466\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/53\/848be230-f06a-420e-9a24-82b45fe61632.png\" align=\"middle\" \/><\/a><\/p>\n<p>So what\u2019s the process for <a href=\"https:\/\/blog.hubspot.com\/marketing\/embed-social-media-posts-guide\">embedding external content<\/a> on your site? It differs slightly between platforms depending on where you\u2019re pulling the content from, but the basic steps are mostly the same.<\/p>\n<p>Let\u2019s take a look at how to add HTML embed codes to your site and the specific steps for different platforms.<\/p>\n<p><strong>Table of Contents<\/strong><\/p>\n<ul>\n<li><a href=\"#what-does-embed-mean\">What does embed mean?<\/a><\/li>\n<li><a href=\"#what-is-an-embed-code\">What is an embed code?<\/a><\/li>\n<li><a href=\"#how-to-add-html-embed-code-to-your-site\">How to Add HTML Embed Code to Your Site<\/a><\/li>\n<\/ul>\n<p><a><\/a> <\/p>\n<p style=\"font-weight: normal\">\n<p>Embedded content is referenced with <a href=\"https:\/\/blog.hubspot.com\/website\/html\">HTML<\/a>, one of the most basic languages used on the web to design and lay out web pages.<\/p>\n<p>You often see this code when you&#8217;re in the \u201cback end\u201d of a blog post, for example. That\u2019s where you\u2019ll add your embed code. Most website editors, from WordPress themes to drag-and-drop builders, will have HTML blocks available that you can place on a blog post or website page to paste the HTML code.<\/p>\n<p><a><\/a> <\/p>\n<p style=\"font-weight: normal\">\n<p>I frequently use embed codes to embed posts from X or LinkedIn as a quick and easy way to add thought leadership dimensions to blog content, for example.<\/p>\n<p>Most social and multimedia websites have an option to generate an embed code right from each individual post. Here\u2019s an example of an embed code for a HubSpot YouTube video:<\/p>\n<p style=\"padding-left: 40px\"><strong>&lt;iframe width=\u201c560\u201d height=\u201c315\u201d src=\u201chttps:\/\/www.youtube.com\/embed\/eGUEAvNpz48\u201d title=\u201cYouTube video player\u201d frameborder=\u201c0\u201d allow=\u201caccelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\u201d allowfullscreen&gt;&lt;\/iframe&gt;<\/strong><\/p>\n<p>And here\u2019s the embedded result.<\/p>\n<p>Want to do the same thing on your blog posts and pages? Next, I\u2019ll go over how to generate an embed code from the most popular social sites. I\u2019ve found that, once you know how to do this on one platform, the steps are very easy to replicate anywhere embedding is available with small variations.<\/p>\n<p><a><\/a> <\/p>\n<p style=\"font-weight: normal\">\n<p>Let\u2019s dive into each step in more detail.<\/p>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"369\" alt=\"how to add html embed code to your site\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20add20html20embed20code20to20your20site.jpg\"><\/p>\n<h3><strong>Step <\/strong><strong>1:&nbsp;Generate the embed code.<\/strong><\/h3>\n<p>Before I embed external content, I first have to generate an embed code for the post or page I want to embed on a website.<\/p>\n<p><strong>Pro tip: <\/strong>A lot of website builders and CMS\u2019s allow you to simply paste the link to the post and automatically embed it without having to go get the embed code. But this varies from one platform to another.<\/p>\n<p>Here\u2019s how I generate the embed code on most of the major social and content networks.<\/p>\n<h4><strong>How to Embed a Facebook Post<\/strong><\/h4>\n<p>Here\u2019s how I embed a Facebook post:<\/p>\n<ul>\n<li>First, I open Facebook on a desktop browser.<\/li>\n<li>I find the post that I want to embed.<\/li>\n<li>After clicking the three dots in the top right corner of the post, a drop-down menu appears.<\/li>\n<li>From the dropdown menu, I click <strong>Embed<\/strong>.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"593\" alt=\"getting html embed codes for facebook posts\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/getting20html20embed20codes20for20facebook20posts.jpg\"><\/p>\n<ul>\n<li>A pop-up appears, and I have the option to include the full post and access advanced settings. The advanced settings are mainly for people with more advanced know-how who want to adjust the width of the post. For beginners, I recommend leaving that alone and simply clicking <strong>Copy Code <\/strong>.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"637\" alt=\"how to embed a facebook post using html embed code\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20embed20a20facebook20post20using20html20embed20code.jpg\"><\/p>\n<ul>\n<li>Now, I\u2019ve got the embed code copied to my clipboard and ready to be pasted in the back end of a website.<\/li>\n<\/ul>\n<h4><strong>How to Embed an Instagram Post<\/strong><\/h4>\n<p>If I want to embed an Instagram post, it\u2019s a pretty similar process. Just remember that embedding Instagram posts is only possible from the desktop version. Here\u2019s how I do it:<\/p>\n<ul>\n<li>First, I find the post I want to embed and click to open it up fully in the browser.<\/li>\n<li>Then I click the three dots in the top right corner of the post and out comes a pop-out dropdown menu.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"437\" alt=\"how to get the html embed code from an instagram post\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20get20the20html20embed20code20from20an20instagram20post.jpg\"><\/p>\n<ul>\n<li>I select the <strong>Embed<\/strong> option from the list.<\/li>\n<li>The embed code comes up with a button to copy it to my clipboard.<\/li>\n<li>Sometimes, I want to include the caption. But a lot of times, I\u2019ll uncheck the box <strong>Include<\/strong> <strong>caption<\/strong>, especially for embedding videos.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"364\" alt=\"embedding an instagram post on a website\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/embedding20an20instagram20post20on20a20website.jpg\"><\/p>\n<ul>\n<li>Once I\u2019ve hit the <strong>Copy embed code<\/strong> button, I\u2019m ready to head back to the website to embed the post.<\/li>\n<\/ul>\n<h4><strong>How to Embed a YouTube Video<\/strong><\/h4>\n<p>If I\u2019ve spent a lot of time putting together video content for a YouTube channel, I want to make sure it gets seen as much as possible. So, embedding YouTube videos is one of the most frequent ways I use the embed functionality. It makes my video content accessible to website users to expand its reach.<\/p>\n<p>The other reason it\u2019s good to embed videos? It saves a ton of bandwidth for a website. Videos tend to be very large files. Uploading them directly to a website can drastically slow down page load times. So, if you want videos on your website, I recommend using a platform like YouTube or Vimeo to do so.<\/p>\n<p>Back to how I embed YouTube videos:<\/p>\n<ul>\n<li>I click into the video I want to embed, and select <strong>Share<\/strong> from the row of options underneath the video player.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"424\" alt=\"how to embed a youtube video using html embed code\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20embed20a20youtube20video20using20html20embed20code.jpg\"><\/p>\n<ul>\n<li><strong>Embed<\/strong> is the first option on the list after clicking the <strong>Share<\/strong> button.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"633\" alt=\"html embed codes for youtube videos\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/html20embed20codes20for20youtube20videos.jpg\"><\/p>\n<ul>\n<li>After clicking <strong>Embed,<\/strong> the video pops back up with the embed code to the right-hand side.<\/li>\n<li>I simply click <strong>Copy<\/strong> in the bottom right corner.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"246\" alt=\"youtube video html embed code\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/youtube20video20html20embed20code.png\"><\/p>\n<ul>\n<li>I now have the embed code in my clipboard and ready to paste in the website editor.<\/li>\n<\/ul>\n<h4><strong>How to Embed an X Post<\/strong><\/h4>\n<p>There\u2019s a lot of useful thought leadership on X, and I like to embed tweets throughout editorial or blog content to boost authority and social proof. It\u2019s also a good way to quote experts without needing to contact them directly or get something custom for your post.<\/p>\n<p>Here\u2019s how I can embed X posts:<\/p>\n<ul>\n<li>First, I open the post I want to embed.<\/li>\n<li>Up in the browser bar, I copy the link to the post (more on this in a moment).<\/li>\n<li>Like other platforms, I click the three dots at the top right corner of the post.<\/li>\n<li>This opens up a list of options, including <strong>Embed<\/strong> <strong>post<\/strong>.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"615\" alt=\"how to embed an x post using html embed code\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20embed20an20x20post20using20html20embed20code.jpg\"><\/p>\n<ul>\n<li>Here\u2019s where the process on X gets a little more complex than it probably needs to be. When I click embed, the website opens up <a href=\"https:\/\/publish.twitter.com\/\">https:\/\/publish.twitter.com\/<\/a> in a new tab with the question \u201cWhat would you like to embed?\u201d<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"279\" alt=\"how to get html embed code from an x post\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20get20html20embed20code20from20an20x20post.png\"><\/p>\n<ul>\n<li>This is where I paste the link to the X post that I copied earlier from my browser bar.<\/li>\n<li>I hit enter, and two options appear under \u201cHere are your display options.\u201d<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"547\" alt=\"embedding a video from x with two options for html embedding code\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/embedding20a20video20from20x20with20two20options20for20html20embedding20code.jpg\"><\/p>\n<ul>\n<li>I click <strong>Embedded<\/strong> <strong>Post<\/strong> from the two options, but you can click <strong>Embedded<\/strong> <strong>Video<\/strong> for video content.<\/li>\n<li>A pop-up appears underneath with the embed code and an option to <strong>Copy<\/strong> <strong>Code<\/strong>, so I click that option.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"453\" alt=\"x social media post html embed code\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/x20social20media20post20html20embed20code.jpg\"><\/p>\n<ul>\n<li>Like Facebook, X also provides the opportunity to \u201cset customization options.\u201d<\/li>\n<li>Once I\u2019ve clicked <strong>Copy<\/strong> <strong>Code<\/strong> I can return to my website editor and embed the post.<\/li>\n<\/ul>\n<h4><strong>How to Embed a Pinterest Post<\/strong><\/h4>\n<p>I particularly like Pinterest posts for fashion, DIY, decor, cookery and recipe sites, and hobby sites. If your website is within a niche that lends itself well to Pinterest\u2019s format and audience, embedding your Pinterest posts is a great way to grow your following on the social platform.<\/p>\n<p>Here\u2019s the process I follow for embedding a Pinterest post:<\/p>\n<ul>\n<li>I open up the Pin I want to embed on the site.<\/li>\n<li>I click the three dots on the top left, right at the end of the list of options.<\/li>\n<li>Next I click <strong>Get Pin embed code<\/strong>.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"431\" alt=\"how to embed a pinterest post with html embed code\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20embed20a20pinterest20post20with20html20embed20code.jpg\"><\/p>\n<ul>\n<li>One of the things I like about Pinterest embed codes are the size options. It means you get the right sizing and resolution. If I\u2019m embedding the pin in a small area like sidebar content, I might choose small. But if I want a full-width image for a blog post, I would choose large.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"424\" alt=\"pinterest post embed code with size options\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/pinterest20post20embed20code20with20size20options.jpg\"><\/p>\n<ul>\n<li>Once I customize the size, I highlight the code and click <strong>Command + C <\/strong>or <strong>CTRL + C<\/strong>, depending on the device I\u2019m using.<\/li>\n<li>Now my Pin is ready to get embedded.<\/li>\n<\/ul>\n<h4><strong>How to Embed a SlideShare Presentation<\/strong><\/h4>\n<p>SlideShare presentations are a little dated these days \u2013 it\u2019s a long while since I\u2019ve embedded one on a website. But, you never know. So it\u2019s useful to know how, just in case.<\/p>\n<p>Here\u2019s I grab the embed code for a SlideShare presentation.<\/p>\n<ul>\n<li>I open the SlideShare presentation I want to embed.<\/li>\n<li>Under the presentation, I click the three dots and then select the <strong>Share <\/strong>option.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"474\" alt=\"slideshare html embed code\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/slideshare20html20embed20code.jpg\"><\/p>\n<ul>\n<li>This prompts a <strong>Share this SlideShare<\/strong> box to appear over the presentation slides.<\/li>\n<li>I go to the <strong>Embed<\/strong> section underneath the social share buttons.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"432\" alt=\"how to embed a slideshare presentation using html embed code\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20embed20a20slideshare20presentation20using20html20embed20code.jpg\"><\/p>\n<ul>\n<li>At first, the field looks blank. But when I click into it, I can see the embed code.<\/li>\n<li>The good thing about SlideShare is that I can select the size of the presentation on the left, and choose which slide the embed starts on to the right.<\/li>\n<li>Once I\u2019m happy with those settings, I highlight the embed code and click <strong>Command + C or CTRL + C<\/strong>, depending on my device.<\/li>\n<li>Now, I can go back to my website editor and embed the presentation directly on a website page or blog post.<\/li>\n<\/ul>\n<h4><strong>How to Embed an External Webpage<\/strong><\/h4>\n<p>On a rare occasion, I might need to embed an external webpage. Like all embed codes, this is done using an iframe HTML tag.<\/p>\n<p>Here\u2019s an example of what iframe HTML code looks like:<\/p>\n<p><strong>&lt;iframe src=\u201curl\u201d title=\u201cdescription\u201d &gt;&lt;\/iframe&gt;<\/strong><\/p>\n<p>I can use these same tags to embed an external webpage. Here\u2019s how I do it:<\/p>\n<ul>\n<li>I take this entire line of code and paste it somewhere like a Notepad app: <strong>&lt;iframe src=\u201curl\u201d title=\u201cdescription\u201d width=\u201d\u201d height=\u201d\u201d&gt;&lt;\/iframe&gt;<\/strong><\/li>\n<li>Then I go to the webpage I want to embed and I grab the URL from the browser bar.<\/li>\n<li><strong>Note: <\/strong>I\u2019ll need the entire URL, including the \u201chttps\u201d piece.<\/li>\n<li>In the space in my iframe code where it says \u201curl,\u201d I paste the full webpage URL over that text so it looks like this: <strong>&lt;iframe src=\u201chttps:\/\/example.com\/embedded-page\u201d title=\u201cEmbedded Page Title\u201d width=\u201d\u201d height=\u201d\u201d&gt;&lt;\/iframe&gt;<\/strong><\/li>\n<li>I can also adjust the pixel height and width of the frame using the \u201cwidth=\u201d and \u201cheight=\u201d sections, which would look like this: <strong>&lt;iframe src=\u201chttps:\/\/example.com\/embedded-page\u201d title=\u201cWebsite Page Title\u201d width=\u201d750\u201d height=\u201d500\u201d&gt;&lt;\/iframe&gt;<\/strong><\/li>\n<li>Finally, I copy the entire line of code to embed it on the website.<\/li>\n<\/ul>\n<h3><strong>Step <\/strong><strong>2: Access your content management system and paste the embed code in your HTML viewer.<\/strong><\/h3>\n<p>I work with a lot of different CMSs and they all work slightly differently. But the process of using the HTML block is fairly similar across the board. Here, I\u2019ll go over how you can do it in <a href=\"https:\/\/www.hubspot.com\/products\/cms\">Content Hub<\/a> and <a href=\"https:\/\/blog.hubspot.com\/marketing\/wordpress-website\">WordPress<\/a>.<\/p>\n<h4><strong>Inserting Embed Code onto a Content Hub Site<\/strong><\/h4>\n<p>In Content Hub, although I could use the HTML editor if I wanted to, I actually don\u2019t need to in order to add embed content. Here\u2019s how it works:<\/p>\n<ul>\n<li>I open up my HubSpot dashboard and go to <strong>Content &gt; Blog<\/strong>. If I was embedding content on a website or landing page, I would go to <strong>Content &gt; Website Pages<\/strong> or <strong>Content &gt; Landing Pages<\/strong>, respectively.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"562\" height=\"540\" alt=\"how to embed content on hubspot pages\" style=\"margin-left: auto;margin-right: auto;width: 562px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20embed20content20on20hubspot20pages.jpg\"><\/p>\n<ul>\n<li>Next, I find the blog post or webpage where I want to embed the content, hover over it in the list, and click on the page or post name highlighted in blue.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"86\" alt=\"embedding videos on hubspot blogs\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/embedding20videos20on20hubspot20blogs.jpg\"><\/p>\n<ul>\n<li>In the top editor bar above the post, I click <strong>Insert<\/strong> and select <strong>Embed<\/strong> from the dropdown menu.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"350\" height=\"543\" alt=\"how to access embed options on hubspot content hub\" style=\"margin-left: auto;margin-right: auto;width: 350px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20access20embed20options20on20hubspot20content20hub.jpg\"><\/p>\n<ul>\n<li>A pop-up appears where I can either paste the embed code or enter a URL for HubSpot to embed content for me automatically.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"550\" height=\"316\" alt=\"insert html embed codes on hubspot\" style=\"margin-left: auto;margin-right: auto;width: 550px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/insert20html20embed20codes20on20hubspot.jpg\"><\/p>\n<ul>\n<li>Then all I need to do is paste in the code and hit <strong>Insert<\/strong>.<\/li>\n<li>If I wanted to add the embed directly in the source code, I would click <strong>Advanced<\/strong> from the editor bar.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"350\" height=\"266\" alt=\"how to access hubspot blog source code\" style=\"margin-left: auto;margin-right: auto;width: 350px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20access20hubspot20blog20source20code.jpg\"><\/p>\n<ul>\n<li>I can click <strong>Source code,<\/strong> and the HTML of the page appears in a pop-up.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"538\" alt=\"insert embed code on hubspot html editor\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/insert20embed20code20on20hubspot20html20editor.jpg\"><\/p>\n<ul>\n<li>Then I can paste the embed code where it needs to go on the page and hit <strong>Save<\/strong> <strong>changes<\/strong>.<\/li>\n<\/ul>\n<h4><strong>Inserting Embed Code in a WordPress Site<\/strong><\/h4>\n<p>There isn\u2019t necessarily a single way to insert embed code on a WordPress site because it can depend on the template you\u2019re using. But if I\u2019m using the standard classic editor, here\u2019s how I do it.<\/p>\n<ul>\n<li>First, I head to the admin area in the back end and go to either <strong>Pages <\/strong>or <strong>Posts<\/strong>.<\/li>\n<li>Then I click the title of the post or hover over it and click the <strong>Edit<\/strong> option that appears underneath the title to open up the post editor.<\/li>\n<li>Next, I click on the <strong>Text <\/strong>tab on the upper right-hand corner of the text editor.<\/li>\n<\/ul>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"650\" height=\"218\" alt=\"how to embed content on a wordpress website\" style=\"margin-left: auto;margin-right: auto;width: 650px;height: auto;max-width: 100%\" class=\"lazyload\" data-src=\"http:\/\/www.zoomlavilin.com\/wp-content\/uploads\/2025\/08\/how20to20embed20content20on20a20wordpress20website.jpg\"><\/p>\n<ul>\n<li>Finally, I paste the embed code where I want the embedded content to appear in the post.<\/li>\n<\/ul>\n<h3><strong>Step 3:&nbsp;Finished! You have successfully embedded content on your website or blog.<\/strong><\/h3>\n<p>Now all I need to do is save the page, or hit <strong>Update<\/strong> if I\u2019m on a WordPress blog, and refresh the live URL to see the embedded content on the front end.<\/p>\n<h2><strong>Add embedded content to increase user engagement.<\/strong><\/h2>\n<p>There\u2019s a lot of good content out there even if it hasn\u2019t been created by me or the brand I\u2019m working with, and I find using the embed option is a great way to add depth and interest to my webpages. It helps to increase visual appeal and engagement, especially if you\u2019re embedding videos.<\/p>\n<p>Plus, it\u2019s so easy to do. Once you\u2019ve embedded content a couple of times it quickly becomes second nature. So experiment with embedding from different social media platforms in your page or blogs and watch your user engagement grow.<\/p>\n<p><em>Editor&#8217;s note: This post was originally published in September 2013 and has been updated for comprehensiveness.<\/em><\/p>\n<div>\n<\/div>\n<p><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\" width=\"1\" height=\"1\" style=\"min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important\" class=\"lazyload\" data-src=\"https:\/\/track.hubspot.com\/__ptq.gif?a=53&amp;k=14&amp;r=https%3A%2F%2Fblog.hubspot.com%2Fmarketing%2Fhow-to-add-html-embed-codes-ht&amp;bu=https%253A%252F%252Fblog.hubspot.com%252Fmarketing&amp;bvt=rss\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a digital marketing consultant, I spend a lot of time promoting website content on social media. But what about promoting your social presence via your website? Embedding enables you to do exactly that. I\u2019ll often use this tactic for&#8230; <\/p>\n","protected":false},"author":1,"featured_media":2430,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/posts\/2428"}],"collection":[{"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/comments?post=2428"}],"version-history":[{"count":2,"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/posts\/2428\/revisions"}],"predecessor-version":[{"id":2454,"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/posts\/2428\/revisions\/2454"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/media\/2430"}],"wp:attachment":[{"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/media?parent=2428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/categories?post=2428"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.zoomlavilin.com\/index.php\/wp-json\/wp\/v2\/tags?post=2428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}