# Embeds

## Inserting embeds <a href="#h_9ebea333-4ac0-43e1-89ca-3c55fb394680" id="h_9ebea333-4ac0-43e1-89ca-3c55fb394680"></a>

To add an embed, click **Add embed** on the Side Toolbar.

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQU1DFsd0xl4TsKV17-%2F-MQU1qdaFa7oqS7Y_MwQ%2FSetka-Editor-Embeds-in-Side-Toolbar.png?alt=media\&token=0293c4ea-2c40-4bf7-a6e3-5e59e0be878d)

The code form will appear in the post. You can paste either HTML code or a link there.

To see how this embed will look in the post, click **Render** on the Upper Toolbar. To get back to editing, click **Edit** in the top right corner of the embed.

{% embed url="<https://drive.google.com/file/d/1-YKTtTFwB9qt3H_-8zdvlaF0F4nXRPCA/view?usp=sharing>" %}
Video tutorial on how to add a video embed in Setka Editor&#x20;
{% endembed %}

Please watch this short video to learn all about embeds in Setka Editor:&#x20;

{% embed url="<https://drive.google.com/file/d/1-Xlu9ais46ioOZIOT_dZ5YDtb_8MDi-7/view?usp=sharing>" %}
Video tutorial on how to add and edit embeds in Setka Editor
{% endembed %}

### As a link <a href="#h_2003ab20-612b-4932-bdf4-a933d16be9f4" id="h_2003ab20-612b-4932-bdf4-a933d16be9f4"></a>

Copy the link you want to use in the embed (YouTube video, Instagram post, or another external resource). Add an embed to a post via the **Add embed** button on the Side Toolbar. Paste the copied link into the corresponding text field.

The embed will automatically render and occupy the post's entire width or the column allocated to it.

List of supported services:

* [For Setka Editor WordPress plugin](https://codex.wordpress.org/Embeds)
* [For Setka Design Cloud and other integrations](http://embed.ly/providers)

### As an HTML code <a href="#h_327da865-5919-47f6-bd77-0b9875f55e3f" id="h_327da865-5919-47f6-bd77-0b9875f55e3f"></a>

Copy embed HTML code from an external site. Add an embed via the **Add embed** button in the right-hand panel. Paste the copied code into the corresponding text field.&#x20;

This code may contain attributes, such as width, height, opacity, etc. You can change parameters at your discretion.

{% hint style="warning" %}
Inserting embeds via HTML codes is not available in the free version of Setka Editor.&#x20;
{% endhint %}

### Quick add

If you need to add an embed above or below the [grid](https://setka.gitbook.io/help-center/setka-post-editor/grid-modules), the **Quick add** menu can be used. To open it, hover the mouse above the grid and click the **+** button. The purple line above or below the grid will demonstrate where the embed would be placed. If the nested grid is selected, the embed can also be placed above or below the outer grid:

![Adding an embed via Quick add menu](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MLOEPbfEK4119w2ROYc%2Fuploads%2FsXvYBjuaYQG7C4YfzHp9%2FSetka-Editor-Interface-Quick-Add-Embed.png?alt=media\&token=c652d7e5-5fa2-419c-991f-b081d86ffb7f)

## Making Embeds Responsive <a href="#h_7991b4f4-b338-43bb-9695-b0b78585c401" id="h_7991b4f4-b338-43bb-9695-b0b78585c401"></a>

By default, most embeds automatically adapt to the area allocated to them: post or column width. Sometimes you may need to display an embed in its original size, with no stretch or squeeze. To disable Setka Editor's adaptivity algorithms:

1\. Switch to the **Embed** tab on the Upper Toolbar

2\. Open the additional settings menu (▼ button).

3\. Select **off** in the **Responsive embed** dropdown:

4\. The embed will take the dimensions set in its code.

![Screenshot of of Responsive embed option turned off to disable  embed adaptivity in Setka Editor ](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQU1DFsd0xl4TsKV17-%2F-MQU26b9g2Vm8Qzxss2Q%2FSetka-Editor-Responsive-Embeds-Settings-Upper-Toolbar.png?alt=media\&token=2f805e4c-97dd-489c-b8c7-c5f8aeec0e15)

## Some useful embeds <a href="#h_2e8dbb37-2831-4e4f-936e-1cfec1205473" id="h_2e8dbb37-2831-4e4f-936e-1cfec1205473"></a>

### Code snippets <a href="#h_9514eecf-5060-4530-84b3-022da29f2994" id="h_9514eecf-5060-4530-84b3-022da29f2994"></a>

There are several ways to add a code block to your post:

#### Code highlighting services <a href="#h_49b783a3-927e-4b33-9cd3-b3ee8a6058be" id="h_49b783a3-927e-4b33-9cd3-b3ee8a6058be"></a>

E.g. [PineTools](https://pinetools.com/):

1. Select the [Syntax highlighter](https://pinetools.com/syntax-highlighter) tool and paste the code into the **Unhighlighted code** field.
2. Select highlight options in the **Options** -> **Language** -> **Select one** menu or leave as auto (**Autodetect**).
3. Click **Highlight**.
4. Paste the highlighted code into an embed in the Setka Editor.

#### CodePen embeds <a href="#h_c984ca48-8643-4369-a90f-a564ac064f54" id="h_c984ca48-8643-4369-a90f-a564ac064f54"></a>

1. Register on [CodePen](https://codepen.io/).
2. Click **Start Coding** to create a new Pen.
3. To save changes, click the **Save** button in the bottom right corner.
4. Click **Embed** in the bottom right corner and copy the code.
5. Paste the code into an embed in the Setka Editor.

#### Highlighting syntax with highlight.js <a href="#h_da382cbc-2bed-40d3-ad73-ed2fa4824a9b" id="h_da382cbc-2bed-40d3-ad73-ed2fa4824a9b"></a>

1\. Download the library from the [project site](https://highlightjs.org/). Place the file on your server.

2\. Open the [highlight.js guide](https://highlightjs.org/usage/) and follow instructions from the **Getting started** section.

3\. Place the code from below into of your site's page:

```javascript
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js">script>
<script>hljs.initHighlightingOnLoad();script>
```

Note that `/path/to/styles/default.css` and `/path/to/highlight.min.js` must be valid paths to a file downloaded in p. 1. If you will have any issues with placing the file via CMS, replace the paths to [direct links on public CDNs](https://cdnjs.com/libraries/highlight.js/).

4\. Place the code block that you want to highlight, into an embed. Before that, you need to escape the characters of the code itself. E.g., via [HTML Entities Encoder / Decoder](https://www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder). Make sure that your code is wrapped into corresponding tags:

```markup
<pre><code class="html">...</code></pre>
```

### Custom forms

To add a form with a  tag in the code, modify the embed code, and paste it in this format:

```markup
<div id="%%unique_form_placeholder_name%%"></div>
<script>
  var uniqueFormHtml = '%%FORM CODE%%';
  var uniquePlaceholderEl = document.getElementById('%%unique_form_placeholder_name%%');
  if (uniquePlaceholderEl) uniquePlaceholderEl.innerHTML = uniqueFormHtml;
</script>

```

Replace `%%unique_form_placeholder_name%%`in the template into this form's unique ID.

`%%FORM CODE%%`is the whole form code in one row. E.g. transform

```markup
<form action="/subscribe">
 <input type="text">
 <button type="submit">Subscribe</button>
</form>
```

into:

```markup
<form action="/subscribe"><input type="text"><button type="submit">Subscribe</button></form>
```

### Marketo forms

Marketo can generate embed codes for forms located on your account. Please follow the [platform documentation](https://developers.marketo.com/javascript-api/forms/) to get the initial embed code. The code should be modified to fit the Setka standards.

The initial code will follow this template:

```markup
<script src="//app-xyz.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_123"></form>
<script>
MktoForms2.loadForm("//app-xyz.marketo.com", "718-GIV-198", 123);
</script>
```

To make it work with Setka posts, specify protocols for links (HTTP or HTTPS) in the strict form:

```markup
<!-- Add 'https:' to the beginning of the script source link -->
<script src="https://app-xyz.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_123"></form>
<script>
// Add 'https:' to the beginning of the form source link:
MktoForms2.loadForm("https://app-xyz.marketo.com", "718-GIV-198", 123);
</script>
```

The modified embed code can be then placed in the post.&#x20;

## Known issues

### Facebook embeds on mobile

Embeds of some services may be displayed incorrectly. This is due to the fact that an independent document with predefined attribute values is placed inside the container.

If **Responsive embed** is [set](#h_7991b4f4-b338-43bb-9695-b0b78585c401) to **on**, its' content is cut at one side, to keep proportions. When stretching the embed to the width of the screen, check how the content of the mobile version will look, using the preview button on the right-hand panel.

### Videos on mobile <a href="#h_cd8b4956-7635-46cb-9e4f-cdf76e00a980" id="h_cd8b4956-7635-46cb-9e4f-cdf76e00a980"></a>

Videos with **Responsive embed** turned **off** would not adapt to screen width on mobile. To allow shrinking or stretching to width, turn **Embed** **>** **Responsive embed** to **on.**

### Instagram embeds <a href="#h_2a415a70-c762-43e5-b1cc-8b283f53bd69" id="h_2a415a70-c762-43e5-b1cc-8b283f53bd69"></a>

Sometimes Instagram provides embed codes with irregular proportions and an overly large block of comments. It happens when inserting embeds via either [a link](#h_2003ab20-612b-4932-bdf4-a933d16be9f4) or an [HTML code](#h_327da865-5919-47f6-bd77-0b9875f55e3f). To return the block to the proper proportions:

&#x20;1\. Insert Instagram embed via HTML code. Inserting it as a link would not work in this method.

2\. Add another embed with this HTML code anywhere in the post:

```markup
<style>iframe.instagram-media { position: relative !important; }</style>
```

This code will fix the proportions of all Instagram embeds in the post. You need to add it once. Despite the fact that the embed is visible in the editor, the reader will not see it in the final version of the post.

{% hint style="info" %}
**Important note:** make sure the bottom indent is disabled for the above embed.
{% endhint %}