{"id":12939271,"date":"2020-06-04T16:38:47","date_gmt":"2020-06-04T16:38:47","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=12939271"},"modified":"2024-06-08T19:48:14","modified_gmt":"2024-06-08T19:48:14","slug":"ted-embed","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/ted-embed\/","title":{"rendered":"TED embed"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go back to the list of <strong>Blocks<\/strong><\/a><\/p>\n\n\n\n<p>The TED embed block lets you add a TED video to your page\/post. The embedded video includes a play button that allows users to watch the video on your website.<\/p>\n\n\n\n<p>You cannot embed TED playlists and series.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Six Steps to embed a TED Video on your post or page<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Find the <a href=\"https:\/\/www.ted.com\/talks\/matt_mullenweg_why_working_from_home_is_good_for_business\">video on ted.com<\/a> and copy the video URL from the browser bar.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/06\/find-your-video-on-TED.png\" alt=\"Shows and example of a video found on ted.com.\" class=\"wp-image-12939431\" style=\"width:354px;height:258px\" width=\"354\" height=\"258\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/06\/find-your-video-on-TED.png 800w, https:\/\/wordpress.org\/documentation\/files\/2020\/06\/find-your-video-on-TED-300x219.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/06\/find-your-video-on-TED-768x562.png 768w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Add the TED Embed block to your post.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/01-ted_block.jpg\" alt=\"Adding a block via the \u201cSlash\u201d command from an empty row\" class=\"wp-image-15595948\" width=\"346\" height=\"198\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/01-ted_block.jpg 391w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/01-ted_block-300x172.jpg 300w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><figcaption class=\"wp-element-caption\">Adding a block via the \u201cSlash\u201d command from an empty row<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background\" 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 TED URL from step 1 into the block.<\/li>\n\n\n\n<li>Click on the \u201cEmbed\u201d button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/02-embed_link-1.jpg\" alt=\"Embed option for the TED video block to paste the URL.\" class=\"wp-image-15595950\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>Now you can see the TED video in your editor.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/03-ted_video-1.jpg\" alt=\"Preview of the embedded TED video within the WordPress editor.\" class=\"wp-image-15595954\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>Click on Preview to see how the video is displayed on the front end of your page.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"366\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/04-preview.jpg\" alt=\"Preview of the embedded TED video \" class=\"wp-image-15595956\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/04-preview.jpg 648w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/04-preview-300x169.jpg 300w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Block Toolbar<\/h2>\n\n\n\n<p>Besides the Mover and Drag &amp; Drop Handle, the Block Toolbar for the TED embed shows four buttons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform to<\/li>\n\n\n\n<li>Change alignment<\/li>\n\n\n\n<li>Edit URL, and<\/li>\n\n\n\n<li>More Options.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"457\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/toolbar.jpg\" alt=\"Block Toolbar with options available for the TED Block.\" class=\"wp-image-15595959\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/toolbar.jpg 658w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/toolbar-300x208.jpg 300w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<p><strong>Transform to<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"458\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/05-transform.jpg\" alt=\"Options to transform the TED block to Paragraph, Columns or Group.\" class=\"wp-image-15595961\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/05-transform.jpg 660w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/05-transform-300x208.jpg 300w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n\n\n\n<p>You can transform a TED embed to a Group. This would give you the ability to change the background color around the TED embed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"409\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/06-background-1024x409.jpg\" alt=\"Editor view of a TED video embed as a group with Color Settings controls\" class=\"wp-image-15595966\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/06-background-1024x409.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/06-background-300x120.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/06-background-768x307.jpg 768w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/06-background.jpg 1151w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/07-background_preview-1.jpg\" alt=\"TED video embed with a yellow background.\" class=\"wp-image-15595974\" \/><figcaption class=\"wp-element-caption\">Preview of Ted Embed with background<\/figcaption><\/figure>\n\n\n\n<p><strong>Change Alignment\u00a0<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/08-alignment.jpg\" alt=\"Alignment options for the TED block: wide width, full width, align left, align center, and align right.\" class=\"wp-image-15595978\" style=\"width:201px;height:229px\" width=\"201\" height=\"229\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/08-alignment.jpg 281w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/08-alignment-263x300.jpg 263w\" sizes=\"auto, (max-width: 201px) 100vw, 201px\" \/><\/figure>\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><\/p>\n\n\n\n<p><strong>Edit URL<\/strong><\/p>\n\n\n\n<p>Via the edit URL, you can change the TED 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 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"267\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/09-edit_url.jpg\" alt=\"Editing the block URL via the &quot;edit&quot; option.\" class=\"wp-image-15595980\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/04\/09-edit_url.jpg 936w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/09-edit_url-300x86.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/04\/09-edit_url-768x219.jpg 768w\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>More Options:<\/strong> <\/p>\n\n\n\n<p>These controls give you the option to copy, duplicate, and edit your block as HTML.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" 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<h2 class=\"wp-block-heading\">Block Settings<\/h2>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Media Settings<\/strong><\/p>\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 for the embed block with the toggle OFF for resizing on smaller devices.\" 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 for the embed block with the toggle ON for resizing on smaller devices.\" class=\"wp-image-15595988\" \/><\/figure>\n<\/figure>\n\n\n\n<p>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>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><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><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\"><strong>Advanced<\/strong><\/p>\n\n\n\n<p>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=\"wp-block-heading has-medium-font-size\" id=\"changelog\">Changelog <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2022-11-25\n<ul class=\"wp-block-list\">\n<li>Removed redundant content<\/li>\n\n\n\n<li>Aligned images for mobile view<\/li>\n\n\n\n<li>Added alt text to images<\/li>\n\n\n\n<li>Removed Reusable blocks<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-04-27\n<ul class=\"wp-block-list\">\n<li>Replaced TED screenshots with 5.9 version.<\/li>\n\n\n\n<li>Updated text to match the screenshots<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-09-02\n<ul class=\"wp-block-list\">\n<li>Replaced TED screenshots with  5.5 version.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-08-19\n<ul class=\"wp-block-list\">\n<li>Replaced \u201cMore Options\u201d \u2013 new screenshot<\/li>\n\n\n\n<li>Added \u201cMove To\u201d and \u201cCopy\u201d section under More Options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-06-18\n<ul class=\"wp-block-list\">\n<li>Fixed the &#8216;Block Setting&#8217; section as the advance heading was in the wrong place.<\/li>\n\n\n\n<li>Featured image added.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-06-04\n<ul class=\"wp-block-list\">\n<li>Uploaded images to the media library and replaced old images.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2020-06-04<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of Blocks The TED embed block lets you add a TED video to your page\/post. The embedded video includes a play button that allows users to watch the video on your website. You cannot embed TED playlists and series. Six Steps to embed a TED Video on your post or [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,89],"class_list":["post-12939271","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-embed-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/12939271","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=12939271"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/12939271\/revisions"}],"predecessor-version":[{"id":16360417,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/12939271\/revisions\/16360417"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=12939271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=12939271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}