How it works...

The Add Block section contains blocks for all the supported embedding options in WordPress' core. We only need to copy the URL from the respective external site and add it to the embedding block for that site. Then, WordPress will automatically add the block code with the necessary content and settings. You can use the Code editor to check how each block is coded inside the editor.

Consider the following code for the YouTube embed block:

<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=ZtZjthPT22o","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=ZtZjthPT22o
</div></figure>
<!-- /wp:core-embed/youtube -->

We can see that a special tag called core-embed/youtube is used for the YouTube embedding block. This will change to core-embed/facebook for the Facebook block. The settings for the video are stored as key:value pairs inside the curly brackets of the opening block tag. Then, we get the necessary HTML containers for the video. The URL of the video is placed in-between these HTML containers.

Once the block is loaded into the frontend, WordPress will use the settings and convert the video into an embeddable video using IFRAMES and other necessary containers. You can use the browser inspection tools to view the generated content after the conversion. Consider the following screenshot for the embedded content for a YouTube video:

As you can see, IFRAME is generated for the video. Within the IFRAME, there are scripts, styles, and containers needed to load the video properly.

The process will be the same for all the available embeds. The generated embedding code will differentiate based on the external site.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset