Embed Block

The Embed Block lets you embed videos, images, tweets, audio, and other content from external sources …

WordPress Block Editor – Embed Block

WordPress Block Editor - Embed Block

This tutorial is part of our series WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users.

***

Embed Block – Description

The Embed block lets you embed videos, images, tweets, audio, and content from other online services or external sources into the posts and pages of your site.

Embed block.
Add media elements to your WordPress site using the Embed block.

How To Use The Embed Block

In this section, we’ll cover:

  • How to add an Embed block to your content.
  • How to edit and configure your Embed block and block settings.
  • How to remove the Embed block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding An Embed Block

To add an Embed block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Embed block (in Most Used or Embeds section),
    • Add the Embed block in the Content Area.
  • Add or paste in your Embed URL.
  • Use the tools in the Embed Block Editor or Block Settings section to align, edit,  or configure your media elements.

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the Add Block tool and select an Embed block…

Add Block tool - Embed block
Use the Add Block tool to insert an Embed block into your posts or pages.

Or, select an Embed block using the Inserter tool in the Content Area.

Inserter Tool - Embed block.
Add an Embed block to your content using the Inserter tool.

Either of the above methods will insert an Embed block into your content.

Embed block.
Embed block (no media embedded yet).

After adding an Embed block, you can:

  • Add a link to the content you want to embed and display on your site.
  • Edit and configure block settings,
  • Save, publish, or update your post or page.
Embed block - Add link
Add a link to embed content into the block.

How To Edit An Embed Block

To edit an Embed block:

  • Click inside the Embed block to select it.
  • Use the Block Editor tools to:
    • Change block alignment.
    • Edit the embed URL.
    • Format caption text (e.g. bold, italics, strikethrough).
    • Add a hyperlink to the embed caption.
  • Use the Block Settings to configure any additional settings for your embedded content.
Embed block editor.
Embed block editor.

The block’s Media settings let you turn the option of resizing your embedded content for smaller devices on or off. This preserves the aspect ratio of your content when the user’s browser is resized.

Embed block - Settings
Embed block – Settings.

Remember to update and publish your post or page to save your settings.

How To Remove An Embed Block

To delete or remove an Embed block:

  • Click inside the Embed block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The Embed block will be removed from your post or page.
Embed block - Remove block.
Use the More Options menu to remove an Embed block from your content.

Additionally…

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
  • You can also convert an Embed block into a Reusable block.

Embed Block Tools, Options & Settings

The Embed Block includes tools, options, and settings for:

  • Embed Block Editor
  • Embed Block Settings

Embed Block Editor

Embed block editor.
Embed block editor.

The Embed Block Editor includes tools that let you perform the following operations:

  • Display Block Type (See ‘Embed Block – Additional Info’ section below.)
  • Drag & Drop Tool
  • Move Up and Down Tool
  • Change Alignment
    • Align left
    • Align center
    • Align right
    • Wide width – wide-aligned embedded media sticks out on either side of normal content.
    • Full width – stretches embedded media to cover the entire width of the browser window (normal content remains within margins on either side).
  • Edit Embed URL
  • More Options – See How To Use Blocks to learn how to use this section.

Embed Block Settings

Embed block settings.
Embed block settings.

Embed Block settings include:

  • Block description area
  • Media Settings
    • Resize for smaller devices – enable to preserve the aspect ratio of embedded content when the browser is resized.
  • Advanced Settings
    • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Embed Block – Additional Info

Supported WordPress Embeds

Embed blocks from 3rd party platforms.
Embed blocks let you embed content from different platforms into your site.

WordPress currently supports embedding content from many third-party platforms, including:

  • Embed – Use this block for general content embedding.
  • Amazon Kindle – Embedded content about Amazon Kindle products.
  • Animoto – A cloud-based video creation service that produces video from photos, video clips, and music into video slideshows.
  • Cloudup – Share photos, music, links, and files.
  • Crowdsignal – Create flexible surveys, polls, quizzes, and ratings.
  • Dailymotion – A video-sharing technology platform.
  • Flickr – An image hosting service and video hosting service.
  • Imgur – An online image-sharing community.
  • Issuu – An electronic publishing platform for flipbooks, digital magazines, and digital catalogs.
  • Kickstarter – A global crowdfunding platform focused on creativity and merchandising.
  • Meetup.com – A service used to organize online groups that host in-person events for people with similar interests.
  • Mixcloud – An online music streaming service.
  • Reddit – A social news aggregation, web content rating, and discussion website.
  • ReverbNation – Tools and opportunities for musicians.
  • Screencast – Share content created with image and video capturing software like Snagit and Camtasia.
  • Scribd – A digital library, e-book, and audiobook subscription service.
  • Slideshare -A hosting service for professional content including presentations, infographics, documents, and videos.
  • SmugMug – An image sharing, image hosting service, and online video platform.
  • SoundCloud – An online audio distribution platform and music sharing website.
  • Speaker Deck – An online presentation sharing site.
  • Spotify – A music streaming platform.
  • TED – Videos from subject experts on education, business, science, tech, and creativity.
  • TikTok – A video-sharing social networking service for short-form videos.
  • Tumblr – A microblogging and social networking website.
  • Twitter – Embed content from Twitter.
  • VideoPress – Upload and share videos on your WordPress blog or any site.
  • Vimeo – A video-sharing website where users can upload, share, and view videos.
  • WordPress – Embed content from WordPress sites.
  • WordPress.tv – Videos and recorded talks about the WordPress platform.
  • YouTube – Embed video content from YouTube.
  • And many others…
Blocks Library - Embed Blocks
Embed content from many 3rd party platforms using embed block.

Use the embed blocks from the platforms listed above, or try adding the content using the general Embed block described in this tutorial.

Warning - important

You cannot embed links from platforms that WordPress does not support.

Embed block - unsupported platform link.
Unsupported platform link.

If you try to add a link from an unsupported platform, you will get the message “Sorry, this content could not be embedded.” and the option to try again, or convert the unsupported content into a link.

Embed block - Convert content to link.
Try again or convert the content into a link.

You can convert an Embed block into the following block types:

Embed block - Change block type or style.
Change the Embed block into other block types.

Additionally:

Installing plugins or themes on your site may also add new functionality, options, or settings to an Embed block.

Sample post with Embed block.
Use the Embed block to embed media and other files into your posts and pages.

Congratulations! Now you know how to use the WordPress content editor’s Embed block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.

For a white label version of this tutorial visit WPTrainingManual.com.
Originally published as Embed Block.