Shortcodes

1. Contentful
2. Shortcodes

A shortcode is a way of adding non-Markdown elements into the flow of a piece of content. So, for example, embedding a Youtube video, adding a table of contents, or inserting a series of articles.

A shortcode consists of a tag wrapped in square brackets, with some optional properties that will affect the shortcode's behaviour.

For example, you can use the embed shortcode (see below) to embed content responsively:

The first word (in this case embed) sets the type of shortcode, and subsequent text within the square brackets (e.g. href="https://www.youtube.com/watch?v=1EZ1b7fcMbg") specify properties that affect how the shortcode how to behave. So, in this example, we've invoked the embed shortcode, and asked it to embed the Youtube video at the url https://www.youtube.com/watch?v=1EZ1b7fcMbg by setting it's src (i.e. 'source') property.

Shortcode Reference

Embed

The embed shortcode allows you to embed items responsively without using any HTML markup. This means that the embed will scale appropriately for different screen sizes (e.g. mobile, tablet, desktop). You should use the embed shortcode instead of the markup provided by, for example, YouTube.

Basic usage

Properties

• src — the URL that points to the embeddable content (see below for more info)

More info

It's important to note that the URL that points to embedded content (say, a video) is not usually the same as the URL that points to a page that hosts that video (say, a page on Youtube.com). As an example, the URL https://www.youtube.com/watch?v=1EZ1b7fcMbg points to a page on the Youtube website, whereas the URL https://www.youtube.com/embed/1EZ1b7fcMbg points to a webpage that just includes the video, and nothing else.

The system is smart enough to figure out some sites (e.g. YouTube). So, if you specify a Youtube page URL (like https://www.youtube.com/watch?v=1EZ1b7fcMbg), the system figures out that you actually want the embed URL (https://www.youtube.com/embed/1EZ1b7fcMbg). However, this is not the case for most other websites, so you'll need to find the URL to the embeddable content.

Most websites use an <iframe> tag to embed content. So, when you get embed code, instead of just pasting in the HTML, e.g.

<iframe width="560" height="315" src="https://www.youtube.com/embed/1EZ1b7fcMbg" frameborder="0" allowfullscreen></iframe>

... just grab the src property of the <iframe> and use that in the embed shortcode: