{"id":15596148,"date":"2022-08-16T20:35:02","date_gmt":"2022-08-16T20:35:02","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=15596148"},"modified":"2026-04-05T21:01:25","modified_gmt":"2026-04-05T21:01:25","slug":"embed-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/embed-block\/","title":{"rendered":"Embed block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go to the List of Blocks<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Embed block lets you add content from a third-party site to your post or page. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you are embedding content, you don\u2019t need to upload the content to your WordPress site. You are creating a link to the content, from within your post or page.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Steps to embed content from a third-party site on your post or page<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Copy the URL from the <a href=\"https:\/\/wordpress.org\/documentation\/article\/embeds\/#list-of-sites-you-can-embed-from\">site you want to embed from<\/a>. <\/li>\n\n\n\n<li>Add the Embed block by clicking on the + Block Inserter and searching for the Embed block.&nbsp; Alternatively, you can use the slash command,&nbsp;<code>\/embed<\/code>&nbsp;in a new&nbsp;<em>paragraph block<\/em>&nbsp;then press&nbsp;<code>enter<\/code>&nbsp;to add one quickly.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"275\" height=\"398\" src=\"https:\/\/wordpress.org\/support\/files\/2022\/04\/image-1.png\" alt=\"How to quickly add an Embed block\" class=\"wp-image-15596252\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/image-1.png 275w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/image-1-207x300.png 207w\" sizes=\"auto, (max-width: 275px) 100vw, 275px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Paste the URL from step 1 into the block.<\/li>\n\n\n\n<li>Click on the &#8220;Embed&#8221; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"659\" height=\"268\" src=\"https:\/\/wordpress.org\/support\/files\/2022\/04\/image-3.png\" alt=\"Paste the URL into the Embed block\" class=\"wp-image-15596318\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/image-3.png 659w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/image-3-300x122.png 300w\" sizes=\"auto, (max-width: 659px) 100vw, 659px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>Now you can see the content in your editor. The Embed block will be transformed into the embed block type based on the third-party site from where the content is copied from.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"294\" src=\"https:\/\/wordpress.org\/support\/files\/2022\/04\/image-4.png\" alt=\"Twitter Embed block\" class=\"wp-image-15596323\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/image-4.png 560w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/image-4-300x158.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>Click on Preview to see how the content is displayed on the front end of your page.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"506\" height=\"255\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Preview-Twitter-1.jpg\" alt=\"Preview of the Embed block\" class=\"wp-image-15606179\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Preview-Twitter-1.jpg 506w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/Preview-Twitter-1-300x151.jpg 300w\" sizes=\"auto, (max-width: 506px) 100vw, 506px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Block Toolbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The block toolbar contains the tools to customize each block. The Embed Block\u2019s toolbar consists of the following tools:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Transform to<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"293\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-1.png\" alt=\"Transform tool in the Embed block\" class=\"wp-image-15606186\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-1.png 560w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-1-300x157.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can transform an Embed into a Paragraph, Columns, or Group block. Transforming to a Group block will let you change the background color around the Embed.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"419\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-2-1024x419.png\" alt=\"Grouping Embed block\" class=\"wp-image-15606189\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-2-1024x419.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-2-300x123.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-2-768x314.png 768w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-2.png 1141w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"310\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-3.png\" alt=\"Adding background color to Embed block group.\" class=\"wp-image-15606191\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-3.png 647w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-3-300x144.png 300w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Block-moving tools<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/support\/files\/2022\/08\/Screen-Shot-2022-08-16-at-1.16.55-PM.png\" alt=\"Block moving tools in the Embed block\" class=\"wp-image-15921937\" width=\"394\" height=\"75\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-16-at-1.16.55-PM.png 788w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-16-at-1.16.55-PM-300x57.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-16-at-1.16.55-PM-768x146.png 768w\" sizes=\"auto, (max-width: 394px) 100vw, 394px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use the block-moving tools to move the block up and down inside the editor. Use the six dots icon to drag and drop the&nbsp;<em>Embed Block<\/em>&nbsp;and reposition it anywhere on the editor. Alternatively, click on the up and down arrows to move the block up or down the editor.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\" target=\"_blank\">Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image alignright size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"281\" height=\"321\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-4.png\" alt=\"Change alignment in the Embed block\" class=\"wp-image-15606197\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-4.png 281w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-4-263x300.png 263w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Change alignment <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wide width<\/strong> &#8211; Increase the width of the post beyond the content size<\/li>\n\n\n\n<li><strong>Full width<\/strong> &#8211; extend the TED embed post to cover the full width of the screen.<\/li>\n\n\n\n<li><strong>Align left<\/strong> &#8211; Make the TED embed post left aligned<\/li>\n\n\n\n<li><strong>Align center<\/strong> &#8211; Make the TED embed post alignment centered<\/li>\n\n\n\n<li><strong>Align right <\/strong>&#8211; Make the TED embed post align right<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Edit URL<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Via the edit URL, you can change the Embed URL in the embed block. Overwrite the existing URL and click on the &#8220;Embed&#8221; Button.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"268\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-5.png\" alt=\"Edit URL in the Embed block\" class=\"wp-image-15606201\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-5.png 658w, https:\/\/wordpress.org\/documentation\/files\/2022\/05\/image-5-300x122.png 300w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\">More options<\/h3>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block Settings<\/h2>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\">Media Settings<\/h3>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" data-id=\"15595987\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/18-media_settings_disabled-1-2.jpg\" alt=\"Media settings turned off\" class=\"wp-image-15595987\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"268\" height=\"139\" data-id=\"15595988\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/17-media_settings_enabled-2.jpg\" alt=\"Media settings turned on\" class=\"wp-image-15595988\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Via the <em>Media Settings<\/em> you can control the behavior of your post embed when viewed from a smaller device, like on a phone screen. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Toggle switch turns on or off the resize functionality for smaller devices. The default setting is &#8220;on&#8221; or blue. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>&#8220;Off:&#8221;<\/strong> This embed may not preserve its aspect ratio when the browser is resized. In the off position the toggle switch is gray. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>&#8220;On:&#8221;<\/strong> This embed will preserve its aspect ratio when the browser is resized. The toggle switch turns blue in the &#8220;On&#8221; position. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Advanced<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.<br \/><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/19-advanced_settings-1-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"267\" height=\"140\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/19-advanced_settings-1-1.jpg\" alt=\"The advanced section lets you add a CSS class to your block.\" class=\"wp-image-15595991\" \/><\/a><figcaption class=\"wp-element-caption\">The advanced section lets you add a CSS class to your block.<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group changelog has-very-dark-gray-color has-very-light-gray-background-color has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"has-medium-font-size wp-block-heading\" id=\"changelog\">Changelog<strong> <\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2022-11-26\n<ul class=\"wp-block-list\">\n<li>Removed redundant content <\/li>\n\n\n\n<li>Removed reusable blocks<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-08-16\n<ul class=\"wp-block-list\">\n<li>Added ALT tags for the images<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2022-04-30<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go to the List of Blocks The Embed block lets you add content from a third-party site to your post or page. When you are embedding content, you don\u2019t need to upload the content to your WordPress site. You are creating a link to the content, from within your post or page. Steps to embed [&hellip;]<\/p>\n","protected":false},"author":20344150,"featured_media":15606171,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,89],"class_list":["post-15596148","helphub_article","type-helphub_article","status-publish","has-post-thumbnail","hentry","category-customization","category-embed-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15596148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=15596148"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15596148\/revisions"}],"predecessor-version":[{"id":16360306,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15596148\/revisions\/16360306"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wporg\/v1\/users\/anyk17"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media\/15606171"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=15596148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=15596148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}